extjs4 表单验证自定义
extjs4 在验证上面支持的也特别好,他可以使用自带的格式验证,也可以自定义验证
比如:正则验证,密码重复填写对比验证,以及 调用后台方法验证,下面将验证方法统一写出以供参考
function loginNameValidator(value, userId){
	/********** 登录名唯一验证 **********/
	var flag = true;
	var parameters = {
		"loginUser.userName": value,
		"loginUser.userId": userId
	}
	Ext.Ajax.request({
		url: "dosomething",
		method: "post",
		params: parameters,
		async: false,//必须为同步
		success: function(response, config){//message:true 验证成功,message:false 验证失败
			var resultJson = Ext.JSON.decode(response.responseText);
			flag = resultJson.message;
			console.log(flag);
		}
	});
	return flag;
}
Ext.onReady(function() {
	var insertUserForm = Ext.create('Ext.form.Panel', {
		bodyPadding : 5,
		width : 400,
		height: 300,
		url : 'javaScript:void(0)',
		bodyPadding: 20,
		layout : 'anchor',
		buttonAlign : 'center',
		defaultType : 'textfield',
		renderTo: Ext.getBody(),
		defaults: {
			anchor: '100%'
		},
		items : [
		{
			fieldLabel : '登录名',
			labelWidth: 60,
			name : 'userName',
			allowBlank : false,
			blankText : "登录名不能为空",
			regex: /^[A-Za-z0-9]{3,12}$/,
			regexText: "只能为3-12的位字母或数字",
			validateOnChange: false,  //失去焦点时才进行验证
			validator: function(value){
				var userIdField = Ext.get("userId");
				if(userIdField != null){
					var userId = userIdField.getValue();
					var result = loginNameValidator(value,userId);
					return result;
				}
			}
		}, {
			fieldLabel : '密   码',
			labelWidth: 60,
			name : 'password',
			inputType: 'password',
			allowBlank : false,
			blankText : '密码不能为空',
			regex : /^[\w@#]{4,15}$/,
			regexText:"密码为4-15位的字母数字@#_等字符"
		},{
			fieldLabel : '确认密码',
			labelWidth: 60,
			inputType: 'password',
			name : 'confirmPassword',
			allowBlank : false,
			validator: function(value){
				var password = this.previousSibling().value;
				if(value != password){
					return '两次输入的密码不一致';
				}else{
					return true;
				}
			}
		},{//userId 隐藏域
			id: "userId",
			//fieldLabel: "用户ID",
			hidden: false,
			name: "userId"
		}],
		buttons : [{
			text : '重置',
			handler : function() {
				this.up('form').getForm().reset();
			}
		}, {
			text : '保存',
			formBind : true,
			disabled : true,
			handler : function() {
				var form = this.up('form').getForm();
				if (form.isValid()) {
					form.submit( {
						success : function(form, action) {
							Ext.Msg.alert('保存成功', action.result.msg);
						},
						failure : function(form, action) {
							Ext.Msg.alert('操作失败', action.result.msg);
						}
					});
				}
			}
		}]
	});
});
													
											extjs4 表单验证自定义的更多相关文章
- atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证
		atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表 ... 
- jQuery Validate 表单验证插件----自定义一个验证方法
		一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ... 
- jQuery Validate 表单验证插件----自定义校验结果样式
		一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ... 
- easyui 表单验证validatetype——支持自定义验证
		easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: 代码 Code highlighting produced by Actipro C ... 
- layui 自定义表单验证的几个实例
		*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ... 
- python26:自定义form表单验证
		一.自定义Form的原理 1.1 各种form表单验证比较 只有python提供了form表单验证,其他的都没有提供.django提供的功能还不够强大.最强大的是微软的ASP.NET!我们可以自己写一 ... 
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)
		1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({o ... 
- element自定义表单验证
		element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ... 
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
		一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ... 
随机推荐
- LeetCode刷题------------------------------LeetCode使用介绍
			临近毕业了,对技术有种热爱的我也快步入码农行业了,以前虽然在学校的ACM学习过一些算法,什么大数的阶乘,dp,背包等,但是现在早就忘在脑袋后了,哈哈,原谅我是一枚菜鸡,为了锻炼编程能力还是去刷刷Lee ... 
- java虚拟机-程序计数器PC Register
			什么是程序计数器? 程序计数器是一块 较小 的内存空间,它可以看做是当前线程所执行的字节码的 行号指示器 :在虚拟机的概念模型里(仅仅是概念模型,各种虚拟机可能会通过一些更高效的方式去实现),字节码解 ... 
- ZOJ 3963:Heap Partition(贪心+set+并查集)
			http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3963 题意:给出一个n个数的序列,可以在其中找一个子序列建堆,并且堆中的父 ... 
- myecliese加大内存
			加大内存代码 : -Xms512m -Xmx1024m -XX:PermSize=256M -XX:MaxPermSize=1024m 
- GoLand Active Code
			56ZS5PQ1RF-eyJsaWNlbnNlSWQiOiI1NlpTNVBRMVJGIiwibGljZW5zZWVOYW1lIjoi5q2j54mI5o6I5p2DIC4iLCJhc3NpZ25lZ ... 
- intel FPGA CLKn pin 是否能直接进PLL?
			原创 by DeeZeng FPGA的时钟需要从专用的时钟管脚输入,那CLKn 作为Single-End时钟pin时是否能直接进 PLL呢? 通过查看对应FPGA型号的手册,得出以下结论 1. Cyc ... 
- kuangbin专题 专题二 搜索进阶 Nightmare Ⅱ HDU - 3085
			题目链接:https://vjudge.net/problem/HDU-3085 题意:有两个鬼和两个人和墙,鬼先走,人再走,鬼每走过的地方都会复制一个新鬼, 但新鬼只能等待旧鬼走完一次行程之后,下一 ... 
- TreeMap原理实现及常用方法
			目录 一. TreeMap概述 二. 红黑树回顾 三. TreeMap构造 四. put方法 五. get 方法 六. remove方法 七. 遍历 八. 总结 前面我们分别讲了Map接口的两个实现类 ... 
- springboot项目快速构建
			1. 问题描述 springboot的面世,成为Java开发者的一大福音,大大提升了开发的效率,其实springboot只是在maven的基础上,对已有的maven gav进行了封装而已,今天用最简单 ... 
- Oracle RAC运维所遇问题记录一
			Oracle11gR2,版本11.2.0.4集群测试环境运行正常 主机名:rac1,rac2 hosts文件: # Public172.17.188.12 rac1172.17.188.13 rac2 ... 
