06-EasyUI_使用控件ValidateBox验证表单域

淩亂°似流年 2022-09-18 01:51 154阅读 0赞

使用控件ValidateBox验证表单域  
  
源码下载: [EasyUI\_04.zip][EasyUI_04.zip]  
  
步骤:

# 1. 使用 class的方式将 validatebox绑定到<input> #

验证规则为: 必填

注: 必须 基于Form组件, 即必须使用Form组件的validate()方法验证

# 2. 点击提交 #

提交之前(form.submit),会自动调用 Form的validate的方法  
如果 验证不通过, 则不提交. 同时 给出提示 和获取焦点  
截图: 1.jpg  
![SouthEast][]

# 3. missingMessage 和 invalidMessage  #

missingMessage 不填时的提示信息  
invalidMessage 填入的内容非法时的提示信息

# 4. 使用 validType 指定内置的验证规则 #

Validate Rule  
  
The validate rule is defined by using required and validType property,  
here are the rules already implemented:  
email: Match email regex rule.  
url: Match URL regex rule.  
length\[0,100\]: Between x and x characters allowed.

# 5. 扩展验证规则, param参数的使用 #

##  1) 至少n个字符 ##

$.extend($.fn.validatebox.defaults.rules, {
    		// 不少于 n 个字符
    	        minLength: {
    		        validator: function(value, param){
    		        	return value.length >= param[0];
    		        },
    		        message: '至少 {0} 个字符.'
    	        }
    	    });

注: param --> \[3\] , param就是一个json数组

##  2) 两次密码要一致 ##

传个字符串过去, 该字符串加上 $() 即可定位上一个 password的input

$.extend($.fn.validatebox.defaults.rules, {
    		// 两次密码一致
    	        equalPwd: {
    		        validator: function(value, param){
    		        	return value == $(param[0]).val();
    		        },
    		        message: '两次密码不一致.'
    	        } 
    	    });

# 6. 按回车提交表单 #

原理:  
给每个input绑定点击事件,  
如果点击的是回车则调用submit方法(默认会先调用validate方法)

// 点击回车提交(验证所有规则)
    	    loginInputForm.find("input").on('keyup', function(event){
    	    	if (event.keyCode == '13') {
    	    		loginInputForm.submit();
    	    	}
    	    });

# 7. 隐藏的注册界面(补充) #

<div id="regDialog" style="display:none; width:250px;">
    		<form id="regForm" method="post">
    			<table>
    				<tr>
    					<th>用户名</th>
    					
    					<td>
    						<input name="name" type="text"
    							class="easyui-validatebox"
    							required="true"
    						/>
    					</td>
    				</tr>
    				<tr>
    					<th>密码</th>
    					<td>
    						<input name="password" type="password"
    							class="easyui-validatebox"
    							required=true
    							validType="minLength[3]"/>
    					</td>
    				</tr>
    				<tr>
    					<th>重复密码</th>
    					<td>
    						<input name="rePassword" type="password"
    							class="easyui-validatebox"
    							required=true
    							validType="equalPwd['#regForm input[name=password]']"/>
    					</td>
    				</tr>
    			</table>
    		</form>
    	</div>

// 注册界面
    	    // show() 为jQuery的方法,将隐藏的div显示出来
    	    regDialog = $("#regDialog").show().dialog({
    	    	modal: true,
    	    	title : "注册",
    	    	closed : true,
    	    	buttons : [{
    	    		text : "注册",
    	    		handler : function() {
    	    			regForm.submit();
    	    			//alert("点击了注册按钮");
    	    		}
    	    	}],
    	    	onOpen : function() {
    	    		setTimeout(function() {
    	    			regForm.find("input[name=name]").focus();
    	    		}, 1);
    	    	},
    	    	onClose : function() {
    	    		//loginTabs.tabs("select", 0);
    	    	}
    	    });

# 8. 完整网页源码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
      <head>
        <title>login</title>
    	
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
    
        <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
    
    <script type="text/javascript">
    	// 获取项目的URL
    	function getCurProjPath() {
    		var curWwwPath = window.document.location.href;
    		var pathName = window.document.location.pathname;
    		var pos = curWwwPath.indexOf(pathName);
    		var localhostPath = curWwwPath.substring(0, pos);
    		var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    		return (localhostPath + projectName);
    	}
    	//console.info(getCurProjPath());
    </script>	
    <script type="text/javascript" charset="UTF-8">
    	var loginAndRegDialog;
    	var loginInputForm;
    	var regDialog;
    	var regForm;
    	
    	$(function() {
    		
    		loginAndRegDialog = $("#loginAndRegDialog");
    		
    		// 将div渲染程dialog
    		loginAndRegDialog.dialog({
    			closable : false,
    			modal : true,
    			buttons : [ {
    				text : '注册',
    				handler : function() {
    					regDialog.dialog("open");
    					// 错开两个dialog
    				}
    			}, {
    				text : '登陆',
    				handler : function() {
    					// 提交Form
    					loginInputForm.submit();
    				}
    			} ]
    		});
    		
    		// 渲染Form 
    		loginInputForm = $("#loginInputForm").form({
    		    url:"userLoginServlet",
    		    success:function(data){
    		    	console.info(data);
    		    	
    		    	// 注意 data为json格式的字符串,需要转换
    		    	data = $.parseJSON(data);
    
    		    	console.info(data);
    		    	
    		    	if (data && data.success) {	// 成功, 隐藏dialog
    					loginAndRegDialog.dialog('close');
    					$.messager.show({
    						title : "提示",
    						msg : data.msg,
    						timeout:2000,
    					});
    				} else { // 失败, 弹 对话框
    					$.messager.alert('标题',data.msg);
    				}
    		    }			
    		});
    		
    		// ValidateBox, 扩展验证规则
    	    $.extend($.fn.validatebox.defaults.rules, {
    			// 不少于 n 个字符
    	        minLength: {
    		        validator: function(value, param){
    		        	return value.length >= param[0];
    		        },
    		        message: '至少 {0} 个字符.'
    	        },
    			// 两次密码一致
    	        equalPwd: {
    		        validator: function(value, param){
    		        	return value == $(param[0]).val();
    		        },
    		        message: '两次密码不一致.'
    	        } 
    	    });		
    		
    		// 点击回车提交(验证所有规则)
    	    loginInputForm.find("input").on('keyup', function(event){
    	    	if (event.keyCode == '13') {
    	    		loginInputForm.submit();
    	    	}
    	    });
    		
    		// 注册表单
    		regForm = $("#regForm").form({
    		    url:"userRegServlet",
    		    success:function(data){
    		    	console.info(data);
    		    	
    		    	// 注意 data为json格式的字符串,需要转换
    		    	data = $.parseJSON(data);
    
    		    	console.info(data);
    		    	
    		    	if (data && data.success) {	// 成功, 隐藏dialog
    		    		regDialog.dialog('close');
    					$.messager.show({
    						title : "提示",
    						msg : data.msg,
    						timeout:2000,
    					});
    				} else { // 失败, 弹 对话框
    					$.messager.alert('标题',data.msg);
    				}
    		    }			
    		});		
    		
    	    // 注册界面
    	    // show() 为jQuery的方法,将隐藏的div显示出来
    	    regDialog = $("#regDialog").show().dialog({
    	    	modal: true,
    	    	title : "注册",
    	    	closed : true,
    	    	buttons : [{
    	    		text : "注册",
    	    		handler : function() {
    	    			regForm.submit();
    	    			//alert("点击了注册按钮");
    	    		}
    	    	}],
    	    	onOpen : function() {
    	    		setTimeout(function() {
    	    			regForm.find("input[name=name]").focus();
    	    		}, 1);
    	    	},
    	    	onClose : function() {
    	    		//loginTabs.tabs("select", 0);
    	    	}
    	    });
    		
    	});
    </script>
    	<style type="text/css">
    		/* 标签居右  */
    		th{
    			text-align: right;
    		}
    	</style>
      </head>
      
      <body>
      	
    	<div id="regDialog" style="display:none; width:250px;">
    		<form id="regForm" method="post">
    			<table>
    				<tr>
    					<th>用户名</th>
    					
    					<td>
    						<input name="name" type="text"
    							class="easyui-validatebox"
    							required="true"
    						/>
    					</td>
    				</tr>
    				<tr>
    					<th>密码</th>
    					<td>
    						<input name="password" type="password"
    							class="easyui-validatebox"
    							required=true
    							validType="minLength[3]"/>
    					</td>
    				</tr>
    				<tr>
    					<th>重复密码</th>
    					<td>
    						<input name="rePassword" type="password"
    							class="easyui-validatebox"
    							required=true
    							validType="equalPwd['#regForm input[name=password]']"/>
    					</td>
    				</tr>
    			</table>
    		</form>
    	</div>
    	<div id="loginAndRegDialog"
    		title="用户登陆"
    		style="width:260px;height:160px;"	
    	>
    		<form id="loginInputForm" method="post">
    			<table style="text-align:center;">
    				<tr>
    					<th>用户名</th>
    					
    					<td>
    						<input name="name" type="text"
    							class="easyui-validatebox"
    							required="true"
    						/>
    					</td>
    				</tr>
    				<tr>
    					<th>密码</th>
    					<td>
    						<input name="password" type="password"
    							class="easyui-validatebox"
    							required=true
    							validType="minLength[3]"/>
    					</td>
    				</tr>
    				
    			</table>
    		</form>
    	</div>
    	
    	
      </body>
    </html>

[EasyUI_04.zip]: http://download.csdn.net/detail/wuqinfei_cs/6484885
[SouthEast]: /images/20220828/0013a0f1af094c43ad66abd11b145483.png