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