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豁然开朗
