Penjelasan terperinci tentang pemalam pengesahan jQuery Validate

validate ialah pemalam jq yang baik yang menyediakan fungsi pengesahan yang berkuasa, menjadikan pengesahan borang pelanggan lebih mudah Ia juga 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.

Peristiwa paling biasa di mana JavaScript digunakan ialah pengesahan borang, dan jQuery, sebagai perpustakaan JavaScript yang sangat baik, juga menyediakan pemalam pengesahan borang yang sangat baik----Pengesahan. Pengesahan ialah salah satu pemalam jQuery tertua, telah disahkan oleh projek yang berbeza di seluruh dunia, dan telah dipuji oleh banyak pembangun web. Sebagai perpustakaan kaedah pengesahan standard, Pengesahan mempunyai ciri-ciri berikut:

1 Peraturan pengesahan terbina dalam: Ia mempunyai 19 jenis peraturan pengesahan terbina dalam seperti yang diperlukan, nombor, e-mel, URL dan nombor kad kredit.
2. Peraturan Pengesahan Penyesuaian: Peraturan pengesahan boleh disesuaikan dengan mudah
3. Gesaan maklumat pengesahan yang ringkas dan berkuasa: Gesaan maklumat pengesahan disediakan secara lalai, dan fungsi menyesuaikan maklumat gesaan lalai disediakan
4 . Pengesahan masa nyata: Kemungkinan untuk lulus Acara kekunci atau kabur mencetuskan pengesahan, bukan hanya apabila borang diserahkan

alamat muat turun valid.js: http://plugins.jquery.com/project/validate
alamat muat turun metadata.js: http://plugins.jquery.com/project/metadata Penggunaan:

1 Perkenalkan perpustakaan jQuery dan pemalam Pengesahan

Kodnya adalah seperti berikut :

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>  
<script src="scripts/jquery.validate.js" type="text/javascript"></script>

Salin selepas log masuk

2. Tentukan borang yang perlu disahkan

Kod tersebut ialah. seperti berikut:

<script type="text/javascript">  
////<![CDATA[  
$(document).ready(function(){  
    $("#commentForm").validate();  
});  
//]]>  
</script>

Salin selepas log masuk

3 Peraturan pengesahan kod untuk medan yang berbeza dan tetapkan atribut medan yang sepadan

Kod adalah seperti berikut:

class="required"   必须填写  
class="required email"        必须填写且内容符合Email格式验证  
class="url"             符合URL格式验证  
minlength="2"      最小长度为2  
可验证的规则有19种：
[javascript] view plaincopyprint?
required:      必选字段  
remote:        "请修正该字段",  
email:         电子邮件验证  
url:           网址验证  
date:          日期验证  
dateISO:       日期 (ISO)验证  
dateDE:  
number:        数字验证  
numberDE:  
digits:        只能输入整数  
creditcard:    信用卡号验证  
equalTo:       ”请再次输入相同的值“验证  
accept:        拥有合法后缀名的字符串验证  
maxlength/minlength:    最大/最小长度验证  
rangelength:     字符串长度范围验证  
range:           数字范围验证  
max/min:         最大值/最小值验证

Salin selepas log masuk

perlu diperkenalkan Kod js

adalah seperti berikut:

<script type="text/javascript" src="../../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>

Salin selepas log masuk

Kod HTML yang dimulakan

adalah seperti berikut:

<script type="text/javascript">
$(function(){
　$("#commentForm").validate() 
})
</script>
<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的validate验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25" class="required email"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25" class="url" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required" ></textarea>
   </p>
 <p>
     <input class="submit" type="submit" value="提交"/>
   </p>

Salin selepas log masuk

Pertama lihat spesifikasi tetapan lalai

Bersiri nombor

序号	规则	描述
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。

Peraturan<🎜>

< span style="background-color: rgb(255,255,255)">Penerangan<🎜>

required:true

Medan yang mesti dimasukkan.

jauh:"check.php"

Gunakan kaedah ajax untuk memanggil check.php untuk mengesahkan nilai input .

email:true

Anda mesti memasukkan e-mel yang diformat dengan betul.

url:true

Anda mesti memasukkan URL dalam format yang betul.

date:true

Tarikh dalam format yang betul mesti dimasukkan. Ralat pengesahan tarikh ie6, gunakan dengan berhati-hati.

dateISO:true

Anda mesti memasukkan tarikh (ISO) dalam format yang betul, contohnya: 2009- 06-23, 1998/01/22. Hanya format yang disahkan, bukan kesahihannya.

number:true

Nombor sah (nombor negatif, perpuluhan) mesti dimasukkan.

digit:true

Integer mesti dimasukkan.

kad kredit:

Nombor kad kredit yang sah mesti dimasukkan.

equalTo:"#field"

Nilai input mestilah sama dengan #field.

terima:

Masukkan rentetan dengan akhiran undang-undang (akhiran fail yang dimuat naik).

maxlength:5

Masukkan rentetan dengan panjang maksimum 5 (aksara Cina dikira sebagai satu aksara).

minlength:10

Masukkan rentetan dengan panjang minimum 10 (aksara Cina dikira sebagai satu aksara).

panjang julat:[5,10]

Panjang input mestilah antara 5 dan 10 ( aksara Cina dikira sebagai satu watak).

julat:[5,10]

Nilai input mestilah antara 5 dan 10.

maks:5

Nilai input tidak boleh lebih daripada 5.

min:10

Nilai input tidak boleh kurang daripada 10.

required表示必须填写的

email表示必须正确的邮箱

把验证的规格写在HTML内的class内，方法欠妥，后期的维护增加成本，没有实现行为与结构的分离

所以，可以想把HTML内的class都清空，如下:

代码如下:

<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>一个简单的validate验证带验证提示的评论例子</legend>
   <p>
     <label for="cusername">姓名</label>
     <em>*</em><input id="cusername" name="username" size="25" />
   </p>
   <p>
     <label for="cemail">电子邮件</label>
     <em>*</em><input id="cemail" name="email" size="25"  />
   </p>
   <p>
     <label for="curl">网址</label>
     <em>  </em><input id="curl" name="url" size="25" />
   </p>
   <p>
     <label for="ccomment">你的评论</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22" ></textarea>
   </p>
 <p>
     <input class="submit" type="submit" value="提交"/>
   </p>

Salin selepas log masuk

代码如下:

 $(document).ready(function(){
    $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      }
    });
  });
  </script>

Salin selepas log masuk

因为默认的提示是英文的，可以改写成

代码如下:

jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
        remote: "请修正该字段",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符串",
        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: jQuery.format("请输入一个最大为 {0} 的值"),
        min: jQuery.format("请输入一个最小为 {0} 的值")
});

Salin selepas log masuk

建议新建一个js,放到validate.js 下面.

关于提示的美化

代码如下:

errorElement:"em"

Salin selepas log masuk

　　创建一个标签，可以自定义

代码如下:

success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }

Salin selepas log masuk

这里的参数label是指向创建的标签，这里也就是”em“ 然后情况自己的内容，在加上自己的class就可以了

完整的js

代码如下:

  $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
    });

Salin selepas log masuk

相对应的css

代码如下:

em.error {
  background:url("images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}
em.success {
  background:url("images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

Salin selepas log masuk

.success放到.error下面。。。唔唔。。具体的情况。。只可体会不可言会。。唔。。

在做项目的过程中千变万化，有时候要满足不同的需求，validate也可以单独的修改验证的信息。。

例如：

代码如下:

  messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
   }

Salin selepas log masuk

完整的js

代码如下:

 $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      },
      messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
    });

Salin selepas log masuk

这里就可以啦。

关于自定义验证规则

增加一段HTML代码

代码如下:

 <p>
     <label for="cvalcode">验证码</label>
     <input id="valcode" name="valcode"  />=7+9
   </p>

Salin selepas log masuk

自定一个规则

代码如下:

$.validator.addMethod("formula",function(value,element,param){
      return value==eval(param)
    },"请正确输入验证信息");

Salin selepas log masuk

formula是需要验证方法的名字好比如required 必须的。
value返回的当前input的value值
param返回的是当前自定义的验证格式好比如：7+9
在试用了eval方法让字符串相加

完整的js

代码如下:

$.validator.addMethod("formula",function(value,element,param){
      return value==eval(param)
    },"请正确输入验证信息");
    $("#commentForm").validate({
      rules:{
        username:{
          required:true,
          minlength:2
        },
        email:{
          required:true,
          email:true
        },
        url:"url",
        comment:"required",
        valcode: {
          formula: "7+9"  
        }
      },
      messages:{
        username:{
          required:"主人,我要填的满满的",
          minlength:"哎唷,长度不够耶"
        }
      },
      errorElement:"em",
      success:function(label){
        label.text(" ").addClass(&#39;success&#39;)
      }
    });

Salin selepas log masuk

完

Penjelasan terperinci tentang pemalam pengesahan jQuery Validate_jquery