DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> easyui validatebox驗證
easyui validatebox驗證
編輯:JavaScript基礎知識     
<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>
 <!--自定義驗證-->
 <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 () {
    
   //設置text需要驗證
   $('input[type=text]').validatebox();
  })
  
 </script>
</head>
<body>
 郵箱驗證:<input type="text" validtype="email" required="true" missingMessage="不能為空" invalidMessage="郵箱格式不正確" /><br />
 網址驗證:<input type="text" validtype="url" invalidMessage="url格式不正確[http://www.example.com]" /><br />
 長度驗證:<input type="text" validtype="length[8,20]" invalidMessage="有效長度8-20" /><br />
 手機驗證:<input type="text" validtype="mobile" /><br />
 郵編驗證:<input type="text" validtype="zipcode" /><br />
 賬號驗證:<input type="text" validtype="account[8,20]" /><br />
 漢字驗證:<input type="text" validtype="CHS" /><br />
 遠程驗證:<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用戶名已存在"/>
</body>
</html>
//自定義validator.js
//擴展easyui表單的驗證
$.extend($.fn.validatebox.defaults.rules, {
 //驗證漢字
 CHS: {
  validator: function (value) {
   return /^[\u0391-\uFFE5]+$/.test(value);
  },
  message: '只能輸入漢字'
 },
 //移動手機號碼驗證
 mobile: {//value值為文本框中的值
  validator: function (value) {
   var reg = /^1[3|4|5|8|9]\d{9}$/;
   return reg.test(value);
  },
  message: '輸入手機號碼格式不准確.'
 },
 //國內郵編驗證
 zipcode: {
  validator: function (value) {
   var reg = /^[1-9]\d{5}$/;
   return reg.test(value);
  },
  message: '郵編必須是非0開始的6位數字.'
 },
 //用戶賬號驗證(只能包括 _ 數字 字母) 
 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 = '用戶名只能數字、字母、下劃線組成.';
     return false;
    } else {
     return true;
    }
   }
  }, message: ''
 }
})

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved