ext的vtype自动验证

本文介绍如何使用ExtJS的vtype属性进行表单验证,包括常见格式验证(如email和URL),以及如何通过自定义函数实现密码一致性验证。

用vtype格式进行简单的验证。
在此举邮件验证的例子,重写上面代码的items配置:

items:[
               {fieldLabel:"不能为空",
                vtype:"email",//email格式验证
                vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
                id:"blanktest",
                anchor:"90%"
               }

你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:

//form验证中vtype的默认支持类型
1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
3.email//email验证,要求的格式是"
langsin@gmail.com"
4.url//url格式验证,要求的格式是
http://www.langsin.com
3.确认密码验证(高级自定义验证)
前面的验证都是extjs已经提供的验证,我们也可以自定义验证函数,比上面要复杂点了。我们一起做一个密码确认的例子。
我们修改前面的代码:

//先用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;
    }
});
//配置items参数
items:[{fieldLabel:"密码",
                id:"pass1",
                anchor:"90%"
               },{
                fieldLabel:"确认密码",
                id:"pass2",
                vtype:"password",//自定义的验证类型
                  vtypeText:"两次密码不一致!",
                  confirmTo:"pass1",//要比较的另外一个的组件的id
                anchor:"90%"
               }

 



 

 



 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值