Extjs复习笔记（十二）--form验证

lingyibin · 发表于 2013-2-8 00:39:01

验证。。。
1、不允许放空（当用户不填值时就提交的话，就用红线画出。。。）
实现方法很简单，在items中的输入框定义时加上下面这句话就行了。

allowBlank:false

2、重输密码验证（如果两次密码不一致就在下面画红线）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><title>注册</title><script type="text/javascript" src="../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript" src="../build/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">Ext.onReady(function(){var myForm = new Ext.form.FormPanel({title:"简单的用户注册",width:320,layout:"form",//labelWidth:45,plain:true,frame:true,renderTo:"login_field", collapsible:true, autoHeight:true,//height:120,buttonAlign:"center",defaults:{xtype:"textfield"}, style:"text-align:left",items:[{ xtype:"fieldset", title:"注册框", collapsible:true, autoHeight:true, width:300, defaults:{width:150}, defaultType:"textfield", style:"text-align:left", items:[ { fieldLabel:"用户帐号", name:"name", id:"name", allowBlank:false, blankText:"用户名不能为空！", anchor:"90%",selectOnFocus : true }, { fieldLabel:"用户密码", inputType:"password", id:"psw", allowBlank:false, blankText:"用户密码不能为空！", anchor:"90%",selectOnFocus : true }, { fieldLabel:"重输密码", inputType:"password", //输入的格式是。。。。。。 id:"psw2", vtype:"pswCheck",//这是一个验证用的方程式，在下面定义vtypeText:"注意，两次输入的密码不一样",confirmTo:"psw", //和上面的psw输入框比较，这个属性是我们自己定义的，下面用到 allowBlank:false, blankText:"重输密码不能为空！", anchor:"90%",selectOnFocus : true //点中的时候全选 }, { fieldLabel:"用户身份", xtype:"combo", id:"status_id", width:145, editable:false, store:[['0','A类读者'],['1','B类读者']],//数据源是一个数组 hiddenName:'status',//这里千万不要与id同名，不然服务器接收的值异常。 emptyText:"请选择登录身份", allowBlank:false, blankText:"用身份不能为空，请选择！", triggerAction:"all"//每次选中一项，之后再选也会将所有列表显示出来。 } ] }],buttons:[ { xtype:"button", text : '注册',}]});//自动验证函数Ext.apply(Ext.form.VTypes,{"pswCheck":function(value,field){//value指这里的文本框值，field指这个文本框组件if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用//来保存另外的组件的id值var psw = Ext.get(field.confirmTo);return (value == psw.getValue());}}});});</script></head><body><div id="login_field" style="margin:50px"></div></body></html> 3、用正则表达式来验证
关于正则表达式的知识，我以前写过一篇相关博客，过会儿将转载过来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><title>注册</title><script type="text/javascript" src="../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){var myForm = new Ext.form.FormPanel({title:"输入用户信息",width:320,layout:"form",plain:true,frame:true, collapsible:true, autoHeight:true,renderTo:"login_field",buttonAlign:"center",defaults:{xtype:"textfield"}, style:"text-align:left",items:[{ xtype:"fieldset", title:"请输入", collapsible:true, autoHeight:true, width:300, defaults:{width:150}, defaultType:"textfield", style:"text-align:left", items:[ {fieldLabel : "用户ID",id : "readerId",vtype:"idTest",vtypeText:"输入的ID有误，请重新输入",width:(window.screen.width-300)*0.16,itemCls:'float-left',//向左浮动clearCls:'allow-float',//允许浮动selectOnFocus : true,//得到焦点时自动选择文本allowBlank : true, blankText:"用户ID不能为空！", //anchor:"90%", //有了width之后，这句话就不要了selectOnFocus : true }, {fieldLabel : '年龄',id : 'age',vtype:"ageTest",vtypeText:"输入的年龄不合法或不太现实",width:(window.screen.width-300)*0.16,itemCls:'float-left',//向左浮动//clearCls:'allow-float',//允许浮动selectOnFocus : true,//得到焦点时自动选择文本allowBlank : true }, {fieldLabel : '电话',id : 'phone',vtype:"phoneTest",vtypeText:"输入号码有误，请仔细检查后重新输入！",width:(window.screen.width-300)*0.16,itemCls:'float-left',//向左浮动clearCls:'allow-float',//允许浮动selectOnFocus : true,//得到焦点时自动选择文本allowBlank : true} ] }],buttons:[ { xtype:"button", text : '注册',}]});//自动验证函数Ext.apply(Ext.form.VTypes,{idTest:function(value){if(/^\d+$/.test(value)){ //正则表达式在这里用到，用法如左边所示return true;}else{return false;}},ageTest:function(value){if(/^\d+$/.test(value)){var _age = parseInt(value);if(_age<200) {return true;}else {return false;}}},phoneTest:function(value){if(/^\d{3}$/.test(value)){return true;}else{return false;}}});});</script></head><body><div id="login_field" style="margin:50px"></div></body></html>

		自动登录	找回密码
密码			立即注册