jQuery Validate插件验证规则的动态更改、提示消息的更改、服务器端验证

青旅半醒 2023-08-17 16:47 62阅读 0赞

# jQuery Validate插件 #

最近使用 jQuery的Validate插件进行表单数据的校验，给开发带来了很大的便利，验证提示消息显示在label中，相对于笨拙的alert提示来说，它给带来了很好的用户体验。本章除了叙述插件自身封装的一些验证方法外，还会额外讲解如何添加自定义验证，如有不足之处欢迎大家评论指出，以便共同学习进步。

###### 一、js的引入 ######

###### 二、默认校验规则 ######

<table> 
 <thead> 
  <tr> 
   <th>规则</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>required:true</td> 
   <td>必须输入的字段</td> 
  </tr> 
  <tr> 
   <td>email:true</td> 
   <td>必须输入正确格式的电子邮件</td> 
  </tr> 
  <tr> 
   <td>url:true</td> 
   <td>必须输入正确格式的网址</td> 
  </tr> 
  <tr> 
   <td>number:true</td> 
   <td>必须输入合法的数字(负数，小数)</td> 
  </tr> 
  <tr> 
   <td>digits:true</td> 
   <td>必须输入整数</td> 
  </tr> 
  <tr> 
   <td>creditcard:true</td> 
   <td>必须输入合法的信用卡号</td> 
  </tr> 
  <tr> 
   <td>maxlength:5</td> 
   <td>输入长度最多是5的字符串(汉字算一个字符串)</td> 
  </tr> 
  <tr> 
   <td>minlength:10</td> 
   <td>输入长度最小是10的字符串(汉字算一个字符串)</td> 
  </tr> 
  <tr> 
   <td>rangelength:[5,10]</td> 
   <td>输入长度必须介于5和10之间的字符串</td> 
  </tr> 
  <tr> 
   <td>range:[5,10]</td> 
   <td>输入值必须介于5和10之间</td> 
  </tr> 
  <tr> 
   <td>max:5</td> 
   <td>值不能大于5</td> 
  </tr> 
  <tr> 
   <td>min:10</td> 
   <td>值不能小于10</td> 
  </tr> 
 </tbody> 
</table>

###### 三、js中使用校验规则 ######

（1）使用默认校验规则进行校验，下面代码为[若依项目][Link 1]添加用户验证

$("#form-user-add").validate({
        
            	onkeyup: false,
            	rules:{
        
            		loginName:{
        
            			minlength: 2,
            			maxlength: 20,
            			remote: {
        
                            url: prefix + "/checkLoginNameUnique",
                            type: "post",
                            dataType: "json",
                            data: {
        
                            	name : function() {
        
                                    return $.common.trim($("#loginName").val());
                                }
                            },
                            dataFilter: function(data, type) {
        
                            	return $.validate.unique(data);
                            }
                        }
            		},
            		password:{
        
            			minlength: 5,
            			maxlength: 20
            		},
            		email:{
        
                        email:true,
                        remote: {
        
                            url: prefix + "/checkEmailUnique",
                            type: "post",
                            dataType: "json",
                            data: {
        
                                name: function () {
        
                                    return $.common.trim($("#email").val());
                                }
                            },
                            dataFilter: function (data, type) {
        
                            	return $.validate.unique(data);
                            }
                        }
            		},
            		phonenumber:{
        
            			isPhone:true,
                        remote: {
        
                            url: prefix + "/checkPhoneUnique",
                            type: "post",
                            dataType: "json",
                            data: {
        
                                name: function () {
        
                                    return $.common.trim($("#phonenumber").val());
                                }
                            },
                            dataFilter: function (data, type) {
        
                            	return $.validate.unique(data);
                            }
                        }
            		},
            	},
            	messages: {
        
                    "loginName": {
        
                        remote: "用户已经存在"
                    },
            		"email": {
        
                        remote: "Email已经存在"
                    },
            		"phonenumber":{
        
                    	remote: "手机号码已经存在"
            		}
                },
                focusCleanup: true
            });

2、自定义验证规则

jQuery.validator.addMethod("giftValueValiadtor",function(value,element){
        
         //获取充值金额
          var rechageMoneyVal = $("#rechageMoney").val()
          return this.optional(element) || parseInt(value)<=parseInt(rechageMoneyVal);
            },"您当前填写的赠送金额大于充值金额！");
    rules:{
        
    	 giftValueValiadtor:{
        
    	             required: true,
                       giftValueBig:true
                   },
            focusCleanup: true
           }

3、验证规则的动态添加和删除

//校验身份证
     jQuery.validator.addMethod("isIdentityOverride",function(value,element){
        
                var id= /^(^\d{18}$|^\d{17}(\d|X))$/;
                return this.optional(element) || (id.test(value));
            },"请输入正确的18位身份证号,末尾为大写X");
    /*下面验证实现功能：
      如果证件类型选择的是身份证，就增加身份证号校验规则，如果不是就去除身份证号校验规则，
    这里需要监听证件类型select下拉框值的变化：document.getElementById("idCardType").onchange
      */
    document.getElementById("idCardType").onchange = function(){
        
       if($('#idCardType option:selected').val()){
        
           if($('#idCardType option:selected').val()=='1'){
        
               $("#idCardNum").rules("add",{
        required:true,isIdentityOverride:true});
           }else{
        
               $("#idCardNum").rules("remove","isIdentityOverride");
               $("#idCardNum").rules("add",{
        required:true});
           }
       }
    }

[Link 1]: https://gitee.com/y_project/RuoYi