注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

ㄨiao愛

转载技术文档

 
 
 

日志

 
 

jQuery的表单校验插件validate  

2012-03-24 14:57:07|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API: http://jquery.bassistance.de/api-browser/plugins.html

今天试了一下,还是比较方便的,主要是可以与jQuery结合起来做到与HTML分离.

官网的例子里引用了几个js和css文件,但只需引用jquery.validate.js这一个文件即可.

贴个简单的例子:

$('#EditView').validate({
                event: "keyup",
                rules:{
                    name:{required:true},
                    cosa_commodity_group_list:{required:true}
                },
                submitHandler:function(){
                    $("#group_list > option").attr("selected","selected");
                    $(this).submit();
                }
});

1.event是触发校验的方式,可选值有keyup(每次按键时),blur(当控 件失去焦点时),不使用这个参数时就只在按提交按钮时触发

2.如果在提交前还需要进行一些自定义处理使用submitHandler参数,其它 的都比较简单,自己看看API就成了.

3.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分 方便.

4.rules,所有的检验规则都写在这个参数里面.

校验规则参数

格式为:           ID : {rule1,rule2,...}

             (1) required: true            必输
(2) number: true 只能输入数字(包括小数)
(3) digits:true 只能输入整数
(4) minValue: 3 不能小于3
(5) maxValue: 100 最大不超过100
(6) rangeValue:[50,100] 值范围为50-100
(7) minLength: 5 最小长度(汉字算一个字符)
(8) maxLength:           10 最大长度(汉字算一个字符)
(9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
(10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
(11) email:true 电子邮件
(12) equalTo: "#field" 与#field值相同
(13) dateISO:true          日期型,格式为1998/01/22            1999-12-12

5.messages,自定义错误信息,格式与rules类似,需要注意的是如果使用 此项,那么所有的校验项都必需自定义出错信息,如果只想定义其中的某一些,那么就把其它的出错信息定义为空(即""),系统即会使用默认值。

messages {
             password: {
                 required: "请输入您的密码."
                 minLength: "密码不能小于5位.",
                 maxLength: "密码不能长于32位."
             },

如何自定义校验规则:

可以通过自定义检验函数的方式新增加校验规则,步骤如下:

1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息

//这里定义了一个名为equal的规则
//value是指当前校验域的值
//element是指当前检验的域
//param是指在rules中设定的参数
//这三个参数会在进行校验时由系统自动带入
$.validator.methods.equal = function(value, element, param){
    //在这里使用上面的三个参数进行校验
    if(value == param)
        return true;//如果当前域的值等于指定的参数就通过校验
};

$('#form1').validate({
        rules:{
            field1:{equal:20}//在这里指定field1的检验规则是equal,并且参数是20
        },
        messages:{
            field1:{equal:'您的计算有误!'}//在这里定义field1的equal规则校验出错后的提示信息
        }
});


将校验规则写到控件中

  有时候我们的控件是动态生成的,这个时候就不可能提前先写好校验规则,需要在生成控件的同时写校验规则.

这样写校验规则有两种写法,一是将规则写到class属性中,二是将规则写到单独的validate属性中,其中:

写到class属性的写法如下,例子中在规则前添加了名为some, other, styles 的三个class:

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

<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" class="{required:true}"></textarea>



第二种写法如下,使用自定义的validata属性,但必需加载jquery.metadata.js这 个文件

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>


<input type="checkbox" id="spam_email" value="email" name="spam" validate="required:true, minLength:2" />

  评论这张
 
阅读(351)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017