jQuery-EasyUI学习（七）validatebox验证框

最新推荐文章于 2019-07-11 21:41:48 发布

原创最新推荐文章于 2019-07-11 21:41:48 发布 · 481 阅读

0 ·

CC 4.0 BY-SA版权

easyUi 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了jQuery EasyUI的validatebox组件，用于验证表单字段的有效性。当用户输入无效值时，validatebox会改变输入框背景色，显示警告图标和提示信息。文章通过例子展示了如何定义验证规则，如姓名输入框的长度限制和中文规则，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、validatebox(验证框)

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

二、例子

姓名：<input id="nameID"/><p/>
	
<script type="text/javascript">
	$("#nameID").validatebox({
		required : true,
		validType : ['length[1,6]','zhongwen']
	});
</script>

定义了一个姓名输入框，用js语法定位（$("#nameID").validatebox）并说明它是一个validatebox组件。

required : true 表示使用这个validatebox组件，为false的话就是不使用组件。

validType : ['length[1,6]','zhongwen'] 姓名这个输入框有两个规则，必须满足。一个是长度为1-6。第二个是必须为中文。接下来定义中文规则，代码如下：

<script type="text/javascript">
		//自定义规则:zhongwen
		$.extend($.fn.validatebox.defaults.rules, {    
		    //zhongwen规则名
		    zhongwen: {  
		    	//validator验证体  
		    	//value表示用户在文本框中输入的内容
		        validator: function(value){   
		        	//如果符合中文规则 
		        	if(/^[\u3220-\uFA29]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        //如果不符合中文规则，以下就是提示信息   
		        message: '姓名必须为中文'   
		    }    
		});  
	</script>

密码大致也是如此，代码如下

密码：<input id="passwordID"/><p/>

	<script type="text/javascript">
		$("#passwordID").validatebox({
			required : true,
			validType : ['length[6,6]','english']
		});
	</script>
	<script type="text/javascript">
		$.extend($.fn.validatebox.defaults.rules, {    
		    english: {  
		        validator: function(value){   
		        	if(/^[a-zA-Z]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        message: '密码必须为英文'   
		    }    
		});  
	</script>

完整代码：（直接拖到浏览器没有效果，因为代码里导入了很多js）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>01_validatebox.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
	
	
	<div style="margin:200px"></div>
	
	姓名：<input id="nameID"/><p/>
	
	<script type="text/javascript">
		$("#nameID").validatebox({
			required : true,
			validType : ['length[1,6]','zhongwen']
		});
	</script>
	<script type="text/javascript">
		//自定义规则:zhongwen
		$.extend($.fn.validatebox.defaults.rules, {    
		    //zhongwen规则名
		    zhongwen: {  
		    	//validator验证体  
		    	//value表示用户在文本框中输入的内容
		        validator: function(value){   
		        	//如果符合中文规则 
		        	if(/^[\u3220-\uFA29]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        //如果不符合中文规则，以下就是提示信息   
		        message: '姓名必须为中文'   
		    }    
		});  
	</script>

	
	密码：<input id="passwordID"/><p/>

	<script type="text/javascript">
		$("#passwordID").validatebox({
			required : true,
			validType : ['length[6,6]','english']
		});
	</script>
	<script type="text/javascript">
		$.extend($.fn.validatebox.defaults.rules, {    
		    english: {  
		        validator: function(value){   
		        	if(/^[a-zA-Z]*$/.test(value)){
			            return true;    
		        	}
		        }, 
		        message: '密码必须为英文'   
		    }    
		});  
	</script>
	
  </body>
</html>

三、属性

属性名	属性值类型	描述	默认值
required	boolean	定义为必填字段。	false
validType	string,array	定义字段验证类型，比如：email, url等等。可用值有： 1).一个有效类型字符串运用一个验证规则。 2).一个有效类型数组运用多个验证规则。（多验证规则验证一个字段在1.3.2或更高版本中才可以使用）代码示例： <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" required:true, validType:['email','length[0,20]'] ">	null
delay	number	延迟到最后验证输入值。（该属性自1.3.2版开始可用）	200
missingMessage	string	当文本框未填写时出现的提示信息。	This field is required.
invalidMessage	string	当文本框的内容被验证为无效时出现的提示。	null
tipPosition	string	定义当文本框内容无效的时候提示消息显示的位置，有效的值有：'left','right'。（该属性自1.3.2版开始可用）	right
deltaX	number	提示框在水平方向上位移。（该属性自1.3.3版开始可用）	0
novalidate	boolean	为true时关闭验证功能。（该属性自1.3.4版开始可用）	false

四、方法

方法名	方法属性	描述
destroy	none	移除并销毁组件。
validate	none	验证文本框的内容是否有效。
isValid	none	调用validate方法并且返回验证结果，true或者false。
enableValidation	none	启用验证。（该方法自1.3.4版开始可用）
disableValidation	none	禁用验证。（该方法自1.3.4版开始可用）