jQuery 表单验证 jquery.validator.js

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

下面是验证的效果图:

 

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

<link href="validator-0.6.8/jquery.validator.css" rel="stylesheet" type="text/css" />
<script src="validator-0.6.8/jquery.validator.js" type="text/javascript"></script>
<script src="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

 
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。