Extjs4.1 vtype验证
生活随笔
收集整理的這篇文章主要介紹了
Extjs4.1 vtype验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
extjs有自己的驗證方式，當然驗證都是通過客戶端驗證的，不過就客戶端驗證而言，extjs已經做的非常強大和靈活。既有其本身的內置驗證方式，你也可以自定義驗證方法。具體效果如下：
但使用時有幾點也需要注意：
1.要使懸浮提示起作用，需要使用? Ext.QuickTips.init();配置。
2.懸浮提示框的顯示位置，可以用? Ext.form.Field.prototype.msgTarget="qtip"，配置?Ext.form.Field.prototype.msgTarget的值有qtip title under side幾種。具體效果可以自己嘗試。
3.直接可以使用驗證vtype有email，url，字母，字母和數字，maxLength,minLength,必填
4.使用vtype中的 ? 自定義Mask?可以限制鍵盤的使用，mask的值為正則表達式，比如定義手機號碼時可以用phoneMask:/[0-9]/限制鍵盤只能輸入數字
5.使用Ext.apply(Ext.form.field.Vtypes,{})可以定義自己的vtype類型，并且定義過程很靈活，可以傳參數，參數信息可以在定義的字段中直接使用，更多的會使用正則
頁面效果的源代碼如下：
View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <link href="../Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="../Ext/ext-all.js" type="text/javascript"></script> 7 <script src="../Ext/bootstrap.js" type="text/javascript"></script> 8 <script src="../Ext/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 Ext.onReady(function () { 11 12 Ext.QuickTips.init(); 13 14 Ext.form.Field.prototype.msgTarget="qtip";//qtip title under side 15 16 Ext.apply(Ext.form.field.VTypes, { 17 18 //通過配置項設置，比如maxAge 19 age: function (value, field) { 20 if (parseFloat(value) > field.maxAge) { 21 return false; 22 } 23 else { 24 return true; 25 } 26 }, 27 ageText:"請輸入正確的年齡", 28 29 //通過配置，可以加參數之類的 30 repeatPassword:function(value,field){ 31 var cmp=Ext.getCmp(field.compareCtrol.controlid).getValue(); 32 return value==cmp; 33 }, 34 repeatPasswordText:"兩次輸入不一致", 35 36 //使用正則表達式 37 phone:function(value,field){ 38 var regEx=/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/; 39 return regEx.test(value); 40 }, 41 phoneText:"輸入正確的電話號碼", 42 phoneMask:/[0-9-]/ //限制鍵盤的輸入 43 }); 44 45 46 47 var form = Ext.create("Ext.form.Panel", { 48 title: "form驗證問題測試", 49 width: 320, 50 height: 500, 51 renderTo: Ext.getBody(), 52 padding: "10", 53 bodyStyle: "padding-top:10px;padding-left:5px", 54 items: [{ 55 xtype:"fieldset", 56 title:"系統自帶驗證", 57 padding:"10", 58 margin:"10", 59 items:[{ 60 fieldLabel: "必須輸入", 61 xtype: "textfield", 62 labelWidth: 80, 63 width: 220, 64 allowBlank: false, 65 blankText: "輸入項不能為空", 66 },{ 67 fieldLabel: "只輸入字母", 68 xtype: "textfield", 69 labelWidth: 80, 70 width: 220, 71 vtype:"alpha", 72 }, { 73 fieldLabel: "字母和數字", 74 xtype: "textfield", 75 labelWidth: 80, 76 width: 220, 77 vtype:"alphanum" 78 },{ 79 fieldLabel: "Email", 80 xtype: "textfield", 81 labelWidth: 80, 82 width: 220, 83 vtype:"email", 84 emailText:"輸入正確的email" 85 },{ 86 fieldLabel: "Url", 87 xtype: "textfield", 88 labelWidth: 80, 89 width: 220, 90 vtype:"url", 91 emailText:"輸入正確的Url" 92 },{ 93 fieldLabel: "最大最小長度", 94 xtype: "textfield", 95 labelWidth: 80, 96 width: 220, 97 maxLength:8, 98 maxLengthText:"最大長度不超過8", 99 minLength:4, 100 minLengthText:"最小長度不小于4" 101 }] 102 },{ 103 xtype:"fieldset", 104 title:"使用vtype擴展", 105 padding:"10", 106 margin:"10", 107 items:[{ 108 fieldLabel: "密碼", 109 id:"pwd", 110 xtype: "textfield", 111 inputType:"password", 112 labelWidth: 80, 113 width: 220 114 },{ 115 fieldLabel: "重復密碼", 116 xtype: "textfield", 117 inputType:"password", 118 labelWidth: 80, 119 width: 220, 120 vtype:"repeatPassword", 121 compareCtrol:{controlid:"pwd"} 122 },{ 123 fieldLabel: "年齡", 124 xtype: "numberfield", 125 labelWidth: 80, 126 width: 220, 127 vtype: "age", 128 maxAge:100, 129 hideTrigger: true 130 },{ 131 fieldLabel: "電話", 132 xtype: "textfield", 133 labelWidth: 80, 134 width: 220, 135 vtype: "phone" 136 }] 137 }], 138 buttonAlign: "right", 139 buttons: [{ 140 text: "注冊", 141 handler: function () { 142 var form = this.up("form").getForm(); 143 if (form.isValid()) { 144 form.submit({ 145 url: "", 146 success: function (form, action) { 147 148 }, 149 failture: function (form, action) { 150 151 } 152 }); 153 } 154 } 155 }, { 156 text: "取消" 157 }] 158 }); 159 }); 160 </script> 161 </head> 162 <body> 163 164 </body> 165 </html>希望看后你對vtype豁然開朗
?
轉載于:https://www.cnblogs.com/mayantao/archive/2013/04/23/3038820.html
總結
以上是生活随笔為你收集整理的Extjs4.1 vtype验证的全部內容，希望文章能夠幫你解決所遇到的問題。
