easyui表單驗(yàn)證

第一步 自定義validator.js 內(nèi)容如下 (新建js)

$.extend($.fn.validatebox.defaults.rules,
  {   
   // 驗(yàn)證中文
   CHS : {
    validator : function(value) {
    return /^[\u0391-\uFFE5]+$/.test(value);},
    message : "只能輸入漢字"
   },
   // 字符驗(yàn)證
   stringCheck : {
    validator : function(value) {
    return /^[\u0391-\uFFE5\w]+$/.test(value);},
    message : "只能包括中文字、英文字母、數(shù)字和下劃線"
   },
   // 驗(yàn)證中文,英文,數(shù)字
   stringCheckSub : {
    validator : function(value) {
    return /^[a-zA-Z0-9\u4E00-\u9FA5]+$/.test(value);},
    message : "只能包括中文字、英文字母、數(shù)字"
   },
   // 驗(yàn)證英文字母、數(shù)字
   englishCheckSub : {
    validator : function(value) {
    return /^[a-zA-Z0-9]+$/.test(value);},
    message : "只能包括英文字母、數(shù)字"
   },
   // 驗(yàn)證數(shù)字
   numberCheckSub : {
    validator : function(value) {
    return /^[0-9]+$/.test(value);},
    message : "只能輸入數(shù)字"
   },
   // 手機(jī)號(hào)碼驗(yàn)證
   mobile : {
    validator : function(value) {
    var reg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    return value.length == 11 && reg.test(value);},
    message : "請(qǐng)正確填寫(xiě)您的手機(jī)號(hào)碼."
   },

     // 電話號(hào)碼驗(yàn)證

     telephone : {
      validator : function(value) {
       // 電話號(hào)碼格式010-12345678
       var reg = /^\d{3,4}?\d{7,8}$/;
       return reg.test(value);
      },
      message : "請(qǐng)正確填寫(xiě)您的電話號(hào)碼."
     },

     // 聯(lián)系電話(手機(jī)/電話皆可)驗(yàn)證

     mobileTelephone : {
      validator : function(value) {
       var cmccMobile = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
       var tel = /^\d{3,4}?\d{7,8}$/;
       return tel.test(value)
         || (value.length == 11 && cmccMobile
           .test(value));
      },
      message : "請(qǐng)正確填寫(xiě)您的聯(lián)系電話."
     },

     // 驗(yàn)證國(guó)內(nèi)郵編驗(yàn)證
     zipCode : {
      validator : function(value) {
       var reg = /^[1-9]\d{5}$/;
       return reg.test(value);
      },
      message : "郵編必須長(zhǎng)短0開(kāi)端的6位數(shù)字."
     },

     // 身份證號(hào)碼驗(yàn)證
     idCardNo : {
      validator : function(value) {
       return isIdCardNo(value);
      },
      message : "請(qǐng)正確輸入您的身份證號(hào)碼."
     },

     // 驗(yàn)證兩個(gè)不同時(shí)為空

     // 可以自定義提示信息
     allNotNull : {
      validator : function(toValue, fromValue) {
       if (fromValue == null || fromValue.length == 0
         || fromValue[0] == null
         || fromValue[0] == "") {
        if (toValue == null || toValue.length == 0
          || toValue[0] == null
          || toValue[0] == "") {
         $.fn.validatebox.defaults.rules.compareDigit.message = "中,英.文名不可同時(shí)為空 ";
         return false;
        } else {
         return true;
        }
       } else
       {
        return true;
       }
      },
      message : ""
     },

     // 數(shù)字驗(yàn)證大小,結(jié)束值應(yīng)該大于開(kāi)始值
     // 可以自定義提示信息
     compareDigit : {
      validator : function(toValue, fromValue) {
       if (fromValue == null || fromValue.length == 0
         || fromValue[0] == null
         || fromValue[0] == "") {
        return true;
       }

       if (parseFloat(toValue) > parseFloat(fromValue[0])) {
        return true;
       } else {
        if (fromValue.length >= 2) {
         $.fn.validatebox.defaults.rules.compareDigit.message = fromValue[1];
        } else {
         $.fn.validatebox.defaults.rules.compareDigit.message = '結(jié)束值應(yīng)該大于開(kāi)始值';
        }
        return false
       }
      },
      message : ""
     },

     // 日期、時(shí)間驗(yàn)證大小,結(jié)束日期應(yīng)該大于開(kāi)始日期

     // 可以自定義提示信息
     compareDate : {
      validator : function(toDate, param) {
       if (param == null || param.length == 0
         || param[0] == null || param[0] == "") {
        return true;
       }
       if (toDate > param[0]) {
        return true;
       } else {
        if (param.length >= 2) {
         $.fn.validatebox.defaults.rules.compareDate.message = param[1];
        }
        else {
         $.fn.validatebox.defaults.rules.compareDate.message = '結(jié)束日期應(yīng)該大于開(kāi)始日期';
        }
        return false
       }
      },
      message : ''
     }

    // 到服務(wù)器端驗(yàn)證
    /*
     * remote:{
     * 
     * validator:function(value,param){
     * 
     * var params = {};
     * 
     * params[param[1]] = value;
     * 
     * $.post(param[0],params,function(data){
     * 
     * if(!data.msg){
     * 
     * $.fn.validatebox.defaults.rules.account.message = param[2];
     *  }
     * 
     * return data.msg;
     * 
     * });
     *  },
     * 
     * message:""
     *  }
     */

    }

  )

// --身份證號(hào)碼驗(yàn)證-支持新的帶x身份證
function isIdCardNo(num)
{
 var factorArr = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4,
   2, 1);
 var error;
 var varArray = new Array();
 var intValue;
 var lngProduct = 0;
 var intCheckDigit;
 var intStrLen = num.length;
 var idNumber = num;
 // initialize
 if ((intStrLen != 15) && (intStrLen != 18)) {
  // error = "輸入身份證號(hào)碼長(zhǎng)度不對(duì)!";
  // alert(error);
  // frmAddUser.txtIDCard.focus();
  return false;
 }
 // check and set value
 for (i = 0; i < intStrLen; i++) {
  varArray[i] = idNumber.charAt(i);
  if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {
   // error = "錯(cuò)誤的身份證號(hào)碼!.";
   // alert(error);
   // frmAddUser.txtIDCard.focus();
   return false;
  } else if (i < 17) {
   varArray[i] = varArray[i] * factorArr[i];
  }
 }

 if (intStrLen == 18) {
  // check date
  var date8 = idNumber.substring(6, 14);
  if (isDate8(date8) == false) {
   // error = "身份證中日期信息不正確!.";
   // alert(error);
   return false;
  }

  // calculate the sum of the products
  for (i = 0; i < 17; i++) {
   lngProduct = lngProduct + varArray[i];
  }

  // calculate the check digit
  intCheckDigit = 12 - lngProduct % 11;
  switch (intCheckDigit) {
  case 10:
   intCheckDigit = 'X';
   break;
  case 11:
   intCheckDigit = 0;
   break;
  case 12:
   intCheckDigit = 1;
   break;
  }

  // check last digit
  if (varArray[17].toUpperCase() != intCheckDigit) {
   // error = "身份證效驗(yàn)位錯(cuò)誤!...正確為: " + intCheckDigit + ".";
   // alert(error);
   return false;
  }
 }
 else { // length is 15
  // check date
  var date6 = idNumber.substring(6, 12);
  if (isDate6(date6) == false) {
   // alert("身份證日期信息有誤!.");
   return false;
  }
 }

 // alert ("Correct.");
 return true;
}

/**
 * 
 * 判斷是否為“YYYYMM”式的時(shí)期
 * 
 * 
 * 
 */

function isDate6(sDate) {
 if (!/^[0-9]{6}$/.test(sDate)) {
  return false;
 }
 var year, month, day;
 year = sDate.substring(0, 4);
 month = sDate.substring(4, 6);
 if (year < 1700 || year > 2500)
  return false
 if (month < 1 || month > 12)
  return false
 return true
}

/**
 * 
 * 判斷是否為“YYYYMMDD”式的時(shí)期
 * 
 * 
 * 
 */

function isDate8(sDate) {
 if (!/^[0-9]{8}$/.test(sDate)) {
  return false;
 }

 var year, month, day;
 year = sDate.substring(0, 4);
 month = sDate.substring(4, 6);
 day = sDate.substring(6, 8);
 var iaMonthDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]

 if (year < 1700 || year > 2500)
  return false

 if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
  iaMonthDays[1] = 29;

 if (month < 1 || month > 12)
  return false

 if (day < 1 || day > iaMonthDays[month - 1])
  return false

 return true

}

拓展2

$
  .extend(
    $.fn.validatebox.defaults.rules,
    {

     idcard : {// 驗(yàn)證身份證

      validator : function(value) {

       return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);

      },

      message : '身份證號(hào)碼格式不正確'

     },

     minLength : {

      validator : function(value, param) {

       return value.length >= param[0];

      },

      message : '請(qǐng)輸入至少(2)個(gè)字符.'

     },

     length : {
      validator : function(value, param) {

       var len = $.trim(value).length;

       return len >= param[0] && len <= param[1];

      },

      message : "輸入內(nèi)容長(zhǎng)度必須介于{0}和{1}之間."

     },

     phone : {// 驗(yàn)證電話號(hào)碼

      validator : function(value) {

       return /^((\d2,3\d2,3)|(\d{3}\-))?(0\d2,30\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
         .test(value);

      },

      message : '格式不正確,請(qǐng)使用下面格式:020-88888888'

     },

     mobile : {// 驗(yàn)證手機(jī)號(hào)碼

      validator : function(value) {

       return /^(13|15|18)\d{9}$/i.test(value);

      },

      message : '手機(jī)號(hào)碼格式不正確'

     },

     phoneNum : {// 驗(yàn)證手機(jī)號(hào)碼+固定電話

      validator : function(value) {

       return /^(((((010)|(02\d)))[2-8]\d{7})|(0[3-9]\d{2}[2-8]\d{6,7})|(0?(?:147|1[358]\d)\d{8}))$/i
         .test(value);

      },

      message : '手機(jī)號(hào)碼格式不正確'

     },

     intOrFloat : {// 驗(yàn)證整數(shù)或小數(shù)

      validator : function(value) {

       return /^\d+(\.\d+)?$/i.test(value);

      },

      message : '請(qǐng)輸入數(shù)字,并確保格式正確'

     },

     currency : {// 驗(yàn)證貨幣

      validator : function(value) {

       return /^\d+(\.\d+)?$/i.test(value);

      },

      message : '貨幣格式不正確'

     },

     qq : {// 驗(yàn)證QQ,從10000開(kāi)始

      validator : function(value) {

       return /^[1-9]\d{4,9}$/i.test(value);

      },

      message : 'QQ號(hào)碼格式不正確'

     },

     integer : {// 驗(yàn)證整數(shù)

      validator : function(value) {

       return /^[+]?[1-9]+\d*$/i.test(value);

      },

      message : '請(qǐng)輸入整數(shù)'

     },

     age : {// 驗(yàn)證年齡

      validator : function(value) {

       return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i
         .test(value);

      },

      message : '年齡必須是0到120之間的整數(shù)'

     },

     chinese : {// 驗(yàn)證中文

      validator : function(value) {

       return /^[\Α-\¥]+$/i.test(value);

      },

      message : '請(qǐng)輸入中文'

     },

     english : {// 驗(yàn)證英語(yǔ)

      validator : function(value) {

       return /^[A-Za-z]+$/i.test(value);

      },

      message : '請(qǐng)輸入英文'

     },

     unnormal : {// 驗(yàn)證是否包含空格和非法字符

      validator : function(value) {

       return /.+/i.test(value);

      },

      message : '輸入值不能為空和包含其他非法字符'

     },

     username : {// 驗(yàn)證用戶(hù)名

      validator : function(value) {

       return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);

      },

      message : '用戶(hù)名不合法(字母開(kāi)頭,允許6-16字節(jié),允許字母數(shù)字下劃線)'

     },

     faxno : {// 驗(yàn)證傳真

      validator : function(value) {

       // return /^[+]{0,1}(\d){1,3}[]?([-]?((\d)|[
       // ]){1,12})+$/i.test(value);

       return /^((\d2,3\d2,3)|(\d{3}\-))?(0\d2,30\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i
         .test(value);

      },

      message : '傳真號(hào)碼不正確'

     },

     zip : {// 驗(yàn)證郵政編碼

      validator : function(value) {

       return /^[1-9]\d{5}$/i.test(value);

      },

      message : '郵政編碼格式不正確'

     },

     ip : {// 驗(yàn)證IP地址

      validator : function(value) {

       return /d+.d+.d+.d+/i.test(value);

      },

      message : 'IP地址格式不正確'

     },

     name : {// 驗(yàn)證姓名,可以是中文或英文

      validator : function(value) {

       return /^[\Α-\¥]+$/i.test(value)
         | /^\w+[\w\s]+\w+$/i.test(value);

      },

      message : '請(qǐng)輸入姓名'

     },

     date : {// 驗(yàn)證姓名,可以是中文或英文

      validator : function(value) {

       // 格式y(tǒng)yyy-MM-dd或yyyy-M-d

       return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i
         .test(value);

      },

      message : '清輸入合適的日期格式'

     },

     msn : {

      validator : function(value) {

       return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
         .test(value);

      },

      message : '請(qǐng)輸入有效的msn賬號(hào)(例:abc@hotnail(msn/live).com)'

     },

     same : {

      validator : function(value, param) {

       if ($("#" + param[0]).val() != "" && value != "") {

        return$("#" + param[0]).val() == value;

       } else {

        return true;

       }

      },

      message : '兩次輸入的密碼不一致!'

     }

    });

第二步 在你需要驗(yàn)證的jsp 引用該js

<script type="text/javascript" src="js/validator.js"></script>

第三步 在對(duì)應(yīng)的表單 input 中添加驗(yàn)證

<input class="easyui-validatebox" missingMessage="必填項(xiàng)" validType="englishCheckSub"  maxlength="20" id="bzbm" name="bzbm" required="true"/>

完成以上三步,在提交表單時(shí)候驗(yàn)證就可以

if($('#funcform').form("validate")){

提交表單的代碼

}

自己需要的驗(yàn)證可在自定義的js中增加。

完整代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery.min.js"></script>
  <script src="jquery.easyui.min.js"></script>
  <script src="validator.js"></script>
</head>
<body>
<form action="">
  <input class="easyui-validatebox" missingMessage="必填項(xiàng)" validType="mobile"  maxlength="20" id="bzbm" name="bzbm" required="true"/>
  <input type="submit" value="提交">
</form>
<script>
  $(function() {
    if($('#funcform').form("validate")){
      console.log("校驗(yàn)成功");
    }
  }
  )
</script>
</body>
</html>

原文:https://blog.csdn.net/u011231355/article/details/49021587

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容