Extjs复习笔记(十二)--form验证

验证。。。

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值