JAVA_WEB專案之j使用query的驗證框架的例子

chenchudongsg發表於2014-07-22
JavaWeb框架

一般我們在做網站開發的時候都會遇到前臺表單的驗證，以及遠端驗證：類似於註冊的使用者名稱是否被佔用，下面貼出個人在學習過程中編寫的例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>首頁</title>
     <script type="text/javascript" src="/shop/js/jquery-1.3.js"></script>
     <script type="text/javascript" src="/shop/js/jquery.validate.js"></script>
     <script type="text/javascript">
     	$(function(){
     		//自定義驗證方法(方法名，方法體，錯誤訊息)
     		$.validator.addMethod("checkText",function(value, element,param){
     			//根據返回true或false來表示驗證是否通過
     			console.log(value);
     			console.log(element);
     			console.log(param[0]+"-"+param[1]);
     			return false;
     		},"內容不能為空");
     		$("form").validate({
     			debug:true,
     			//文字框在丟失焦點的時候才驗證
     			onkeyup:false,
     			rules:{
     				username:{
     					required:true,
     					rangelength:[4,12],
     					remote:{//遠端驗證，預設在表單會把引數和引數值傳遞過去
     						url: "shopAjax_ajaxDemo.action",
     						type:"post"
     					}
     				},
     				pass:{
     					required:true,
     					rangelength:[4,12]
     				},
     				passconfirm:{
     					equalTo:"#pass"
     				},
     				email:{
     					email:true
     				},
     				file:{
     					required:true,
     					accept:"gif|jpg"
     				},
     				address:{
     					required:true
     				},
     				test:{
     					checkText:[1,16]
     				}
     			},
     			messages:{
     				username:{
     					required:"使用者名稱不能為空",
     					rangelength:$.format("使用者名稱的長度必須在{0}-{1}之間"),
     					remote:"使用者名稱被佔用"
     				},
     				pass:{
     					required:"密碼不能為空",
     					rangelength:$.format("密碼的長度必須在{0}-{1}之間")
     				},
     				passconfirm:{
     					equalTo:"密碼不一致"
     				},
     				email:{
     					email:"輸入的郵箱格式不正確"
     				},
     				file:{
     					required:"檔案必須上傳",
     					accept:$.format("上傳的檔案格式必須為{0}")
     				},
     				address:{
		   				required:"請選擇地址"
		   			}
		   			
     			}
     			
     		});
     	});
     </script>
  </head>
  <body>
  	<form action="http://www.baidu.com" method="post">
  		使用者名稱：<input name="username" type="text"></br>
  		密碼：<input name="pass" type="text" id="pass"></br>
  		確認密碼：<input name="passconfirm" type="text"></br>
  		郵箱: <input type="text" name="email" /><br />
  		照片:<input type="file" name="file" /><br>
  		<select name="address">
  			<option value="廣東">廣東</option>
  			<option value="廣西">廣西</option>
  		</select></br>
  		測試：<input type="type" name="test"><br>
  		<input type="submit" value="提交">
  	</form>
  </body>
</html>
struts。xml配置： 

<action name="shopAjax_*" class="registerDemo" method="{1}">
			<result name="stream" type="stream"></result>
		</action>


後臺遠端驗證： 

package com.shop.action;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.sun.xml.internal.messaging.saaj.util.ByteInputStream;
@Controller("registerDemo")
@Scope("prototype")
public class RegisterDemo {

	private InputStream inputStream;
	
	private String username;
	public InputStream getInputStream() {
		return inputStream;
	}

	public void setInputStream(InputStream inputStream) {
		this.inputStream = inputStream;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}
	public String ajaxDemo(){
		if(username.equals("admin")){
			System.out.println(username);
			inputStream=new ByteArrayInputStream("false".getBytes());
		}else{
			System.out.println(username);
			inputStream=new ByteArrayInputStream("true".getBytes());
			
		}
		return "stream";
	}
	
}



</pre>結果顯示：<p></p><p><img src="https://img-blog.csdn.net/20140722170147552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbmNodWRvbmdzZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>如何制定錯誤訊息的顯示位置以及遠端驗證成功後的結果顯示，下面用一個完整的例子來顯示。</p><p><pre name="code" class="java"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>首頁</title>
     <script type="text/javascript" src="/shop/js/jquery-1.3.js"></script>
     <script type="text/javascript" src="/shop/js/jquery.validate.js"></script>
     <script type="text/javascript">
     	$(function(){
     		//自定義驗證方法(方法名，方法體，錯誤訊息)
     		$.validator.addMethod("checkText",function(value, element,param){
     			//根據返回true或false來表示驗證是否通過
     			console.log(value);
     			console.log(element);
     			console.log(param[0]+"-"+param[1]);
     			return false;
     		},"內容不能為空");
     		$("form").validate({
     			debug:true,
     			//文字框在丟失焦點的時候才驗證
     			onkeyup:false,
     			rules:{
     				username:{
     					required:true,
     					rangelength:[4,12],
     					remote:{//遠端驗證，預設在表單會把引數和引數值傳遞過去
     						url: "shopAjax_ajaxDemo.action",
     						type:"post"
     					}
     				},
     				pass:{
     					required:true,
     					rangelength:[4,12]
     				},
     				passconfirm:{
     					equalTo:"#pass"
     				},
     				email:{
     					email:true
     				},
     				file:{
     					required:true,
     					accept:"gif|jpg"
     				},
     				address:{
     					required:true
     				},
     				test:{
     					checkText:[1,16]
     				}
     			},
     			messages:{
     				username:{
     					required:"使用者名稱不能為空",
     					rangelength:$.format("使用者名稱的長度必須在{0}-{1}之間"),
     					remote:"使用者名稱被佔用"
     				},
     				pass:{
     					required:"密碼不能為空",
     					rangelength:$.format("密碼的長度必須在{0}-{1}之間")
     				},
     				passconfirm:{
     					equalTo:"密碼不一致"
     				},
     				email:{
     					email:"輸入的郵箱格式不正確"
     				},
     				file:{
     					required:"檔案必須上傳",
     					accept:$.format("上傳的檔案格式必須為{0}")
     				},
     				address:{
		   				required:"請選擇地址"
		   			}
		   			
     			},
     			errorPlacement:function(error,element){//跟一個函式,可以自定義錯誤放到哪裡
     				element.parent("td").next().html(error);
     			}
     			,
     			success:function(label){//驗證成功後捆版的函式，引數是包含了錯誤訊息的標籤預設是label
     				$(label).html(" ");
     				$(label).attr("class","success");
     				alert($(label).attr("class"));
     				
     			}
     		});
     	});
     </script>
     <style type="text/css">
     /**
     	錯誤訊息的樣式
     */
     	form label{
     		color:red;
     		background-image: url("image/error.png");
     		background-repeat:no-repeat;
     		padding-left:25px;
     	}
     	 /**
     	成功訊息的樣式
         */
     	.success{
     		background-repeat:no-repeat;
     		padding-left:25px;
     		background-image: url("image/right.png");
     	}
     </style>
  </head>
  <body>
  	<form action="http://www.baidu.com" method="post">
  	<table border="1" width="600px">
  		<tr>
  			<td>使用者名稱：</td>
  			<td><input name="username" type="text"></br></td>
  			<td></td>
  		</tr>
  		<tr>
  			<td>密碼：</td>
  			<td><input name="pass" type="text" id="pass"></br></td>
  			<td> </td>
  		</tr>
  		<tr>
  			<td>確認密碼：</td>
  			<td><input name="passconfirm" type="text"></br></td>
  			<td></td>
  		</tr>
  		<tr>
  			<td>郵箱: </td>
  			<td><input type="text" name="email" /><br /></td>
  			<td> </td>
  		</tr>
  		<tr>
  			<td>照片:</td>
  			<td><input type="file" name="file" /><br></td>
  			<td> </td>
  		</tr>
  		<tr>
  			<td>地址</td>
  			<td><select name="address">
  			<option value="廣東">廣東</option>
  			<option value="廣西">廣西</option>
  		</select></br>
  			</td>
  			<td> </td>
  		</tr>
  		<tr>
  			<td>測試：</td>
  			<td><input type="type" name="test"><br></td>
  			<td> </td>
  		</tr>
  		<tr>
  			<td colspan="3" align="center"><input type="submit" value="提交"></td>
  		</tr>
  	</table>
  	</form>
  </body>
</html>

顯示的結果：



相關文章