jQuery关于对表单进行验证和验证码的实现

比如：

• 输入框是必填，长度至少是两位的验证
• 对电子邮件，判断是否是E-mail的格式的验证
• 对网址是否为url的验证
• 对必填的验证
  我们要引入jQuery中的一个插件来完成
  ——Validation插件
  （1）确定是哪个表单被验证

$("#form").validate();

(2)针对不同的字段，进行验证规则编码，设置字段相应的属性

• class="required"为必须填写，minlength=”2”最小长度
• class="required email"

• class="url"
  (3)以上关于验证的写法，有时候要写再class或者属性里这很麻烦。
  (4)可以将所有的验证都写到class属性中方便管理

• 引入 新 的jQuery插件—-jquery.metadata.js.
  script src="lib/jquery.metadata.js" type="text/javascript"></script>
  注意：jquery.metadata.js是 一个支持 固定格式解析的JQuery插件。Validation插件将很好 的融合到验证规则编码中参见网址：http://plugins.jquery.com/project/metadata.
  (5)以上的验证方式将改变：

$(#form).validate({meta: "validate"});

(6)将验证规则全部写到class属性中

 - class="{validate:  {required: true,minlength:2}}" - class="{validate:{required:true,emil:true}}" - class="{validate:{url:true}}" - calss="{validate:{requried:true}}"

(7)以上都是通过设置一些的属性值来实现的，但验证行为和HTML结构并没有完全的脱离关系
(8)可以将class属性去掉以后。加入jQuery代码

$(document).ready(function(){$("#form")..validate({rules:{username:{requried : true,minlength : 2},email:{requried : true,emils:true},url:"url",comment:"requried"}});});

具体的编码步骤：

• $(“#form”).validate()方法中增加rules属性
• 通过每个字段的name属性值来匹配验证规则
• 定义验证规则：例如requried:true,email:true,minlength:2等等
  (9)验证信息国际化：
  valiadation插件 库的验证信息默认是英文，如果要中文，要引入Validation提供的中文 验证信息库就可

<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></scfript>

(10)自定义验证信息

class="{validate:{required:true,minlength:2,message:{requried:'请输入姓名',minlength:'请至少输入两个字符 '}}}"

(11)自定义验证信息并美化

errorElement:"em",//用来创建错误的提示信息标签success:function(label){//验证成功后执行的回掉函数//label指向上面哪个错误 提示信息标签emlabel.text(" ")//清空错误提示信息.addClass("success");//加上自定义的success类

在cass代码中增加如下 的代码，以便和errorElement相关联

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

(12)自定义的验证规则：如添加验证码

• 自定义一个验证方法

$.validator.addMethod("formula",//验证方法的名称function(value,element,param){//验证规则return value==eval(param);},'请正确输入数学公式计算后的结果'//验证的提示信息

• 调用该验证的规则
  在jQuery代码中的rules中加入valcode : {formula:”7+9”},其中的7+9可以通过其他的方式获得，例如获取页面的某个元素的text()或者Ajax()来取得

$("#form").validate({rules:{username:{required:true,minlength:2},email:{requored:true,email:true},valcode:{formuls:"7+9"}}});