您的位置：首页 > Web前端 > JQuery

jQuery 表单验证 jquery.validator.js

2014-02-24 16:17 363 查看
前端开发中经常会碰到表单的制作，其中必备的功能就是提交前的一些简单的验证，非空啊、手机号码啊、E-mail等等等等，这里是一个jQuery的表单验证插件，蛮好用的，收录一下。

下面是验证的效果图：



页面中需要加载的文件是：

<linkhref="validator-0.6.8/jquery.validator.css"rel="stylesheet"type="text/css"/>
<scriptsrc="validator-0.6.8/jquery.validator.js"type="text/javascript"></script>
<scriptsrc="validator-0.6.8/local/zh_CN.js"type="text/javascript"></script>


其中zh_CN文件中主要是一些自带的验证规则，开发者可以根据自己的需要编写正则表达式，取相应的规则名称之后添加到验证规则中去，需要注意的是，该插件是用控件的name属性来绑定验证规则的，所以需要给需要验证的表单控件添加name属性。

下面是使用方法：

$('form').validator({
　　stopOnError:false,　　　　　　　　//提交时验证不通过就会停止继续验证
　　timely:true,　　　　　　　　　　　//鼠标离开控件时是否实时验证
　theme:"yellow_right_effect",　//样式主题，插件自带了5中样式，在zh_CN文件中可以找到相应的样式
　fields:{　　
　　　　'birthday':'required',　　
　　　　'idNum':'required',　　　　
　　　　'cellPhone':'required;mobile'
　　},
　　valid:function(form){}　　　　//表单验证通过，提交表单到服务器
});


到这，我们还需要一个按钮来触发提交的方法：

$('form').trigger("validate");


以上就是一些简单必要的应用，当然，我们在开发的过程中经常会要动态的改变表单结构，新增的控件需要新增验证，隐藏的控件需要取消验证，不然无法提交，所以还需要了解下面的几个方法：

$('form').validator("setField",新添加的元素的name,"required");

$('form').validator("setField",取消验证的元素的name,"");

$('form').validator('hideMsg',取消验证的元素的name);


当然也有给元素添加消息的方法：setMsg

详细参数和方法可以参考官网validator



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航