Jquery easyui的validatebox控件和正则表达式

出处:http://blog.csdn.net/dandanzmc/article/details/36421465

 Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email、是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性。验证可以实现在数据层和业务规则层,但应当在表现层进行前端的“保护”,因此,我们通常在UI层为用户提供友好的、可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证。在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证。那现在说的Validatebox是怎么实现验证的呢?

       仔细观察jquery.validatebox.js文件,会发现它的验证其实还是采用的正则表达式,比如说验证长度限制吧,在jquery.validatebox.js里面是这么写的:

[javascript]  view plain copy
  1. length:{validator:function(_2d,_2e){  
  2. var len=$.trim(_2d).length;  
  3. return len>=_2e[0]&&len<=_2e[1];  
  4. },message:"Please enter a value between {0} and {1}."}  
至于,界面效果,我就不用说了。

        Validatebox控件提供的验证有限,如果我们想要更多的验证表达式,该怎么办?是不是能够改写jquery.validatebox.js文件,按照jquery.validatebox.js文件中的格式,为这个控件提供更多的验证效果。

        经过一番实验和查找,还真有办法来为这个Validatebox控件提供更多的验证信息,具体操作如下。

        对jquery.validatebox.js进行扩展,新建js文件,可以取名为:validatebox.js,这个文件中的内容如下:

[javascript]  view plain copy
  1. //扩展easyui表单的验证  
  2. $.extend($.fn.validatebox.defaults.rules, {  
  3.     //验证汉字  
  4.     CHS: {  
  5.         validator: function (value) {  
  6.             return /^[\u0391-\uFFE5]+$/.test(value);  
  7.         },  
  8.         message: 'The input Chinese characters only.'  
  9.     },  
  10.     //移动手机号码验证  
  11.     Mobile: {//value值为文本框中的值  
  12.         validator: function (value) {  
  13.             var reg = /^1[3|4|5|8|9]\d{9}$/;  
  14.             return reg.test(value);  
  15.         },  
  16.         message: 'Please enter your mobile phone number correct.'  
  17.     },  
  18.     //国内邮编验证  
  19.     ZipCode: {  
  20.         validator: function (value) {  
  21.             var reg = /^[0-9]\d{5}$/;  
  22.             return reg.test(value);  
  23.         },  
  24.         message: 'The zip code must be 6 digits and 0 began.'  
  25.     },  
  26.   //数字  
  27.     Number: {  
  28.         validator: function (value) {  
  29.             var reg =/^[0-9]*$/;  
  30.             return reg.test(value);  
  31.         },  
  32.         message: 'Please input number.'  
  33.     },  
  34. })  
         HTML页面:

[html]  view plain copy
  1. >  
  2. <html>  
  3. <head>  
  4.     <meta charset="gb2312">  
  5.     <title>Basic ValidateBox - jQuery EasyUI Demotitle>  
  6.     <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
  7.     <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
  8.     <link rel="stylesheet" type="text/css" href="../demo.css">  
  9.     <script type="text/javascript" src="../../jquery.min.js">script>  
  10.     <script type="text/javascript" src="../../jquery.easyui.min.js">script>  
  11.   
  12.         <script src="validatebox.js" type="text/javascript">script>    
  13.   
  14. head>  
  15. <body>  
  16.       
  17.         <h2>常用验证格式h2>   
  18.     <div style="margin:20px 0;">div>  
  19.     <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">  
  20.         <table cellpadding="10">  
  21.             <tr>  
  22.                 <td>User Name:td>  
  23.                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]'">td>  
  24.             tr>  
  25.             <tr>  
  26.                 <td>Email:td>  
  27.                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email'">td>  
  28.             tr>  
  29.             <tr>  
  30.                 <td>Birthday:td>  
  31.                 <td><input class="easyui-datebox textbox">td>  
  32.             tr>  
  33.             <tr>  
  34.                 <td>URL:td>  
  35.                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url'">td>  
  36.             tr>  
  37.             <tr>  
  38.                 <td>Mobile:td>  
  39.                 <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'Mobile'">td>  
  40.             tr>  
  41.             <tr>  
  42.                 <td>Length:td>  
  43.                 <td><input class="easyui-validatebox" data-options="required:true,validType:'length[0,2]'">td>  
  44.             tr>  
  45.             <tr>  
  46.                 <td>Chinese:td>  
  47.                 <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'CHS'">td>  
  48.   
  49.             tr>  
  50.   
  51.             <tr>  
  52.                 <td>ZipCode:td>  
  53.                 <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'ZipCode'">td>  
  54.   
  55.             tr>  
  56.             <tr>  
  57.                 <td>Number:td>  
  58.                 <td><input name="txtName" class="easyui-validatebox" data-options="required:'true',validType:'Number'">td>  
  59.   
  60.             tr>  
  61.   
  62.         table>  
  63.     div>  
  64.     <style scoped="scoped">  
  65.         .textbox{  
  66.             height:20px;  
  67.             margin:0;  
  68.             padding:0 2px;  
  69.             box-sizing:content-box;  
  70.         }  
  71.     style>  
实现效果如下:

                       
总结

      根据验证表达式,扩展Validatebox默认的验证类型,然后修改Validatebox的属性——validType,实现你想要的任何一种验证。


你可能感兴趣的:(jquery)