extjs中regex和vtype表单验证区别及用法

extjs中regex和vtype都是用来进行表单验证的，regex是通过正则表达式对单个输入控件的内容进行格式验证，而vtype既可以对单个控件的输入格式进行验证还能对多可控件的内容进行关联验证。比如对于两个日期控件，用regex只能验证输入的是不是日期格式，而两个日期的相对大小关系验证就无能为力了，这就需要vtype来完成了。但这并不是说vtype比regex正则验证更强大，因为extjs中默认提供的vtype验证只有alpha（字母）、alphanum（字母数字）、url（网址）、email（邮件地址）等，这些验证通过regex也可以轻而易举的完成，要实现多个控件关联验证必须要自己写代码。

extjs中regex（正则）用法：

      extjs中与正则验证相关的属性是regex和regexText。regex用来输入正则表达式，regexText则是在验证失败时的提示信息。正则验证很简单，直接在regex属性中输入正则格式即可，下面是extjs中常用的正则表达式

 
使用时复制双引号之前的内容即可 
例如："^\d+$"  //非负整数（正整数 + 0）        程序中就是/^\d+$/ 
 
"^\d+$"  //非负整数（正整数 + 0）  "^[0-9]*[1-9][0-9]*$"  //正整数  
"^((-\d+)|(0+))$"  //非正整数（负整数 + 0）  "^-[0-9]*[1-9][0-9]*$"  //负整数  "^-?\d+$"    //整数  
"^\d+(\.\d+)?$"  //非负浮点数（正浮点数 + 0）  
"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$"  //正浮点数  "^((-\d+(\.\d+)?)|(0+(\.0+)?))$"  //非正浮点数（负浮点数 + 0）  
"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"  //负浮点数  "^(-?\d+)(\.\d+)?$"  //浮点数  
"^[A-Za-z]+$"  //由26个英文字母组成的字符串  "^[A-Z]+$"  //由26个英文字母的大写组成的字符串  "^[a-z]+$"  //由26个英文字母的小写组成的字符串  
"^[A-Za-z0-9]+$"  //由数字和26个英文字母组成的字符串  "^\w+$"  //由数字、26个英文字母或者下划线组成的字符串  
"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$"    //email地址  "^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$"  //url  
/^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1]))$/ // 年-月-日  /^((0([1-9]{1}))|(1[1|2]))/(([0-2]([1-9]{1}))|(3[0|1]))/(d{2}|d{4})$/ // 月/日/年  
"^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" //Emil  "(d+-)?(d{4}-?d{7}|d{3}-?d{8}|^d{7,8})(-d+)?" //电话号码  
"^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$" //IP地址

匹配中文字符的正则表达式： [\u4e00-\u9fa5]  匹配双字节字符(包括汉字在内)：[^\x00-\xff]  
匹配空行的正则表达式：\n[\s| ]*\r  
匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/  匹配首尾空格的正则表达式：(^\s*)|(\s*$)  
匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*  
匹配网址URL的正则表达式：^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$  匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$  
匹配国内电话号码：(\d{3}-|\d{4}-)?(\d{8}|\d{7})?  匹配腾讯QQ号：^[1-9]*[1-9][0-9]*$

 

vtype用法：extjs作用有vtype和vtypeText两个属性。vtype用来输入验证函数名称（要自己写），vtypeText用来显示验证失败时的提示信息。在此就直接引用别人写的了：

http://blog.csdn.net/xzknet/article/details/6541922

最近公司开发项目在用ExtJs，碰到验证的就大概的总结了一些常用的验证。自定义的验证主要有两种方式：一种是单字段的自定义验证，另一种是多字段间的验证。对于单字段的验证主要通过regex配置项指定自定义正则表达式进行验证，而字段多的验证可以通过字定义VType类型进行验证支持。

 

[javascript] view plaincopy
 
  1. Ext.apply(Ext.form.VTypes,     
  2. {    
  3.     daterange: function(val, field)     
  4.     {    
  5.         var date = field.parseDate(val);    
  6.         
  7.         // We need to force the picker to update values to recaluate the disabled dates display    
  8.         var dispUpd = function(picker)     
  9.         {    
  10.             var ad = picker.activeDate;    
  11.             picker.activeDate = null;    
  12.             picker.update(ad);    
  13.         };    
  14.         
  15.         if (field.startDateField)     
  16.         {    
  17.             var sd = Ext.getCmp(field.startDateField);    
  18.             sd.maxValue = date;    
  19.             if (sd.menu && sd.menu.picker)     
  20.             {    
  21.                 sd.menu.picker.maxDate = date;    
  22.                 dispUpd(sd.menu.picker);    
  23.             }    
  24.         }     
  25.         else if (field.endDateField)     
  26.         {    
  27.             var ed = Ext.getCmp(field.endDateField);    
  28.             ed.minValue = date;    
  29.             if (ed.menu && ed.menu.picker)     
  30.             {    
  31.                 ed.menu.picker.minDate = date;    
  32.                 dispUpd(ed.menu.picker);    
  33.             }    
  34.         }    
  35.         return true;    
  36.     },    
  37.       
  38.   password: function(val, field)     
  39.   {    
  40.         if (field.initialPassField)     
  41.         {    
  42.             var pwd = Ext.getCmp(field.initialPassField);    
  43.             return (val == pwd.getValue());     
  44.         }    
  45.         return true;    
  46.   },    
  47.   passwordText: '两次输入的密码不一致！',    
  48.       
  49.   chinese:function(val,field)    
  50.   {    
  51.         var reg = /^[/u4e00-/u9fa5]+$/i;    
  52.         if(!reg.test(val))    
  53.         {    
  54.             return false;    
  55.         }    
  56.         return true;    
  57.   },    
  58.   chineseText:'请输入中文',    
  59.       
  60.   age:function(val,field)    
  61.   {    
  62.         try    
  63.         {    
  64.             if(parseInt(val) >= 18 && parseInt(val) <= 100)    
  65.                 return true;    
  66.             return false;    
  67.         }    
  68.         catch(err)     
  69.         {    
  70.             return false;    
  71.         }    
  72.   },    
  73.   ageText:'年龄输入有误',    
  74.       
  75.   alphanum:function(val,field)    
  76.   {    
  77.         try    
  78.         {    
  79.             if(!//W/.test(val))    
  80.                 return true;    
  81.             return false;    
  82.         }    
  83.         catch(e)    
  84.         {    
  85.             return false;    
  86.         }    
  87.   },    
  88.   alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',    
  89.       
  90.   url:function(val,field)    
  91.   {    
  92.         try    
  93.         {    
  94.             if(/^(http|https|ftp):////(([A-Z0-9][A-Z0-9_-]*)(/.[A-Z0-9][A-Z0-9_-]*)+)(:(/d+))?//?/i.test(val))    
  95.                 return true;    
  96.             return false;    
  97.         }    
  98.         catch(e)    
  99.         {    
  100.             return false;    
  101.         }    
  102.   },    
  103.   urlText:'请输入有效的URL地址.',    
  104.       
  105.   max:function(val,field)    
  106.   {    
  107.         try    
  108.         {    
  109.             if(parseFloat(val) <= parseFloat(field.max))    
  110.                 return true;    
  111.             return false;    
  112.         }    
  113.         catch(e)    
  114.         {    
  115.             return false;    
  116.         }    
  117.   },    
  118.   maxText:'超过最大值',    
  119.       
  120.   min:function(val,field)    
  121.   {    
  122.         try    
  123.         {    
  124.             if(parseFloat(val) >= parseFloat(field.min))    
  125.                 return true;    
  126.             return false;    
  127.         }    
  128.         catch(e)    
  129.         {    
  130.             return false;    
  131.         }    
  132.   },    
  133.   minText:'小于最小值',    
  134.           
  135.   datecn:function(val,field)    
  136.   {    
  137.         try    
  138.         {    
  139.             var regex = /^(/d{4})-(/d{2})-(/d{2})$/;    
  140.             if(!regex.test(val)) return false;    
  141.             var d = new Date(val.replace(regex, '$1/$2/$3'));    
  142.             return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());    
  143.         }    
  144.         catch(e)    
  145.         {    
  146.             return false;    
  147.         }    
  148.   },    
  149.   datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',    
  150.       
  151.   integer:function(val,field)    
  152.   {    
  153.         try    
  154.         {    
  155.             if(/^[-+]?[/d]+$/.test(val))    
  156.                 return true;    
  157.             return false;    
  158.         }    
  159.         catch(e)    
  160.         {    
  161.             return false;    
  162.         }    
  163.   },    
  164.   integerText:'请输入正确的整数',    
  165.       
  166.   minlength:function(val,field)    
  167.   {    
  168.         try    
  169.         {    
  170.             if(val.length >= parseInt(field.minlen))    
  171.                 return true;    
  172.             return false    
  173.         }    
  174.         catch(e)    
  175.         {    
  176.             return false;    
  177.         }    
  178.   },    
  179.   minlengthText:'长度过小',    
  180.       
  181.   maxlength:function(val,field)    
  182.   {    
  183.      try    
  184.      {    
  185.         if(val.length <= parseInt(field.maxlen))    
  186.             return true;    
  187.         return false;    
  188.      }    
  189.      catch(e)    
  190.      {    
  191.         return false;    
  192.      }    
  193.   },    
  194.   maxlengthText:'长度过大',    
  195.       
  196.   ip:function(val,field)    
  197.   {    
  198.         try    
  199.         {    
  200.             if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))    
  201.                 return true;    
  202.             return false;    
  203.         }    
  204.         catch(e)    
  205.         {    
  206.             return false;    
  207.         }    
  208.   },    
  209.   ipText:'请输入正确的IP地址',    
  210.       
  211.   phone:function(val,field)    
  212.   {    
  213.         try    
  214.         {    
  215.             if(/^((0[1-9]{3})?(0[12][0-9])?[-])?/d{6,8}$/.test(val))    
  216.                 return true;    
  217.             return false;    
  218.         }    
  219.         catch(e)    
  220.         {    
  221.             return false;    
  222.         }    
  223.   },    
  224.   phoneText:'请输入正确的电话号码,如:0920-29392929',    
  225.       
  226.   mobilephone:function(val,field)    
  227.   {    
  228.         try    
  229.         {    
  230.             if(/(^0?[1][35][0-9]{9}$)/.test(val))    
  231.                 return true;    
  232.             return false;    
  233.         }    
  234.         catch(e)    
  235.         {    
  236.             return false;    
  237.         }    
  238.   },    
  239.   mobilephoneText:'请输入正确的手机号码',    
  240.       
  241.   alpha:function(val,field)    
  242.   {    
  243.         try    
  244.         {    
  245.             if( /^[a-zA-Z]+$/.test(val))    
  246.                 return true;    
  247.             return false;    
  248.         }    
  249.         catch(e)    
  250.         {    
  251.             return false;    
  252.         }    
  253.   },    
  254.   alphaText:'请输入英文字母'    
  255. });    

 

 

 

 

 

另外一种方式扩展一些VType，基本上是用正在表达式的，方便做验证了。

 

posted @ 2014-04-05 14:47  三哥写代码  阅读(1405)  评论(0)  编辑  收藏  举报