jquery.validate

来源:互联网 发布:linux jar打包命令 编辑:程序博客网 时间:2024/06/07 13:09

一、学习

1.启动

  $("#commentForm").validate();

2.设置全局默认

$.validator.setDefaults({    submitHandler: function() {      alert("提交事件!");    }});

3.设置错误信息的提示位置

// 为错误信息 设置位置        errorPlacement: function(error, element) {              error.prependTo(element.parent());          },
// 在表格中可以设置一个所有提示信息的位置,有错误信息的时候显示,没有信息的时候隐藏errorLabelContainer: $("form li.errorAll"),//用div包裹每个错误提示wrapper: "div",
// 验证通过后,可以给原来错误的提示修改为成功的提示success: function(label) {    // set   as text for IE    label.addClass("valid").text("Ok!")},

4.自定义重置和提交按钮

    $("#custom-reset").click(function() {        form.resetForm();    });    $("#custom-submit").click(function() {        form.submit();    });

二、 注意点

1. h5中属性 required 可以触发 jQuery.validate 中的required 属性

这里写图片描述
这里写图片描述
这里写图片描述

2. jQuery.validate 屏蔽了 h5 验证。

3. jQuery.validate 有2种写法

这里写图片描述
这里写图片描述

如果两种验证相同的 ,则使用 validate中的验证规则和报错说明
如果两种验证不同,则会一起验证

4.如果 type=“email” 验证的时候,会优先使用 ,下图扩展的提示

这里写图片描述
如果 写成 type = “text” 验证的时候则会使用我们自定义的提示

5. 删除某个验证规则

$('#form').rules('remove', 'required'); 

去除不了写在元素内部的required 属性 、可以删除插件定义的required。
删除多个可以使用:

$('#form').rules('remove', 'required idCard1');

删除所有可以使用:

$('#form').rules('remove');

6.添加某个验证规则:

$('#form').rules('add', {email: true ,messages: {email: '提示信息'}});

7.去除required 的规则


8. 把验证的规则,写在class 也能触发 这个规则验证,且 用 ‘remove’无法删除。

9.用 ‘remove’去除 ‘required’的时候。有时候会直接去掉 必填选项,有时却不会。这个需要进一步测试检验。未找到结果
这里写图片描述

10. 忽略一些元素使其不验证

ignore: "#emailName,[name='1']",

11.remote 验证

 rules:{          'etp.userCode':{              remote: {                  type: "post",                  url: "/powerSD/sdplat/etp/userCodeExist.action",                  data: {                      userCode: function() {                                          return $("#etp.userCode").val();                      }                  },                  dataType: "html",                  dataFilter: function(data, type) {                      if (data == "true"){                          return true;                      }else{                          return false;                      }                  }              }          }      },      messages:{          'etp.userCode':{              remote: "用户名已被占用"          }      }  
原创粉丝点击