jQuery Mengesahkan
jQuery Sahkan
jQuery Validate plug-in menyediakan fungsi pengesahan yang berkuasa untuk borang, menjadikan pengesahan borang sebelah pelanggan lebih mudah dan menyediakan sejumlah besar pilihan Penyesuaian untuk memenuhi pelbagai keperluan aplikasi. Pemalam ini menggabungkan satu set kaedah pengesahan yang berguna, termasuk URL dan pengesahan e-mel, dan menyediakan API untuk menulis kaedah yang ditentukan pengguna. Semua kaedah yang digabungkan menggunakan bahasa Inggeris untuk mesej ralat secara lalai dan telah diterjemahkan ke dalam 37 bahasa lain.
Pemalam ini ditulis dan diselenggara oleh J?rn Zaefferer, ahli pasukan jQuery, pembangun utama dalam pasukan UI jQuery dan penyelenggara QUnit. Pemalam ini telah wujud sejak zaman awal jQuery pada tahun 2006 dan telah dikemas kini sejak itu. Versi semasa ialah 1.14.0.
Lawati tapak web rasmi jQuery Validate dan muat turun versi terkini pemalam jQuery Validate.
Import perpustakaan js
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
Peraturan pengesahan lalai
| 序號(hào) | 規(guī)則 | 描述 |
|---|---|---|
| 1 | required:true | 必須輸入的字段。 |
| 2 | remote:"check.php" | 使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。 |
| 3 | email:true | 必須輸入正確格式的電子郵件。 |
| 4 | url:true | 必須輸入正確格式的網(wǎng)址。 |
| 5 | date:true | 必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯(cuò)，慎用。 |
| 6 | dateISO:true | 必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式，不驗(yàn)證有效性。 |
| 7 | number:true | 必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。 |
| 8 | digits:true | 必須輸入整數(shù)。 |
| 9 | creditcard: | 必須輸入合法的信用卡號(hào)。 |
| 10 | equalTo:"#field" | 輸入值必須和 #field 相同。 |
| 11 | accept: | 輸入擁有合法后綴名的字符串（上傳文件的后綴）。 |
| 12 | maxlength:5 | 輸入長度最多是 5 的字符串（漢字算一個(gè)字符）。 |
| 13 | minlength:10 | 輸入長度最小是 10 的字符串（漢字算一個(gè)字符）。 |
| 14 | rangelength:[5,10] | 輸入長度必須介于 5 和 10 之間的字符串（漢字算一個(gè)字符）。 |
| 15 | range:[5,10] | 輸入值必須介于 5 和 10 之間。 |
| 16 | max:5 | 輸入值不能大于 5。 |
| 17 | min:10 | 輸入值不能小于 10。 |
Gesaan lalai
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 ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
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}." )}jQuery Validate menyediakan pakej gesaan mesej bahasa Cina, yang terletak di dist/localization/messages_zh.js bagi pakej muat turun adalah seperti berikut:
(function( factory ) {if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );} else {
factory( jQuery );}}(function( $ ) {/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語, 漢語)
*/$.extend($.validator.messages, {
required: "這是必填字段",
remote: "請(qǐng)修正此字段",
email: "請(qǐng)輸入有效的電子郵件地址",
url: "請(qǐng)輸入有效的網(wǎng)址",
date: "請(qǐng)輸入有效的日期",
dateISO: "請(qǐng)輸入有效的日期 (YYYY-MM-DD)",
number: "請(qǐng)輸入有效的數(shù)字",
digits: "只能輸入數(shù)字",
creditcard: "請(qǐng)輸入有效的信用卡號(hào)碼",
equalTo: "你的輸入不相同",
extension: "請(qǐng)輸入有效的后綴",
maxlength: $.validator.format("最多可以輸入 {0} 個(gè)字符"),
minlength: $.validator.format("最少要輸入 {0} 個(gè)字符"),
rangelength: $.validator.format("請(qǐng)輸入長度在 {0} 到 {1} 之間的字符串"),
range: $.validator.format("請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
max: $.validator.format("請(qǐng)輸入不大于 {0} 的數(shù)值"),
min: $.validator.format("請(qǐng)輸入不小于 {0} 的數(shù)值")});}));Anda boleh menyetempatkan mesej Fail dist/localization/messages_zh.js diperkenalkan ke halaman:
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
Penggunaan
1 Tulis peraturan pengesahan ke dalam kawalan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$("#commentForm").validate();
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>輸入您的名字，郵箱，URL，備注。</legend>
<p>
<label for="cname">Name (必需, 最小兩個(gè)字母)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (必需)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (可選)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">備注 (必需)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>Cubalah
2 Tulis peraturan pengesahan ke dalam kod js di
$().ready(function() {// 在鍵盤按下并釋放及提交后驗(yàn)證提交表單
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2 },
password: {
required: true,
minlength: 5 },
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password" },
email: {
required: true,
email: true },
topic: {
required: "#newsletter:checked",
minlength: 2 },
agree: "required" },
messages: {
firstname: "請(qǐng)輸入您的名字",
lastname: "請(qǐng)輸入您的姓氏",
username: {
required: "請(qǐng)輸入用戶名",
minlength: "用戶名必需由兩個(gè)字母組成" },
password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長度不能小于 5 個(gè)字母" },
confirm_password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長度不能小于 5 個(gè)字母",
equalTo: "兩次密碼輸入不一致" },
email: "請(qǐng)輸入一個(gè)正確的郵箱",
agree: "請(qǐng)接受我們的聲明",
topic: "請(qǐng)選擇兩個(gè)主題" }});mesej Jika kawalan tidak mempunyai mesej, mesej lalai
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 在鍵盤按下并釋放及提交后驗(yàn)證提交表單
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
"topic[]": {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "請(qǐng)輸入您的名字",
lastname: "請(qǐng)輸入您的姓氏",
username: {
required: "請(qǐng)輸入用戶名",
minlength: "用戶名必需由兩個(gè)字母組成"
},
password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長度不能小于 5 個(gè)字母"
},
confirm_password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長度不能小于 5 個(gè)字母",
equalTo: "兩次密碼輸入不一致"
},
email: "請(qǐng)輸入一個(gè)正確的郵箱",
agree: "請(qǐng)接受我們的聲明",
topic: "請(qǐng)選擇兩個(gè)主題"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>驗(yàn)證完整的表單</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">用戶名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密碼</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">驗(yàn)證密碼</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">請(qǐng)同意我們的聲明</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我樂意接收新信息</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>主題 (至少選擇兩個(gè)) - 注意：如果沒有勾選“我樂意接收新信息”以下選項(xiàng)會(huì)隱藏，但我們這里作為演示讓它可見</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester
</label>
<label for="topic" class="error" style="display:none">至少選擇兩個(gè)</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>akan dipanggil. . Cubalah
diperlukan: benar nilai diperlukan.
diperlukan: "#aa:checked" Jika nilai ungkapan itu benar, pengesahan diperlukan.
diperlukan: function(){} mengembalikan benar, menunjukkan bahawa pengesahan diperlukan.
Dua yang terakhir ini biasanya digunakan untuk elemen dalam borang yang perlu diisi atau ditinggalkan pada masa yang sama.
Kaedah dan isu biasa yang perlu diberi perhatian
1 Gunakan kaedah lain untuk menggantikan SUBMIT lalai
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit(); }
});});Gunakan kaedah ajax
$(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
})untuk menetapkan nilai lalai. of validate. Penulisan adalah seperti berikut:
$.validator.setDefaults({
submitHandler: function(form) { alert("提交事件!");form.submit(); }});Jika anda ingin menyerahkan borang, anda perlu menggunakan form.submit() dan bukannya $(form).submit().
2. Nyahpepijat, hanya sahkan tetapi tidak menyerahkan borang
Jika parameter ini benar, maka borang tidak akan diserahkan dan hanya diperiksa, yang sangat mudah untuk nyahpepijat.
$().ready(function() {
$("#signupForm").validate({
debug:true });});Jika terdapat berbilang borang pada halaman yang anda ingin tetapkan sebagai nyahpepijat, gunakan:
$.validator.setDefaults({
debug: true})3 abaikan: abaikan elemen tertentu dan jangan sahkan
ignore: ".ignore"
4. Tukar kedudukan di mana mesej ralat dipaparkan
errorPlacement：Callback
menunjukkan kedudukan di mana ralat diletakkan. Lalai ialah: error.appendTo(element.parent()); di sebalik elemen yang disahkan.
errorPlacement: function(error, element) {
error.appendTo(element.parent()); }Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn）</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 提交時(shí)驗(yàn)證表單
var validator = $("#form1").validate({
errorPlacement: function(error, element) {
// Append error within linked label
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
errorElement: "span",
messages: {
user: {
required: " (必需字段)",
minlength: " (不能少于 3 個(gè)字母)"
},
password: {
required: " (必需字段)",
minlength: " (字母不能少于 5 個(gè)且不能大于 12 個(gè))",
maxlength: " (字母不能少于 5 個(gè)且不能大于 12 個(gè))"
}
}
});
$(".cancel").click(function() {
validator.resetForm();
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>登錄框</legend>
<p>
<label for="user">用戶名</label>
<input id="user" name="user" required minlength="3">
</p>
<p>
<label for="password">密碼</label>
<input id="password" type="password" maxlength="12" name="password" required minlength="5">
</p>
<p>
<input class="submit" type="submit" value="Login">
</p>
</fieldset>
</form>
</body>
</html>Cubalah
Fungsi kod ialah: Secara amnya, mesej ralat dipaparkan dalam <td class="status"></td>, jika ia adalah radio, ia akan dipaparkan dalam <td></td>, jika ia adalah kotak pilihan, ia akan dipaparkan di belakang kandungan.
| Parameter | Taip | Penerangan | Nilai Lalai | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| errorClass | < td>StringNyatakan nama kelas css bagi gesaan ralat dan anda boleh menyesuaikan gaya gesaan ralat. | "error" | |||||||||||||||||||||||||
| errorElement | String | Label apa yang hendak digunakan untuk menandakan ralat, label lalai ialah label, Ia boleh ditukar kepada em. | "label" | ||||||||||||||||||||||||
| errorContainer | Pemilih | Paparkan atau sembunyikan maklumat pengesahan, yang boleh secara automatik dilaksanakan Ia tidak berguna untuk menukar sifat kontena untuk dipaparkan apabila mesej ralat muncul dan menyembunyikan apabila tiada ralat.
| |||||||||||||||||||||||||
| errorLabelContainer | Pemilih | < td>Letakkan maklumat ralat dalam bekas.||||||||||||||||||||||||||
| pembungkus | String | Apakah teg yang harus digunakan untuk membalut errorELEement di atas . |
Secara amnya, ketiga-tiga atribut ini digunakan pada masa yang sama untuk merealisasikan fungsi memaparkan semua gesaan ralat dalam bekas dan menyembunyikannya secara automatik apabila tiada maklumat.
errorContainer: "div.error",errorLabelContainer: $("#signupForm div.error"),wrapper: "li"5 Tukar gaya paparan mesej ralat
Tetapkan gaya gesaan ralat, anda boleh menambah paparan ikon, pengesahan.css telah diwujudkan dalam sistem ini, khusus untuk penyelenggaraan dan pengesahan Gaya fail.
input.error { border: 1px solid red; }label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;}label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;}6. Setiap medan disahkan dengan melaksanakan fungsi
success：String,Callback
Tindakan selepas elemen yang akan disahkan melepasi pengesahan jika diikuti dengan rentetan, ia akan dianggap sebagai kelas css, atau ia boleh diikuti dengan fungsi.
success: function(label) { // set as text for IE
label.html(" ").addClass("checked"); //label.addClass("valid").text("Ok!")}Tambahkan "sah" pada elemen pengesahan dengan gaya yang ditakrifkan dalam CSS <style>label.valid {}</style>.
success: "valid"
7. Pengubahsuaian kaedah pencetus pengesahan
Walaupun yang berikut adalah jenis boolean, adalah disyorkan untuk tidak menambahkannya secara rawak melainkan anda mahu menukarnya kepada palsu.
| 觸發(fā)方式 | 類型 | 描述 | 默認(rèn)值 |
|---|---|---|---|
| onsubmit | Boolean | 提交時(shí)驗(yàn)證。設(shè)置為 false 就用其他方法去驗(yàn)證。 | true |
| onfocusout | Boolean | 失去焦點(diǎn)時(shí)驗(yàn)證（不包括復(fù)選框/單選按鈕）。 | true |
| onkeyup | Boolean | 在 keyup 時(shí)驗(yàn)證。 | true |
| onclick | Boolean | 在點(diǎn)擊復(fù)選框和單選按鈕時(shí)驗(yàn)證。 | true |
| focusInvalid | Boolean | 提交表單后，未通過驗(yàn)證的表單（第一個(gè)或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單）會(huì)獲得焦點(diǎn)。 | true |
| focusCleanup | Boolean | 如果是 true 那么當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示。避免和 focusInvalid 一起用。 | false |
// 重置表單$().ready(function() { var validator = $("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit(); }
});
$("#reset").click(function() {
validator.resetForm(); });});8. Pengesahan tak segerak
remote：URL
Gunakan ajax untuk pengesahan Secara lalai, nilai yang disahkan semasa akan diserahkan ke alamat jauh Jika anda perlu menyerahkan nilai lain, anda boleh menggunakan pilihan data.
remote: "check-email.php"rrree
Alamat jauh hanya boleh mengeluarkan "benar" atau "salah" dan tiada output lain.
9. Tambah pengesahan tersuai
remote: {
url: "check-email.php", //后臺(tái)處理程序
type: "post", //數(shù)據(jù)發(fā)送方式
dataType: "json", //接受數(shù)據(jù)格式
data: { //要傳遞的數(shù)據(jù)
username: function() { return $("#username").val(); } }}Kaedah pengesahan tersuai
addMethod：name, method, message
Nota: Untuk menambah atau Menambah dalam fail jquery.validate.js. Adalah disyorkan untuk menulisnya dalam fail additional-methods.js.
Nota: Tambah: isZipCode: "hanya boleh memasukkan aksara Cina, huruf Inggeris, nombor dan garis bawah" dalam fail messages_cn.js. Tambahkan rujukan pada fail additional-methods.js sebelum membuat panggilan.
10. Pengesahan radio, kotak semak dan pilih
Yang diperlukan dalam radio bermakna radio mesti dipilih.
// 中文字兩個(gè)字節(jié)jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){
length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, $.validator.format("請(qǐng)確保輸入的值在{0}-{1}個(gè)字節(jié)之間(一個(gè)中文字算2個(gè)字節(jié))"));// 郵政編碼驗(yàn)證 jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));}, "請(qǐng)正確填寫您的郵政編碼");Yang diperlukan dalam kotak semak bermakna ia mesti dipilih. Panjang min bagi
<input type="radio" id="gender_male" value="m" name="gender" required /><input type="radio" id="gender_female" value="f" name="gender"/>
kotak semak mewakili nombor minimum yang mesti dipilih, panjang maksimum mewakili bilangan maksimum pilihan dan panjang julat:[2,3] mewakili julat bilangan pilihan. Yang diperlukan dalam
<input type="checkbox" class="checkbox" id="agree" name="agree" required />
pilih bermakna nilai yang dipilih tidak boleh kosong. Panjang min bagi
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" /><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select mewakili bilangan minimum pilihan (pilihan yang boleh berbilang pilihan), panjang max mewakili bilangan maksimum pilihan dan julat:[2,3] mewakili julat bilangan pilihan.
<select id="jungle" name="jungle" title="Please select something!" required> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option></select>
jQuery.validate API Cina
| 名稱 | 返回類型 | 描述 |
|---|---|---|
| validate(options) | Validator | 驗(yàn)證所選的 FORM。 |
| valid() | Boolean | 檢查是否驗(yàn)證通過。 |
| rules() | Options | 返回元素的驗(yàn)證規(guī)則。 |
| rules("add",rules) | Options | 增加驗(yàn)證規(guī)則。 |
| rules("remove",rules) | Options | 刪除驗(yàn)證規(guī)則。 |
| removeAttrs(attributes) | Options | 刪除特殊屬性并且返回它們。 |
| 自定義選擇器 | ||
| :blank | Validator | 沒有值的篩選器。 |
| :filled | Array <Element> | 有值的篩選器。 |
| :unchecked | Array <Element> | 沒選擇的元素的篩選器。 |
| 實(shí)用工具 | ||
| jQuery.format(template,argument,argumentN...) | String | 用參數(shù)代替模板中的 {n}。 |
Pengesah
kaedah pengesahan mengembalikan objek Pengesah. Objek Pengesah mempunyai banyak kaedah yang boleh digunakan untuk mencetuskan program pengesahan atau menukar kandungan borang Berikut adalah beberapa kaedah yang biasa digunakan.
| 名稱 | 返回類型 | 描述 |
|---|---|---|
| form() | Boolean | 驗(yàn)證 form 返回成功還是失敗。 |
| element(element) | Boolean | 驗(yàn)證單個(gè)元素是成功還是失敗。 |
| resetForm() | undefined | 把前面驗(yàn)證的 FORM 恢復(fù)到驗(yàn)證前原來的狀態(tài)。 |
| showErrors(errors) | undefined | 顯示特定的錯(cuò)誤信息。 |
| Validator 函數(shù) | ||
| setDefaults(defaults) | undefined | 改變默認(rèn)的設(shè)置。 |
| addMethod(name,method,message) | undefined | 添加一個(gè)新的驗(yàn)證方法。必須包括一個(gè)獨(dú)一無二的名字，一個(gè) JAVASCRIPT 的方法和一個(gè)默認(rèn)的信息。 |
| addClassRules(name,rules) | undefined | 增加組合驗(yàn)證類型，在一個(gè)類里面用多種驗(yàn)證方法時(shí)比較有用。 |
| addClassRules(rules) | undefined | 增加組合驗(yàn)證類型，在一個(gè)類里面用多種驗(yàn)證方法時(shí)比較有用。這個(gè)是同時(shí)加多個(gè)驗(yàn)證方法。 |
Kaedah pengesahan terbina dalam
| 名稱 | 返回類型 | 描述 |
|---|---|---|
| required() | Boolean | 必填驗(yàn)證元素。 |
| required(dependency-expression) | Boolean | 必填元素依賴于表達(dá)式的結(jié)果。 |
| required(dependency-callback) | Boolean | 必填元素依賴于回調(diào)函數(shù)的結(jié)果。 |
| remote(url) | Boolean | 請(qǐng)求遠(yuǎn)程校驗(yàn)。url 通常是一個(gè)遠(yuǎn)程調(diào)用方法。 |
| minlength(length) | Boolean | 設(shè)置最小長度。 |
| maxlength(length) | Boolean | 設(shè)置最大長度。 |
| rangelength(range) | Boolean | 設(shè)置一個(gè)長度范圍 [min,max]。 |
| min(value) | Boolean | 設(shè)置最小值。 |
| max(value) | Boolean | 設(shè)置最大值。 |
| email() | Boolean | 驗(yàn)證電子郵箱格式。 |
| range(range) | Boolean | 設(shè)置值的范圍。 |
| url() | Boolean | 驗(yàn)證 URL 格式。 |
| date() | Boolean | 驗(yàn)證日期格式（類似 30/30/2008 的格式，不驗(yàn)證日期準(zhǔn)確性只驗(yàn)證格式）。 |
| dateISO() | Boolean | 驗(yàn)證 ISO 類型的日期格式。 |
| dateDE() | Boolean | 驗(yàn)證德式的日期格式（29.04.1994 或 1.1.2006）。 |
| number() | Boolean | 驗(yàn)證十進(jìn)制數(shù)字（包括小數(shù)的）。 |
| digits() | Boolean | 驗(yàn)證整數(shù)。 |
| creditcard() | Boolean | 驗(yàn)證信用卡號(hào)。 |
| accept(extension) | Boolean | 驗(yàn)證相同后綴名的字符串。 |
| equalTo(other) | Boolean | 驗(yàn)證兩個(gè)輸入框的內(nèi)容是否相同。 |
| phoneUS() | Boolean | 驗(yàn)證美式的電話號(hào)碼。 |
Pilihan untuk mengesahkan ()
| 描述 | 代碼 |
|---|---|
| debug：進(jìn)行調(diào)試模式（表單不提交）。 | <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option></select> |
| 把調(diào)試設(shè)置為默認(rèn)。 | $(".selector").validate({
debug:true}) |
| submitHandler：通過驗(yàn)證后運(yùn)行的函數(shù)，里面要加上表單提交的函數(shù)，否則表單不會(huì)提交。 | $.validator.setDefaults({
debug:true}) |
| ignore：對(duì)某些元素不進(jìn)行驗(yàn)證。 | $(".selector").validate({
submitHandler:function(form) {
$(form).ajaxSubmit();}}) |
| rules：自定義規(guī)則，key:value 的形式，key 是要驗(yàn)證的元素，value 可以是字符串或?qū)ο蟆?/td> | $("#myform").validate({
ignore:".ignore"}) |
| messages：自定義的提示信息，key:value 的形式，key 是要驗(yàn)證的元素，value 可以是字符串或函數(shù)。 | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}}}) |
| groups：對(duì)一組元素的驗(yàn)證，用一個(gè)錯(cuò)誤提示，用 errorPlacement 控制把出錯(cuò)信息放在哪里。 | $(".selector").validate({
rules:{
name:"required",
email:{
required:true,
email:true}},
messages:{
name:"Name不能為空",
email:{
required:"E-mail不能為空",
email:"E-mail地址不正確"}}}) |
| OnSubmit：類型 Boolean，默認(rèn) true，指定是否提交時(shí)驗(yàn)證。 | $("#myform").validate({
groups:{
username:"fname
lname"},
errorPlacement:function(error,element) {if (element.attr("name") == "fname" || element.attr("name") == "lname")
error.insertAfter("#lastname");else
error.insertAfter(element);},
debug:true}) |
| onfocusout：類型 Boolean，默認(rèn) true，指定是否在獲取焦點(diǎn)時(shí)驗(yàn)證。 | $(".selector").validate({
onsubmit:false}) |
| onkeyup：類型 Boolean，默認(rèn) true，指定是否在敲擊鍵盤時(shí)驗(yàn)證。 | $(".selector").validate({
onfocusout:false}) |
| onclick：類型 Boolean，默認(rèn) true，指定是否在鼠標(biāo)點(diǎn)擊時(shí)驗(yàn)證（一般驗(yàn)證 checkbox、radiobox）。 | $(".selector").validate({
onkeyup:false}) |
| focusInvalid：類型 Boolean，默認(rèn) true。提交表單后，未通過驗(yàn)證的表單（第一個(gè)或提交之前獲得焦點(diǎn)的未通過驗(yàn)證的表單）會(huì)獲得焦點(diǎn)。 | $(".selector").validate({
onclick:false}) |
| focusCleanup：類型 Boolean，默認(rèn) false。當(dāng)未通過驗(yàn)證的元素獲得焦點(diǎn)時(shí)，移除錯(cuò)誤提示（避免和 focusInvalid 一起使用）。 | $(".selector").validate({
focusInvalid:false}) |
| errorClass：類型 String，默認(rèn) "error"。指定錯(cuò)誤提示的 css 類名，可以自定義錯(cuò)誤提示的樣式。 | $(".selector").validate({
focusCleanup:true}) |
| errorElement：類型 String，默認(rèn) "label"。指定使用什么標(biāo)簽標(biāo)記錯(cuò)誤。 | $(".selector").validate({
errorClass:"invalid"}) |
| wrapper：類型 String，指定使用什么標(biāo)簽再把上邊的 errorELement 包起來。 | $(".selector").validate
errorElement:"em"}) |
| errorLabelContainer：類型 Selector，把錯(cuò)誤信息統(tǒng)一放在一個(gè)容器里面。 | $(".selector").validate({
wrapper:"li"}) |
| showErrors：跟一個(gè)函數(shù)，可以顯示總共有多少個(gè)未通過驗(yàn)證的元素。 | $("#myform").validate({
errorLabelContainer:"#messageBox",
wrapper:"li",
submitHandler:function() {
alert("Submitted!")
}}) |
| errorPlacement：跟一個(gè)函數(shù)，可以自定義錯(cuò)誤放到哪里。 | $(".selector").validate({
showErrors:function(errorMap,errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");this.defaultShowErrors();}}) |
| success：要驗(yàn)證的元素通過驗(yàn)證后的動(dòng)作，如果跟一個(gè)字符串，會(huì)當(dāng)作一個(gè) css 類，也可跟一個(gè)函數(shù)。 | $("#myform").validate({
errorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td")); },
debug:true}) |
| highlight：可以給未通過驗(yàn)證的元素加效果、閃爍等。 |
kaedah addMethod(nama, kaedah, mesej)
Nama parameter ialah nama kaedah yang ditambahkan.
Kaedah parameter ialah fungsi yang menerima tiga parameter (nilai, elemen, param).
nilai ialah nilai elemen, elemen ialah elemen itu sendiri dan param ialah parameter.
Kami boleh menggunakan addMethod untuk menambah kaedah pengesahan sebagai tambahan kepada kaedah Pengesahan terbina dalam. Sebagai contoh, terdapat medan di mana anda hanya boleh memasukkan satu huruf, dan julatnya ialah a-f Tulisan adalah seperti berikut:
$("#myform").validate({
success:"valid",
submitHandler:function() {
alert("Submitted!")
}})Jika terdapat medan borang dengan id="nama pengguna", tulis dalam ruangan. peraturan:
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){return false;} if(value>=params[0] && value<=params[1]){return true;}else{return false;}},"必須是一個(gè)字母,且a-f"); Parameter pertama addMethod ialah nama kaedah pengesahan tambahan, iaitu af dalam kes ini.
Parameter ketiga addMethod ialah gesaan ralat tersuai Gesaan di sini ialah: "Mestilah huruf dan a-f".
Parameter kedua addMethod ialah fungsi Ini lebih penting dan menentukan kaedah penulisan apabila menggunakan kaedah pengesahan ini.
Jika terdapat hanya satu parameter, tuliskannya secara langsung, seperti af: "a", maka a ialah satu-satunya parameter Jika terdapat berbilang parameter, tuliskannya dalam [] dan pisahkan dengan koma.
kaedah rentetan meta
username:{
af:["a","f"]}$("#myform").validate({
meta:"validate",
submitHandler:function() { alert("Submitted!") }})
