jquery validate 詳解一

jquery validate 詳解一
jQuery校正 
一匯入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

三、預設的提示

messages: {
required: This field is required.,
remote: Please fix this field.,
email: Please enter a valid email address.,
url: Please enter a valid URL.,
date: Please enter a valid date.,
dateISO: Please enter a valid date (ISO).,
dateDE: Bitte geben Sie ein g眉ltiges Datum ein.,
number: Please enter a valid number.,
numberDE: Bitte geben Sie eine Nummer ein.,
digits: Please enter only digits,
creditcard: Please enter a valid credit card number.,
equalTo: Please enter the same value again.,
accept: Please enter a value with a valid extension.,
maxlength: $.validator.format(Please enter no more than {0} characters.),
minlength: $.validator.format(Please enter at least {0} characters.),
rangelength: $.validator.format(Please enter a value between {0} and {1} characters long.),
range: $.validator.format(Please enter a value between {0} and {1}.),
max: $.validator.format(Please enter a value less than or equal to {0}.),
min: $.validator.format(Please enter a value greater than or equal to {0}.)
},

如需要修改，可在js代碼中加入：

jQuery.extend(jQuery.validator.messages, {
required: 必選欄位,
remote: 請修正該欄位,
email: 請輸入正確格式的電子郵件,
url: 請輸入合法的網址,
date: 請輸入合法的日期,
dateISO: 請輸入合法的日期 (ISO).,
number: 請輸入合法的數字,
digits: 只能輸入整數,
creditcard: 請輸入合法的信用卡號,
equalTo: 請再次輸入相同的值,
accept: 請輸入擁有合法尾碼名的字串,
maxlength: jQuery.validator.format(請輸入一個 長度最多是 {0} 的字串),
minlength: jQuery.validator.format(請輸入一個 長度最少是 {0} 的字串),
rangelength: jQuery.validator.format(請輸入 一個長度介於 {0} 和 {1} 之間的字串),
range: jQuery.validator.format(請輸入一個介於 {0} 和 {1} 之間的值),
max: jQuery.validator.format(請輸入一個最大為{0} 的值),
min: jQuery.validator.format(請輸入一個最小為{0} 的值)
});

推薦做法，將此檔案放入messages_cn.js中，在頁面中引入
<script src=../js/messages_cn.js type=text/javascript></script>

四、使用方式1.將校正規則寫到控制項中

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

$().ready(function() {
$(#signupForm).validate();
});

 

 

使用class={}的方式，必須引入包：jquery.metadata.js

可以使用如下的方法，修改提示內容：
class={required:true,minlength:5,messages:{required:'請輸入內容'}}

在使用equalTo關鍵字時，後面的內容必須加上引號，如下代碼：
class={required:true,minlength:5,equalTo:'#password'}

2.將校正規則寫到js代碼中

$().ready(function() {
$(#signupForm).validate({
rules: {
firstname: required,
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: #password
}
},
messages: {
firstname: 請輸入姓名,
email: {
required: 請輸入Email地址,
email: 請輸入正確的email地址
},
password: {
required: 請輸入密碼,
minlength: jQuery.format(密碼不能小於{0}個字 符)
},
confirm_password: {
required: 請輸入確認密碼,
minlength: 確認密碼不能小於5個字元,
equalTo: 兩次輸入密碼不一致不一致
}
}
});
});

//messages處，如果某個控制項沒有message，將調用預設的資訊

 

 

required:true 必須有值
required:#aa:checked運算式的值為真，則需要驗證
required:function(){}返回為真，表時需要驗證
後邊兩種常用於，表單中需要同時填或不填的元素