jQuery表单验证插件——Validation

本文由清尘发表于2012-01-04 22:59最后修改于2015-04-13属于jQuery分类

相关文章:
jQuery Validate常用方法
jQuery.validate 中文 API

快速上手验证:
(1)引入jQuery库和Validation插件。
<script type=”text/javascript” src=”jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”jquery.validate.js”></script>

(2)确定哪个表单需要被验证(需要被验证的id必须写到form上,否则会报错)。
$(“#commentForm”).validate();
(3)针对不同的字段,进行验证规则编码,设置字段相应的属性。
class=”required” 为必须填写,minlength=”2″ 为最小长度为2.
class=”required email” 为必须填写和内容需要符合E-mail格式。
class=”url”为url格式验证。

下载地址:http://plugins.jquery.com/project/validate
效果如图:

224937yokxxl4v4ayavv0q

==========
不同的验证写法:
Validation可以将所有的与验证相关的信息写到class属性中方便管理。为了实现这个功能,需要经过以下几个步骤。
(1)引入一个新的jQuery插件jquery.metadata.js。
<script type=”text/javascript” src=”jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”jquery.validate.js”></script>
<script type=”text/javascript” src=”jquery.metadata.js”></script>
[jquery.metadata.js是一个支持固定格式解析的jQuery插件,Validation插件将其很好地整合到验证规则编码中。]
(2)改变调用的验证方法
将 $(“#commentForm”).validate();
改为:$(“#commentForm”).validate({meta:”validate”});
(3)将验证规则全部编写到class属性中。
如:class=”{validate:{required:true,email:true}}
本段代码的验证效果与前面的验证效果完全一致。
通过name属性来关联字段和验证规则的验证写法。(这种方法可以实现行为与结构的分离)
$(“#commentForm”).validate({
    rules:{
        username:{
            required:true,
            minlength:2
        },
        email:{
            required:true,
            email:true
        }
        url:”url”,
        comment:”required”
    }
    })
此验证效果与前面的例子也是完全一致中。
(1)在$(“#commentForm”).validate()方法中增加rules属性。
(2)通过每个字段的name属性值来匹配验证规则。
(3)定义验证规则:例如required:true, email:true ,minlength:2等等
验证语言选择
Validation插件默认验证信息语言为英文,如果要改成中文,只需要引入Validation提供的中文验证信息库即可。
<script type=”text/javascript” src=”lib/messages_cn.js”></script>
其它语言,自行引入相应的语言库进行配置。
自定义验证信息:
<input type=”text” id=”cemail” name=”email” size=”25″ class=”{validate:{required:true,email:true,messages:{required:’请输入电子邮件’,email:’请检查电子邮件的格式’}}}” />
自定义验证信息并美化:
$(function(){
    $(“#commentForm”).validate({
    rules:{
        username:{
            required:true,
            minlength:2
        },
        email:{
            required:true,
            email:true
        }
        url:”url”,
        comment:”required”,
        errorElement:”em”,    //用来创建错误提示信息标签
success:function(label){    //验证成功后执行的回调函数
//label 指向上面那个错误提示信息标签em
label.text(“”).addClass(“valid”); //清空错误提示消息并加上自定义的success类
}

    }
    })
    
})
CSS代码中增加如下代码,以便和errorElement相关联。
em.error{
    background:url(images/unchecked.gif) no-repeat 0px 0px;
}
em.success{
    background:url(images/checked.gif) no-repeat 0px 0px;
}
效果如下图:

231623knq8iinjb7yt6bgt