Artikel sebelum ini memperkenalkan pengetahuan asas pengesahan borang jQuery Validate Untuk butiran, sila rujuk "JQuery Validate Form Validation Bermula Pembelajaran" , Artikel Hari Ini menyediakan kajian mendalam tentang pengesahan borang jQuery Validate Berikut ialah keseluruhan kandungan artikel:
1 Gunakan kaedah lain untuk menggantikan SUBMIT lalai
$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); });
Gunakan kaedah ajax
$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })
Anda boleh menetapkan nilai lalai pengesahan, yang ditulis seperti berikut:
$.validator.setDefaults({ submitHandler: function(form) { alert("submitted!");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, borang tidak akan diserahkan dan hanya akan disemak, yang sangat mudah untuk nyahpepijat.
$().ready(function() { $("#signupForm").validate({ debug:true }); });
Jika terdapat berbilang borang pada halaman dan anda ingin menetapkannya untuk nyahpepijat, gunakan:
$.validator.setDefaults({ debug: true })
3 abaikan: abaikan elemen tertentu dan jangan sahkan
abaikan: ".ignore"
4 Tukar kedudukan di mana mesej ralat dipaparkan
errorPlacement: Panggilan Balik
Menunjukkan lokasi di mana ralat diletakkan. Lalai ialah: error.appendTo(element.parent());
errorPlacement: function(error, element) { error.appendTo(element.parent()); }
Contoh
<tr> <td class="label"><label id="lfirstname" for="firstname">First Name</label></td> <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td> <td class="status"></td> </tr> <tr> <td style="padding-right: 5px;"> <input id="dateformat_eu" name="dateformat" type="radio" value="0" /> <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label> </td> <td style="padding-left: 5px;"> <input id="dateformat_am" name="dateformat" type="radio" value="1" /> <label id="ldateformat_am" for="dateformat_am">02/14/07</label> </td> <td></td> </tr> <tr> <td class="label"> </td> <td class="field" colspan="2"> <div id="termswrap"> <input id="terms" type="checkbox" name="terms" /> <label id="lterms" for="terms">I have read and accept the Terms of Use.</label> </div> </td> </tr> 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() ); }
Fungsi kod ialah: secara amnya, mesej ralat dipaparkan dalam
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 melalui fungsi pelaksanaan
kejayaan:String,Panggil Balik
Tindakan selepas elemen yang akan disahkan melepasi pengesahan Jika ia diikuti oleh rentetan, ia akan dianggap sebagai kelas css, atau ia boleh diikuti oleh 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 .
kejayaan: "sah"
7. Pengubahsuaian kaedah pencetus pengesahan
Walaupun yang berikut adalah daripada jenis boolean, adalah disyorkan untuk tidak menambahkannya secara rawak melainkan anda mahu menukarnya kepada palsu.
Nilai lalai perihalan jenis kaedah pencetus
onsubmit Boolean Disahkan semasa penyerahan. Tetapkan kepada palsu untuk menggunakan kaedah lain untuk mengesahkan. benar
onfocusout Boolean Mengesahkan apabila fokus hilang (tidak termasuk kotak semak/butang radio). benar
onkeyup Boolean Disahkan semasa keyup. benar
onclick Boolean Mengesahkan apabila kotak semak dan butang radio diklik. benar
focusInvalid Boolean Selepas borang diserahkan, borang yang gagal pengesahan (borang pengesahan pertama atau gagal yang menerima fokus sebelum penyerahan) akan mendapat fokus. benar
focusCleanup Boolean Jika benar maka mengalih keluar mesej ralat apabila elemen yang gagal pengesahan mendapat fokus. Elakkan menggunakannya dengan focusInvalid. palsu
// 重置表单 $().ready(function() { var validator = $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); $("#reset").click(function() { validator.resetForm(); }); });
8. Pengesahan tak segerak
jauh: URL
Gunakan ajax untuk pengesahan Secara lalai, nilai yang disahkan pada masa ini akan diserahkan ke alamat jauh Jika anda perlu menyerahkan nilai lain, anda boleh menggunakan pilihan data.
remote: "check-email.php" remote: { url: "check-email.php", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }
远程地址只能输出 "true" 或 "false",不能有其他输出。
9、添加自定义校验
addMethod:name, method, message
自定义验证方法
// 中文字两个字节 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("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码");
注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
注意:在 messages_cn.js 文件中添加:isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。
10、radio 和 checkbox、select 的验证
radio 的 required 表示必须选中一个。
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" /> <input type="radio" id="gender_female" value="f" name="gender"/> checkbox 的 required 表示必须选中。 <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" /> checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。 <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, 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 的 required 表示选中的 value 不能为空。 <select id="jungle" name="jungle" title="Please select something!" class="{required:true}"> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option> </select> select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。 <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>
附表:内置验证方式:
以上就是针对jQuery Validate表单验证的深入学习,希望对大家的学习有所帮助。