ExtJS小试牛刀之表单验证
?????? 对ExtJS基础稍微有所了解的人都知道，表单验证肯定需要到FormPanel了，那么FormPanel首先他是继承自Ext.Panel的，其他的如TreePanel,GridPanel,TabPanel等也是继承自Ext.Panel的,今天要说的是表单验证,为什么要用ExtJs的表单验证呢，自己手写JS代码也可以完成啊，因为Ext早就帮我们做好了，我只是拿过来用就可以了，写JS得多少行代码啊
??? 闲话少说，在验证之前，我不得不提两个小知识点：
第一点：
????? //大家在很多的extjs代码中都看到了这两个，他们都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)
???//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示
? ?//大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）{}中）
第二点：
?? //空验证的两个参数
? 1.allowBlank:false//false则不能为空，默认为true
? 2.blankText:string//当为空时的错误提示信息
具体代码如下
var form1 = new Ext.form.FormPanel({ width:350, frame:true, renderTo:"form1", labelWidth:80, title:"FormPanel", bodyStyle:"padding:5px 5px 0", defaults:{width:150,xtype:"textfield"}, //先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字） //配置items参数 items:[ { xtype:"textfield", allowBlank:false, fieldLabel:"邮箱", vtype:"email",//email格式验证 blankText:"不能为空，请填写", vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了 id:"blanktest", anchor:"90%" }, { fieldLabel:"密码", inputType:"password", id:"pass1", allowBlank:false, blankText:'请输入密码', anchor:"90%" }, { fieldLabel:"确认密码", inputType:"password", id:"pass2", vtype:"password",//自定义的验证类型 vtypeText:"两次密码不一致！", confirmTo:"pass1",//要比较的另外一个的组件的id anchor:"90%" } ], buttons:[{text:'提交'},{text:'取消'}] }); Ext.apply(Ext.form.VTypes,{ password:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思 if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值 return (val==pwd.getValue()); } return true; } }); ??
?