Jquery.validation.js學習

導入 js 庫

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

默認校驗規則

序號	規則	描述
1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調用 check.php 驗證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網址。
5	date:true	必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7	number:true	必須輸入合法的數字（負數，小數）。
8	digits:true	必須輸入整數。
9	creditcard:	必須輸入合法的信用卡號。
10	equalTo:"#field"	輸入值必須和 #field 相同。
11	accept:	輸入擁有合法後綴名的字符串（上傳文件的後綴）。
12	maxlength:5	輸入長度最多是 5 的字符串（漢字算一個字符）。
13	minlength:10	輸入長度最小是 10 的字符串（漢字算一個字符）。
14	rangelength:[5,10]	輸入長度必須介於 5 和 10 之間的字符串（漢字算一個字符）。
15	range:[5,10]	輸入值必須介於 5 和 10 之間。
16	max:5	輸入值不能大於 5。
17	min:10	輸入值不能小於 10。

詳細接掃見：http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

<script type="text/javascript"
	src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/validation/jquery.validate.js" type="text/javascript"></script>
<script src="../js/validation/messages_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/validation/validation.css">

label.error{
background: url("../../images/setting/nwwo_ico.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-position: -548px -290px;
    color: #dd3c10;
    font-size: 12px;
    height: 27px;
    line-height: 27px;
    padding: 0 5px 0 20px;
}

$(function() {
	$("#pass-account").validate({
        rules: {
        account:{
        	required: true,
        	minlength: 4
        },
        email: {
    				required: true,
    				email: true,
    				remote: {
    				    url: "../check/email.do",     //後臺處理程序
    				    type: "post",               //數據發送方式
    				    dataType: "json",           //接受數據格式   
    				    data: {                     //要傳遞的數據
    				        email: function() {
    				            return $("#input_email").val();
    				        }
    					}
    				}
   		},
   		password: {
    				required: true,
    				minlength: 6
  		},
  		password2: {
    				required: true,
    				minlength: 6,
    				equalTo: "#input_passwd"
  		}  
  		}
	
    });
	$("#account-button").click(function(){
		if($("#pass-account").valid()){
			register();
		}
	});
});
function register(){
	var url="${contextPath}/register/register.do";
	var form = $("#pass-account");
	var params = form.serialize();
	$.post(url, params, function(data) {
		if (data.flag) {
			success();
			$(".success").fadeIn(1000,function(){
				$(".success").fadeOut(3000,function(){
					location.href ="${contextPath}/register/success.do";
				});
			});
		} else {
			alert("fail");
		}
	});
}

注意：1.js文件的導入順序，jquery 不能重複加載，要不然容易出錯誤

2.最後提交按鈕可以對valid（）屬性進行判斷

3.remote裏面的data值要用function