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

   

  

 

你可能感兴趣的:(ext,prototype)