jquery.validate的使用說明介紹_jquery

一、準備工作
需要JQuery版本：1.2.6 , 相容 1.3.2

官網網址：http://jqueryvalidation.org/

二、預設校驗規則
(1)required:true 必輸欄位 
(2)remote:"check.php" 使用ajax方法呼叫check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件 
(4)url:true 必須輸入正確格式的網址 
(5)date:true 必須輸入正確格式的日期 
( 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 valid email address.",o> : "Please enter a valid URL.", 
date: "Please enter a valid date.", 
dateISO: "Please enter a valid date (ISO).", 
dateDEDE: "Bitte valid date (ISO).", 
dateDEDE: "Bittege Sbenie ein 眉ltiges Datum ein.", 
number: "Please enter a valid number.", 
numberDE: "Bitte geben Sie eine Nummer ein.", 
digits: "Please enter only di
creditcard: "Please enter a valid credit card number.", 
equalTo: "Please enter the same value again.", 
accept: "Please enter avalue with a value. >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: "必選欄位", > "請修正該欄位", 

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中，在頁面中引入

四、使用方式
1.將校驗規則寫到控件中

複製代碼

程式碼如下:

 
 
; 

使用class="{}"的方式，必須引入套件：jquery.metadata.js 可以使用以下的方法，修改提示內容：
class=" {required:true,minlength :5,messages: {required:'請輸入內容'}}"使用equalTo關鍵字時，後面的內容必須加上引號，如下碼：
class=" {required:true ,minlength:5,equalTo :'#password'}" 另外一種方式，使用關鍵字：meta（為了元資料使用其他外掛程式你要把你的驗證規則包裝在自己的專案中可以使用這個特殊的選項）
告訴驗證外掛程式查看元資料中的驗證屬性以取得驗證規則。
例如：

複製程式碼程式碼如下：

meta: "validate" >

還有一種方式：

複製程式碼程式碼如下：

$.metadata.setType("attr", "validate" );這樣可以使用validate="{required:true}"的方式，或是class="required"，但class="{required:true,minlength: 5}"將無效2.將驗證規則寫入程式碼中 
$().ready(function() { 
$("#signupForm").validate({ 
rules: {
名字：「必填」， 
電子郵件：{ 
必填：true， 
電子郵件：true 
}， 
密碼：{ 
必填：true， 
最小長度: 5  }, 
{ 
必需: true, 
最小長度: 5, 
equalTo: "#password" 
} 
}, 
訊息: { 
名字: "請輸入姓名」 , 
電子郵件: { 
必填: "請輸入電子郵件地址", 
電子郵件: "請輸入正確的電子郵件地址" 
}, 
password: { 
required: "請輸入密碼", 
minlength: jQuery.format("密碼不能小於{0}個字元") 
}, 
confirm_password: { 
required : "🎜>confirm_password: { 
required : "請輸入確認密碼", 
minlength: "確認密碼不能小於5個字元", 
equalTo: "兩次輸入密碼不一致" 
} 
} 
});
});/🎜>} 
});

});/🎜>} 
});

}); /訊息處，如果某個控制項沒有訊息，將呼叫預設的訊息

複製程式碼複製程式碼 程式碼如下：

 

 
名字標籤> 
 

 

 
電子郵件標籤> 
 

 

 
密碼標籤> 
 

 

 
確認密碼; 
 

 

 
 
 
表格> 

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

五、常用方法及注意問題

1.用其他方式取代預設的SUBMIT$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert ("已提交");
form.submit();
}
});
});

可以設定validate的預設值，寫法如下：
$.validator.setDefaults({
submitHandler: function(form) {alert("已提交！");form.submit(); }
});

如果想提交表單，需要使用form.submit()而不是使用$(form).submit()

2.debug，如果這個參數是true，那麼表單不會提交，只要檢查，調試時十分方便
$().ready(function() {
$("#signupForm" ) .validate({
調試:true
});
});

如果一個頁面有多個表單，用
$.validator.setDefaults({
debug: true
})

3.ignore：忽略某些元素不驗證
ignore: ".ignore"

4.errorPlacement：回呼預設：將錯誤訊息放在驗證的元素後面

指明錯誤放置的位置，預設情況是：error.appendTo(element.parent());即把錯誤訊息放在驗證的元素後面
errorPlacement: function(error, element) {
error .appendTo(element.parent());
}//範例：

複製程式碼程式碼如下：

 
名字 
 

 
 
 
 
14/02/07 
 
 
 
07/02/14 
 
 

 
 
 

 
 
我已閱讀並接受使用條款。  

 
 
errorPlacement: function(error, element) { 
if ( element.is(":radio") ) 
error.appendTo( element.parent().next().next ()); 
else if ( element.is(":checkbox") ) 
error.appendTo ( element.next() ) ; 
else 
error.appendTo( element.parent().next() ); 
}

コードの機能は次のとおりです。 通常の状況では、エラー メッセージは に表示されます。ラジオの場合は に表示され、チェックボックスの場合はコンテンツの後ろに表示されます。 errorClass: 文字列 デフォルト: "error"

エラー プロンプトの CSS クラス名を指定すると、エラー プロンプトのスタイルをカスタマイズできます。 errorElement: String Default: "label"

エラーをマークするにはどのラベルを使用する必要がありますか? デフォルトは label です。emerrorContainer: Selector

に変更できます。

検証情報を表示または非表示にすると、エラー メッセージが表示された場合に表示されるコンテナーのプロパティが自動的に変更され、エラーがない場合は非表示になります。

errorContainer: "#messageBox1, #messageBox2"errorLabelContainer：セレクター

エラーメッセージをコンテナに入れます。ラッパー: 文字列

上記の errorElement をラップするにはどのタグを使用する必要がありますか? .error",

errorLabelContainer: $("#signupForm div.error"),
wrapper: "li" エラー プロンプトのスタイルを設定します。表示するアイコンを追加できます。 input.error { border: 1px 単色赤 }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; padding-bottom: 2px; color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}成功: String,Callback

検証対象の要素が検証に合格した後のアクションは、文字列が続く場合、CSS クラスとして扱われます。または、関数
success: function(label) {// IE のテキストとして設定
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}

CSS で定義されたスタイルで検証要素に「valid」を追加します

success: "valid" nsubmit: Boolean Default: true

送信時に検証します。 false に設定されている場合は、他のメソッドを使用して検証します。

onfocusout: ブール値 デフォルト: true

フォーカスを失うと検証になります (チェックボックス/ラジオ ボタンを除く)

onkeyup: ブール値 デフォルト: true

キーアップ時に確認します。

onclick: ブール値 デフォルト: true

チェックボックスとラジオのクリックを検証します

focusInvalid: ブール値 デフォルト: true

フォームが送信された後、検証に失敗したフォーム (送信前にフォーカスを受け取った最初の検証フォームまたは失敗した検証フォーム) がフォーカスを取得します。

focusCleanup: ブール値 デフォルト: false

true の場合、検証に失敗した要素がフォーカスを取得したときのエラー メッセージを削除します。 focusInvalid との併用は避けてください // フォームをリセット

コードをコピー コードは次のとおりです:

$( ).ready(function() {
var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit();
}
});
$("#reset").click(function() {
validator.resetForm();
}); });

検証に ajax を使用します。デフォルトでは、現在検証されている値がリモート アドレスに送信されます。他の値を送信する必要がある場合は、データ オプション

コードをコピー コードは次のとおりです:

remote: {

url: "check-email. php", //バックエンドハンドラ
type: "post", //データ送信メソッド
dataType: "json", //受け入れるデータ形式
data: { //転送するデータ
username: function() {
return $( "#username").val();
}
}
}


リモート アドレスは " のみを出力できますtrue" または "false" であり、他の出力を持つことはできません addMethod: 名前、メソッド、メッセージ

カスタム検証メソッド

コードをコピー コードは次のとおりです:

// 2 バイトの漢字

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = 値.長さ;
for(var i = 0; i if(値.charCodeAt(i) > 127){
長さ ;
}
return this.optional(element) | ( length >= param[0] && length
}, $.validator.format("入力された値が {0}-{1} バイト以内であること (漢字 1 文字は 2 バイトとしてカウントされます)"));
// 郵便番号検証
jQuery.validator.addMethod("isZipCode", function(値、要素) {
var tel = / ^[0-9]{6}$/;
return this.optional(element) || (tel.test(value)); "郵便番号を正しく入力してください");

コードをコピー

コードは次のとおりです:

ラジオとチェックボックスと選択の検証では、いずれかを選択する必要があります

チェックボックスの必須は、選択する必要があることを意味します
チェックボックスの minlength は、選択する必要がある項目の最小数を示します。 maxlength は、選択する必要がある項目の最大数を示します。 rangelength:[2,3] は、選択された数値範囲を表します。


in select は、選択された値を空にすることはできないことを意味します
オプション値=""オプション>
バガオプション>
バガオプション> >Oi option> ] は選択した数値間隔を表します




コードをコピー

コードは次のとおりです:

ラジオ、チェックボックス、および選択 必須とは、ラジオが < ;input type="radio" id="gender_♀" value="f" name="gender"/>チェックボックスが必須であることを意味します選択する必要があります チェックボックスの minlength は、最小数を示します。を選択する必要があり、maxlength は選択された項目の最大数を示し、rangelength:[2,3] は選択された項目の範囲を示します。

🎜>select で必須とは、選択した値を空にすることはできないことを意味します
>
Baga
Baga ;
Oi
>select の minlength は選択された項目の最小数を表し、maxlength は最大数を表します。選択された数値、および rangelength:[2,3] は選択された数値範囲を表します

;option value="b">バナナ
Apple
ピーチ
タートル