jquery validate.addMethod 正则表达式 (自定义验证方法)

关注

转载最新推荐文章于 2025-04-18 11:19:01 发布 4.9k 阅读 AI 写同款· GEO 优化 ›

Jquery-validate扩展方法(验证空格) jquery-validate 可对前端form进行表单校验，文档里详细介绍了如何使用jquery-validate框架和如何扩展验证方法。立即下载

项目中使用的jQuery添加的校验的方法

$(document).ready(function(){
  5
  6/* 设置默认属性 */
  7$.validator.setDefaults({
  8    submitHandler: function(form) {
  9        form.submit();
10    }
11});
12
13// 字符验证
14jQuery.validator.addMethod("stringCheck", function(value, element) {
15    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
16}, "只能包括中文字、英文字母、数字和下划线");
17
18// 中文字两个字节
19jQuery.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// 身份证号码验证
30jQuery.validator.addMethod("isIdCardNo", function(value, element) {
31    return this.optional(element) || isIdCardNo(value);
32}, "请正确输入您的身份证号码");
33
34// 手机号码验证
35jQuery.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// 电话号码验证
42jQuery.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// 联系电话(手机/电话皆可)验证
48jQuery.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// 邮政编码验证
57jQuery.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());
   }
  });
}

});