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

朴灿烈づ我的快乐病毒、 2022-06-10 11:09 162阅读 0赞

比如：

*  输入框是必填，长度至少是两位的验证
 *  对电子邮件，判断是否是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][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提供的中文 验证信息库就可

(10)自定义验证信息

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

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

errorElement:"em",//用来创建错误的提示信息标签
    success:function(label){ //验证成功后执行的回掉函数
    //label指向上面哪个错误 提示信息标签em
    label.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"}
    }
    });

[http_plugins.jquery.com_project_metadata]: http://plugins.jquery.com/project/metadata