extjs中regex和vtype表單驗證區別及用法

時間  2019-12-01
標籤 extjs regex vtype 表單 驗證 區別 用法 欄目 HTML 简体版
原文   原文鏈接

extjs中regex和vtype都是用來進行表單驗證的，regex是經過正則表達式對單個輸入控件的內容進行格式驗證，而vtype既能夠對單個控件的輸入格式進行驗證還能對多可控件的內容進行關聯驗證。好比對於兩個日期控件，用regex只能驗證輸入的是否是日期格式，而兩個日期的相對大小關係驗證就無能爲力了，這就須要vtype來完成了。但這並非說vtype比regex正則驗證更強大，由於extjs中默認提供的vtype驗證只有alpha（字母）、alphanum（字母數字）、url（網址）、email（郵件地址）等，這些驗證經過regex也能夠垂手可得的完成，要實現多個控件關聯驗證必需要本身寫代碼。javascript

extjs中regex（正則）用法：java

      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地址app

匹配中文字符的正則表達式： [\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用來顯示驗證失敗時的提示信息。在此就直接引用別人寫的了：lua

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

最近公司開發項目在用ExtJs，碰到驗證的就大概的總結了一些經常使用的驗證。自定義的驗證主要有兩種方式：一種是單字段的自定義驗證，另外一種是多字段間的驗證。對於單字段的驗證主要經過regex配置項指定自定義正則表達式進行驗證，而字段多的驗證能夠經過字定義VType類型進行驗證支持。spa

 

[javascript]  view plain copy
 
  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，基本上是用正在表達式的，方便作驗證了。.net

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程