ValidateBox（验证框）

墨渐生微

于 2018-10-12 22:58:12 发布

阅读量1.6k

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/mythology_px/article/details/83033943

版权

easyUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>验证框</title>
    <!-- 引入easyUI:JQuery文件支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.min.js"></script>
  	<!-- 引入easyUI -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
  	<!-- 引入中文支持 -->
  	<script type="text/javascript" src="js/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
  	<!-- 引入easyUI主题css文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/default/easyui.css" type="text/css"></link>
  	<!-- 引入easyUI 图标导航文件 -->
  	<link rel="stylesheet" href="js/jquery-easyui-1.3.4/themes/icon.css" type="text/css"></link></head>
  	<script type="text/javascript">
  		// 验证密码相等规则
		$.extend($.fn.validatebox.defaults.rules, {    
		    equals: {    
		        validator: function(value,param){    
		            return value == $(param[0]).val();    
		        },    
		        message: '两次密码不一致'   
		    }    
		});
		
		// 自定义最小长度规则
		$.extend($.fn.validatebox.defaults.rules, {    
		    minLength: {    
		        validator: function(value, param){    
		            return value.length >= param[0];    
		        },    
		        message: '帐号长度必须大于5'   
		    }    
		});
		
  		// Javascript创建验证框:email
  		$(document).ready(function(){
			$('#vv2').validatebox({    
			    required: true,    
			    validType: 'email'   
			}); 
  		});
  	</script>
  
  <body>
  	<%
  		/*
  			required:必输项
  			validType:验证类型
  		*/
  	 %>
  	 <form action="#">
  	    <!-- 通过标签创建验证框:email -->
    	邮&nbsp;&nbsp;箱 : <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" /><br>
    	邮&nbsp;&nbsp;箱 : <input id="vv2" type="text"/><br>
    	
    	<!-- 检查密码和确认密码是否相同 -->
    	密&nbsp;&nbsp;码 : 	<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /><br>   
		确认密码 : 			<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"     
    		data-options="required:true" validType="equals['#pwd']" /> <br>
   
    	帐&nbsp;&nbsp;号 : <input class="easyui-validatebox" data-options="validType:'minLength[5]'"><br>
    	<!-- 日期框 -->
    	日&nbsp;&nbsp;期 : <input id="dd" type="text" class="easyui-datebox" required="required"></input>    	
    </form>
  </body>
</html>

墨渐生微

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ValidateBox（验证框）

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;&lt...
复制链接

扫一扫