Ext的Form提交验证例子

 

 

 

 

主要代码：

          Ext.onReady(function(){

Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='under';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)

//先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
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;
    }
});

var form = new Ext.FormPanel({
           
       width:350,
       frame:true,//圆角和浅蓝色背景
       renderTo:"show",//呈现
       monitorValid:true,
       title:"注册",
       bodyStyle:"padding:5px 5px 0",
       items:[
          {
            xtype:"fieldset",
            //checkboxToggle:true,//关键参数，其他和以前的一样
            checkboxName:"zhuce",
            title:"用户信息",
            defaultType:'textfield',
            width:330,
            autoHeight:true,//使自适应展开排版
            submit: function(){
                    this.getEl().dom.action = 'index.html',
                    this.getEl().dom.method='POST',
                    this.getEl().dom.submit();
              },
            items:[{
                    id:'username',
                    fieldLabel:"用户名",
                    allowBlank:false,//不允许为空
                    blankText:"不能为空，请填写",//错误提示信息
                    name:"user",
                    anchor:"90%"//330px-labelWidth剩下的宽度的95%，留下5%作为后面提到的验证错误提示
            },
            {
                    id:"pass1",
                    fieldLabel:"密码",
                    inputType:"password",//密码文本
                    allowBlank:false,//不允许为空
                    blankText:"不能为空，请填写",//错误提示信息
                    anchor:"90%"
            },{
                    id:"pass2",
                    fieldLabel:"确认密码",
                    vtype:"password",//自定义的验证类型
                    inputType:"password",//密码文本
                    vtypeText:"两次密码不一致！",
                    confirmTo:"pass1",//要比较的另外一个的组件的id
                    anchor:"90%"
               }, {
                    id:"email",
                    xtype:"textfield",
                    fieldLabel:"E-mail",
                    vtype:"email",//email格式验证
                    vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
                    anchor:"90%"
               },{
                    id:"time",
                    xtype:"timefield",
                    fieldLabel:"注册时间",
                    allowBlank:false,//不允许为空
                    blankText:"不能为空，请填写",//错误提示信息，默认为
                    anchor:"90%"
               },{
                    id:"date",
                    xtype:"datefield",
                    fieldLabel:"生日",
                    allowBlank:false,//不允许为空
                    blankText:"不能为空，请填写",//错误提示信息
                    anchor:"90%"
               }]
            }
                   ],
                buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
    });

function login(){
         form.form.submit();//提交
   }
function reset(){
         form.form.reset();//取消
   }
   
});




/*

//form验证中vtype的默认支持类型
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是"langsin@gmail.com"
4.url//url格式验证，要求的格式是http://www.langsin.com

5.如果你想绑定验证，在form表单添加参数monitorValid:true,然后在按钮配置参数中添加formBind：true，如
       buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
则只有所有的填写字段都满足条件时，"确定"方可提交！

*/