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);
						}
					});
				}
			}
		}]
	});
});
	

转载于:https://www.cnblogs.com/moonciki/p/8145848.html