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;
    }
   });