jQuery EasyUi 驗(yàn)證功能實(shí)例解析

更新時(shí)間：2017年01月06日 10:35:09 作者：baochanghong

本文給大家分享jquery easyui驗(yàn)證功能的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

廢話不多說了，下面給大家介紹下jquery easyui 驗(yàn)證功能的實(shí)例代碼。

{  
          field : 'startPort',  
          title : "起始端口",  
          editor: "text",  
          width : 50,  
          editor: {  
            type: 'SuperValidatebox',  
            options: {  
              required: true,  
              validType: ['integer','length[0,5]']  
            }  
          },

自從1.3.2版本開始，validatebox自身已經(jīng)支持多重校驗(yàn)了，例如：

input class="easyui-validatebox" data-options="required:true,validType:['email','length[0,20]']">

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <script src="easyui1.2.4/jquery-1.6.min.js" type="text/javascript"></script>  
  <script src="easyui1.2.4/jquery.easyui.min.js" type="text/javascript"></script>  
  <!--自定義驗(yàn)證-->  
  <script src="easyui1.2.4/validator.js" type="text/javascript"></script>  
  <link href="easyui1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
  <script>  
    $(function () {  
      //設(shè)置text需要驗(yàn)證  
      $('input[type=text]').validatebox();  
    })  
  </script>  
</head>  
<body>  
  郵箱驗(yàn)證：<input type="text" validtype="email" required="true" missingMessage="不能為空" invalidMessage="郵箱格式不正確" /><br />  
  網(wǎng)址驗(yàn)證：<input type="text" validtype="url" invalidMessage="url格式不正確[http://www.example.com]" /><br />  
  長度驗(yàn)證：<input type="text" validtype="length[8,20]" invalidMessage="有效長度8-20" /><br />  
  手機(jī)驗(yàn)證：<input type="text" validtype="mobile" /><br />  
  郵編驗(yàn)證：<input type="text" validtype="zipcode" /><br />  
  賬號(hào)驗(yàn)證：<input type="text" validtype="account[8,20]" /><br />  
  漢子驗(yàn)證：<input type="text" validtype="CHS" /><br />  
  遠(yuǎn)程驗(yàn)證：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用戶名已存在"/>  
</body>  
</html>

自定義驗(yàn)證：

//擴(kuò)展easyui表單的驗(yàn)證  
$.extend($.fn.validatebox.defaults.rules, {  
  //驗(yàn)證漢子  
  CHS: {  
    validator: function (value) {  
      return /^[\u0391-\uFFE5]+$/.test(value);  
    },  
    message: '只能輸入漢字'  
  },  
  //移動(dòng)手機(jī)號(hào)碼驗(yàn)證  
  mobile: {//value值為文本框中的值  
    validator: function (value) {  
      var reg = /^1[3|4|5|8|9]\d{9}$/;  
      return reg.test(value);  
    },  
    message: '輸入手機(jī)號(hào)碼格式不準(zhǔn)確.'  
  },  
  //國內(nèi)郵編驗(yàn)證  
  zipcode: {  
    validator: function (value) {  
      var reg = /^[1-9]\d{5}$/;  
      return reg.test(value);  
    },  
    message: '郵編必須是非0開始的6位數(shù)字.'  
  },  
  //用戶賬號(hào)驗(yàn)證(只能包括 _ 數(shù)字 字母)   
  account: {//param的值為[]中值  
    validator: function (value, param) {  
      if (value.length < param[0] || value.length > param[1]) {  
        $.fn.validatebox.defaults.rules.account.message = '用戶名長度必須在' + param[0] + '至' + param[1] + '范圍';  
        return false;  
      } else {  
        if (!/^[\w]+$/.test(value)) {  
          $.fn.validatebox.defaults.rules.account.message = '用戶名只能數(shù)字、字母、下劃線組成.';  
          return false;  
        } else {  
          return true;  
        }  
      }  
    }, message: ''  
  }  
})

$.extend($.fn.validatebox.defaults.rules, {       
    checkWSDL: {    
      validator: function(value,param){         
         var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";  
         return reg.test(value);  
      },    
      message: '請(qǐng)輸入合法的WSDL地址'    
    },  
    checkIp : {// 驗(yàn)證IP地址  
      validator : function(value) {  
        var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;  
        return reg.test(value);  
      },  
      message : 'IP地址格式不正確'  
  }  
});

以上所述是小編給大家介紹的jQuery EasyUi 驗(yàn)證功能實(shí)例解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: