jquery正则表达式使用 jquery正则表达式验证

转载

mob6454cc6bcf40 2024-08-27 15:27:14

文章标签 jquery正则表达式使用正则表达式 jQuery Mobile HTML 文章分类 jQuery 前端开发

项目中使用的jQuery添加的校验的方法
$(document).ready(function(){       
  5
         
  6
/**//* 设置默认属性 */       
  7
$.validator.setDefaults({       
  8
    submitHandler: function(form) {    
  9
        form.submit();    
 10
    }       
 11
});   
 12
  
 13
// 字符验证       
 14
jQuery.validator.addMethod("stringCheck", function(value, element) {       
 15
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);       
 16
}, "只能包括中文字、英文字母、数字和下划线");   
 17
  
 18
// 中文字两个字节       
 19
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {       
 20
    var length = value.length;       
 21
    for(var i = 0; i < value.length; i++){       
 22
        if(value.charCodeAt(i) > 127){       
 23
        length++;       
 24
        }       
 25
    }       
 26
    return this.optional(element) || ( length >= param[0] && length <= param[1] );       
 27
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");   
 28
  
 29
// 身份证号码验证       
 30
jQuery.validator.addMethod("isIdCardNo", function(value, element) {       
 31
    return this.optional(element) || isIdCardNo(value);       
 32
}, "请正确输入您的身份证号码");
 33
     
 34
// 手机号码验证       
 35
jQuery.validator.addMethod("isMobile", function(value, element) {       
 36
    var length = value.length;   
 37
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   
 38
    return this.optional(element) || (length == 11 && mobile.test(value));       
 39
}, "请正确填写您的手机号码");       
 40
     
 41
// 电话号码验证       
 42
jQuery.validator.addMethod("isTel", function(value, element) {       
 43
    var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678   
 44
    return this.optional(element) || (tel.test(value));       
 45
}, "请正确填写您的电话号码");   
 46
  
 47
// 联系电话(手机/电话皆可)验证   
 48
jQuery.validator.addMethod("isPhone", function(value,element) {   
 49
    var length = value.length;   
 50
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   
 51
    var tel = /^\d{3,4}-?\d{7,9}$/;   
 52
    return this.optional(element) || (tel.test(value) || mobile.test(value));   
 53
  
 54
}, "请正确填写您的联系电话");   
 55
     
 56
// 邮政编码验证       
 57
jQuery.validator.addMethod("isZipCode", function(value, element) {       
 58
    var tel = /^[0-9]{6}$/;       
 59
    return this.optional(element) || (tel.test(value));       
 60
}, "请正确填写您的邮政编码");    
 61
  
 62
//开始验证   
 63
$('#submitForm').validate({   
 64
    /**//* 设置验证规则 */  
 65
    rules: {   
 66
        username: {   
 67
            required:true,   
 68
            stringCheck:true,   
 69
            byteRangeLength:[3,15]   
 70
        },   
 71
        email:{   
 72
            required:true,   
 73
            email:true  
 74
        },   
 75
        phone:{   
 76
            required:true,   
 77
            isPhone:true  
 78
        },   
 79
        address:{   
 80
            required:true,   
 81
            stringCheck:true,   
 82
            byteRangeLength:[3,100]   
 83
        }   
 84
    },   
 85
       
 86
    /**//* 设置错误信息 */  
 87
    messages: {   
 88
        username: {       
 89
            required: "请填写用户名",   
 90
            stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",   
 91
            byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"       
 92
        },   
 93
        email:{   
 94
            required: "请输入一个Email地址",   
 95
            email: "请输入一个有效的Email地址"  
 96
        },   
 97
        phone:{   
 98
            required: "请输入您的联系电话",   
 99
            isPhone: "请输入一个有效的联系电话"  
100
        },   
101
        address:{   
102
            required: "请输入您的联系地址",   
103
            stringCheck: "请正确输入您的联系地址",   
104
            byteRangeLength: "请详实您的联系地址以便于我们联系您"  
105
        }   
106
    },   
107
       
108
   /* 设置验证触发事件 */  
109
    focusInvalid: false,   
110
    onkeyup: false,   
111
       
112
    /**//* 设置错误信息提示DOM */  
113
    errorPlacement: function(error, element) {       
114
        error.appendTo( element.parent());       
115
    },     
116
       
117
});   
118
  
119
});
 
 
supplier-commons-vacation.js
 
 //定义订单的公共的函数方法
 function define_common_method(){
 
    //设置默认的操作
     $.validator.setDefaults({    
     submitHandler: function(form) { form.submit(); }    
        }); 
   
     //添加自定义校验函数
     $.validator.addMethod("charNo",function(value,element) {    
    var length = value.length;  
    var your_tel =/[\W]/g;
    return this.optional(element) || (length<=8&&!your_tel.test(value));   
  },"请输入英文字符或数字！");
  
  //添加验证操作名称的校验函数
  $.validator.addMethod("charString",function(value,element) {    
      var length = value.length;  
      var your_tel =/[^\a-zA-Z\u4E00-\u9FA5]/g;
      var your_tel2=/^[A-Za-z]*$/;
      return this.optional(element) || (length<=20&&!your_tel.test(value));   
  },"请输入中文或英文名称"); 
  
  //验证手机号码（仅仅13和15开头）
  $.validator.addMethod("isPhone", function(value,element) {   
           var length = value.length;   
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   
         var tel = /^\d{3,4}-?\d{7,9}$/;   
        return this.optional(element) || (tel.test(value) || mobile.test(value));   
         }, "请正确填写您的联系电话或者手机");   
  
 } 
 
supplier-finance.js
jQuery(function($) {
 
 //绑定所有的事件
 $(document).ready(function() {
  bind_component_event();
 });
 
 
 //绑定的公共的事件
 function bind_component_event() {
    //定义一些公共的方法
    define_common_method();
  
    //环游供应商付款的验证（度假）  
    bind_checkCondition_component_event();
    
    
    //环游供应商付款验证的（供应商）
    bind_supplierConditionForm_component_event();
 }
 
 //环游供应商付款（度假）的验证  
 function bind_checkCondition_component_event() {
  
  //待收款款订单验证
  $("#checkConditionForm").validate({
   event: "submit",
   errorPlacement: function(error, element) {
   },
   rules:{
     "searchCon.accountNo":{
      charNo:true
     },
     "searchCon.supplierName":{
      charString:true
     }
    },
    messages:{
     "searchCon.accountNo":{
        charNo:"请输入正确的对账编号！"
       },
       "searchCon.supplierName":{
        charString:"请输入正确的供应商名称！"
       }
    },
    
    //设置验证触发事件
   focusInvalid:false,
   onkeyup:false,
            
         //设置错误信息提示DOM    
   errorPlacement:function(error,element){
      error.appendTo(element.parent());
   }
    
    
  });
 }
 //环游供应商付款的验证（供应商）  
 function bind_supplierConditionForm_component_event() {
  
  //待收款款订单验证
  $("#supplierConditionForm").validate({
   event: "submit",
   errorPlacement: function(error, element) {
   },
   rules:{
     "searchCon.accountNo":{
      charNo:true
     },
     "searchCon.supplierName":{
      charString:true
     }
    },
    messages:{
     "searchCon.accountNo":{
        charNo:"请输入正确的对账编号！"
       },
       "searchCon.supplierName":{
        charString:"请输入正确的供应商名称！"
       }
    },
    
    //设置验证触发事件
   focusInvalid:false,
   onkeyup:false,
            
         //设置错误信息提示DOM    
   errorPlacement:function(error,element){
      error.appendTo(element.parent());
   }
  });
 }
 
}); 
 
关于jQuery的校验的API 
 
http://docs.jquery.com/Plugins/Validation/Validator/addMethod
 
http://www.shopxx.net/html/news/2009/1201/59.html
http://jquery.bassistance.de/api-browser/plugins.html

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。