zoukankan      html  css  js  c++  java
  • 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);
    						}
    					});
    				}
    			}
    		}]
    	});
    });
    	


  • 相关阅读:
    c++ string 和wstring 之间的互相转换函数
    Duilib教程-自动布局3-分隔条
    Duilib教程-自动布局2
    Duilib教程-自动布局1
    Duilib教程-非DUI控件
    Duilib教程-控件练习
    Duilib教程-HelloDuilib及DuiDesigner的简单使用
    Duilib教程-简单介绍
    把資源加载到内存中 BMP 出错
    LoadLibrary失敗,GetLastError 返回127錯誤
  • 原文地址:https://www.cnblogs.com/moonciki/p/8145848.html
Copyright © 2011-2022 走看看