jQuery Validate验证框架详解(推荐)

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

一、导入js库

四、使用方式

1、Metadata用法，将校验规则写到控件中

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<title>jQuery Validate验证框架详解-<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a>data<a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a></title>

<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="pragma" content="no-cache"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="cache-control" content="no-cache"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="expires" content="0"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="keywords" content="keyword1,keyword2,keyword3"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="description" content="This is my page"&gt;
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"&gt;</script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"&gt;</script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a>data.min.js"&gt;</script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/messages_zh.js"&gt;</script>
<script type="text/javascript"&gt;
$(function(){
  $("#myform").validate();
});
</script>

使用class="{}"的方式，必须引入包：jquery.Metadata.js；

可以使用如下的方法，修改提示内容：

required:true,messages:{required:'请输入内容'}}"；

在使用equalTo关键字时，后面的内容必须加上引号，如下代码：

required:true,equalTo:'#password'}"

2、将校验规则写到js代码中

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<title>jQuery Validate验证框架详解</title>

<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="pragma" content="no-cache"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="cache-control" content="no-cache"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="expires" content="0"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="keywords" content="keyword1,keyword3"&gt;
<<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="description" content="This is my page"&gt;
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"&gt;</script>
<script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"&gt;</script>
<script type="text/javascript"&gt;
$(function(){
  var validate = $("#myform").validate({
    debug: true,//调试模式取消submit的默认提交<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>  
    //errorClass: "label.error",//默认为<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>的样式类为：error  
    focusInvalid: false,//当为false时，验证无效时，没有焦点响应 
    onkeyup: false,submitHandler: function(form){  //表单提交句柄,为一回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>，带一个参数：form  
      alert("提交表单");  
      form.submit();  //提交表单  
    },rules:{
      myname:{
        <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>:true
      },email:{
        <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>:true,email:true
      },password:{
        <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>:true,rangelength:[3,10]
      },confirm_password:{
        equalTo:"#password"
      }          
    },messages:{
      myname:{
        <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>:"必填"
      },email:{
        <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>:"必填",email:"E-Mail格式不正确"
      },password:{
        <a href="https://www.jb51.cc/tag/required/" target="_blank" class="keywords">required</a>: "不能为空",rangelength: $.format("密码最小长度:{0},最大长度:{1}。")
      },confirm_password:{
        equalTo:"两次密码输入不一致"
      }                  
    }

  });  

});
</script>

五、常用方法及注意问题

1、用其他方式替代默认的submit

可以设置validate的默认值，写法如下：

如果想提交表单，需要使用form.submit()，而不要使用$(form).submit()

2、debug，只验证不提交表单

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

如果一个页面中有多个表单都想设置成为debug，用

3、ignore：忽略某些元素不验证

ignore: ".ignore"

4、更改错误信息显示的位置

errorPlacement：Callback

Default: 把错误信息放在验证的元素后面指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面

<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name</td>
<td class="field"></td>
<td class="status"></td>
</tr>
<tr>
<td style="padding-right: 5px;">

errorPlacement: function(error,element) {
if (element.is(":radio"))
error.appendTo(element.parent().next().next());
else if (element.is(":checkBox"))
error.appendTo(element.next());
else
error.appendTo(element.parent().next());
}

errorElement：String Default: "label" 用什么标签标记错误，默认的是label你可以改成em

errorContainer：Selector 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大

5、更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

6、每个字段验证通过执行函数

success：String,Callback 要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数

7、验证的触发方式修改

下面的虽然是boolean型的，但建议除非要改为false,否则别乱添加。

a.onsubmit：Boolean Default: true 提交时验证. 设置唯false就用其他方法去验证

b.onfocusout：Boolean Default: true 失去焦点是验证(不包括checkBoxes/radio buttons)

e.focusInvalid：Boolean Default: true 提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点

f.focusCleanup：Boolean Default: false 如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和focusInvalid一起用

8、异步验证

使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项

9、添加自定义校验

1.要在additional-methods.js文件中添加或者在jquery.validate.js添加建议一般写在additional-methods.js文件中

10、radio和checkBox、select的验证

checkBox的minlength表示必须选中的最小个数,3]表示选中个数区间

select的minlength表示选中的最小个数（可多选的select）,maxlength表示最大的选中个数,3]表示选中个数区间

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。