jquery validation 的正确打开方式

也不知道现在有什么好的验证插件，总之找插件我就找jQuery的。

其实bootstrap的验证插件也不错，至少比jQuery validation 好看多了，但它依赖bootsrap的样式，这次的情况用不上。

进入正题：

jQuery validation 官网：

https://jqueryvalidation.org/documentation/

验证有三种方式：

1.在元素中加属性 data-rule-规则名="参数"

2.在元素class中添加json格式的样式 class="{requerid:ture}"

3.在初始的时候做为参数传入$( "#form" ).valid({
rules : {
"model.code" : {
remote : "${cxt}/systemSetting/departmentManagement/existDepartmentCode.php"
}
},
messages : {
"model.code" : {
remote : "部门编号已存在"
}
}
});

添加规则也有3种方式：

1.在初始化的时候加入 上面的第三个

2.在初始化前加入 jQuery.validator.addClassRules( name, rules ) https://jqueryvalidation.org/jQuery.validator.addClassRules/

3.在初始化后调用 $("要选择元素的选择器").rules("add",{remote:"${cxt}/systemSetting/userManagement/existUsername.php",messages:{remote:"用户名已存在"}}) 参数查

remote远程验证，调用action，返回为true或其他(false，空，字符串都认为是验证失败)

开始先引入jquery.min.js，jQuery validation的js和jQuery validation的语言包js（提示信息用到）

先用 jQuery.validator.setDefaults(json); 初始化参数。

 
 

  
  

   
   

   
   再用	var validator=$( "#form" ).validate(json);		初始化验证功能，json对象可有可无，具体参数看参考官方文档。
   
    validator.form();  调用验证（不触发提示） validator.element("jquery选择器"); 验证单个元素

   
   

   
   用 $( "#form" ).valid(); 调用验证（触发提示）
   
    
   
   新增自定义方法：$.validator.addMethod(name,function(value, element, param){return this.optional(element) || param[0];})
   
   this.optional是否存在该元素，value是元素的值，param是验证是传入的参数
   
    
   
    
   
   写个例子：
   
   $(function() {
 $.validator.setDefaults({
 errorElement : "span",（错误提示使用的标签）
 errorClass : 'err-msg',（错误提示的class）
 errorPlacement : function(error, element) {// render error placement for each input type
 error.appendTo($(element).closest('.form-group'));
 }, （错误提示的位置）
 ignore : ':hidden',
 success : function(label, element) {
 label.addClass('err-msg valid');
 // mark the current input as valid and display OK icon
 $(element).closest('.form-group').removeClass('has-error');
 },
 highlight : function(element) {
 $(element).closest('.err-msg').removeClass('valid');
 // display OK icon
 $(element).closest('.form-group').addClass('has-error');
 // add the Bootstrap error class to the control group
 },
 unhighlight : function(element) {// revert the change done by hightlight
 $(element).closest('.form-group').removeClass('has-error');
 // set error class to the control group
 }
 });
 $.validator.addMethod("hanzi", function(value, element, param) {
 return this.optional(element) || isHanzi(value) || param[0];
 }, "名字只能为中文");
 $.validator.addMethod("positiveInteger", function(value, element, param) {
 return this.optional(element) || isPositiveInteger(value) || param[0];
 }, "请输入正整数");
 $.validator.addMethod("zipcode", function(value, element, param) {
 return this.optional(element) || isZipcode(value) || param[0];
 }, "邮政编码应为6位正整数");
 $.validator.addMethod("numLetterUnderline", function(value, element, param) {
 return this.optional(element) || isNumberLetterUnderline(value) || param[0];
 }, "只能是数字字母下划线");
 $.validator.addMethod("numLetterUnderlineHyphen", function(value, element, param) {
 return this.optional(element) || isNumberLetterUnderlineHyphen(value) || param[0];
 }, "只能是数字字母下划线或连字符");
 $.validator.addMethod("tel", function(value, element, param) {
 return this.optional(element) || isTel(value) || param[0];
 }, "座机号码格式不正确");
 $.validator.addMethod("cell", function(value, element, param) {
 return this.optional(element) || isCell(value) || param[0];
 }, "手机号码格式不正确");
 $.validator.addMethod("ip", function(value, element, param) {
 return this.optional(element) || isIP(value) || param[0];
 }, "ip格式不正确");
 })

   
   

   
   

   
   哎，还是懒的写，将就看下吧。