`
lingyibin
  • 浏览: 196362 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

EXT正则表达式JavaScriptCSSXHTML 
阅读更多

验证。。。

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>
  • 大小: 75.4 KB
  • 大小: 5.8 KB
分享到：
| Extjs复习笔记（十一）--换肤
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...

    ExtJs常用布局--layout详解实例代码

    ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接：https://lucky16.iteye.com/blog/1490278

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    Extjs学习笔记(-):ComboBox联动

    本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果，即一个ComboBox的选择会触发另一个ComboBox的数据更新，以此来提供更丰富的交互体验。通过源码解析和工具应用，我们将了解如何构建和实现这种联动效果。 ...

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    Extjs复习笔记（十八）-- TreePanel

    在本篇ExtJS复习笔记中，我们聚焦于TreePanel组件，它是ExtJS库中的一个核心组件，用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型，还支持交互操作，如节点的选择、展开与折叠等。在...

    extjs2----关于extjs 的使用，操作

    5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、ComboBox、DateField等）的使用及验证规则。 6. **Ajax交互**：讲解如何利用Ext.Ajax进行异步数据请求，实现服务器端数据的增删查改。 ...

    Extjs复习笔记（十一）--换肤

    在EXTJS框架中，换肤是一项重要的功能，它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制，以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...

    Extjs复习笔记（二十）-- tree和grid结合

    在"Extjs复习笔记（二十）-- tree和grid结合"这篇博文中，博主探讨了如何在EXTJS中实现树形视图（Tree）与网格视图（Grid）的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据，例如文件系统、组织架构等。...

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    Extjs复习笔记（十七）-- 给grid里面的内容分组

    本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组，帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类，这样可以更清晰地组织和展示数据。这在处理大量数据时...

    Extjs复习笔记（十五）-- JsonReader

    在“Extjs复习笔记（十五）-- JsonReader”这篇博文中，博主探讨了ExtJS中的JsonReader，这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包（Ext.data）的一部分，用于从服务器获取JSON格式的数据，...

    extJs例子-------

    ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子

    extjs-v7.0-cmd

    extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    在ExtJS中，Model负责数据的存储和验证，View负责显示用户界面，Controller作为两者之间的桥梁，处理事件并协调它们的工作。在这个例子中，我们可能会看到多个Controller、Model和View类，每个都对应着仪表盘的某个...

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4...

Magicbox
Global site tag (gtag.js) - Google Analytics