Kajian mendalam jQuery Mengesahkan borang validation

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();
    }  
  });
});

Salin selepas log masuk

Gunakan kaedah ajax

 $(".selector").validate({   
 submitHandler: function(form) 
  {   
   $(form).ajaxSubmit();   
  } 
 })

Salin selepas log masuk

Anda boleh menetapkan nilai lalai pengesahan, yang ditulis seperti berikut:

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

Salin selepas log masuk

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
  });
});

Salin selepas log masuk

Jika terdapat berbilang borang pada halaman dan anda ingin menetapkannya untuk nyahpepijat, gunakan:

$.validator.setDefaults({
  debug: true
})

Salin selepas log masuk

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()); 
}

Salin selepas log masuk

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() );
}

Salin selepas log masuk

Fungsi kod ialah: secara amnya, mesej ralat dipaparkan dalam, jika ia adalah radio, ia dipaparkan Dalam , jika ia adalah kotak semak, ia dipaparkan di belakang kandungan.
Jenis Parameter Perihalan Nilai Lalai
errorClass String menentukan nama kelas css bagi gesaan ralat dan anda boleh menyesuaikan gaya gesaan ralat. "ralat"
ErrorElement String Label apa yang digunakan untuk menandakan ralat lalai ialah label, yang boleh ditukar kepada em. "label"
errorContainer Selector memaparkan atau menyembunyikan maklumat pengesahan Ia secara automatik boleh menukar sifat bekas untuk dipaparkan apabila mesej ralat muncul, dan menyembunyikannya apabila tiada ralat.
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector meletakkan maklumat ralat dalam bekas.
wrapper String Label apa 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 secara automatik menyembunyikannya apabila tiada maklumat.
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
pembungkus: "li"
5. Tukar gaya paparan mesej ralat
Tetapkan gaya gesaan ralat dan tambahkan paparan ikon Pengesahan.css telah dibuat dalam sistem ini khusus untuk mengekalkan gaya fail pengesahan.

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;
}

Salin selepas log masuk

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!")
}

Salin selepas log masuk

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();
  });

});

Salin selepas log masuk

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();
    }
  }
}

Salin selepas log masuk

远程地址只能输出 "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));
}, "请正确填写您的邮政编码");

Salin selepas log masuk

注意：要在 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>

Salin selepas log masuk

附表：内置验证方式：