截图展示：
源代码展示：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>esay_ui框架 验证功能</title>
<!--引入相关的资源文件（js） -->
<!--Jquery 核心js 文件 -->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<!--easy _ui组件 -->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!--引入相关资源文件(css) -->
<!--esay_ui 的css -->
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<!--easy_ui 验证框架 的css文件 -->
<link rel="stylesheet" type="text/css" href="css/validatebox.css">
<script>
function validate() {
//获取Id为name的input的值
var name = document.getElementById("name").value;
//alert("相关参数 ："+name);
var password = document.getElementById("password").value;
var repassword = document.getElementById("repassword").value;
if (password != repassword) {
document.getElementById("password").value = "";
document.getElementById("repassword").value = "";
alert("输入密码与密码确认不一致 ");
return false;
}
var email = document.getElementById("email").value;
if (email == null || email == "") {
alert("请输入邮箱地址 ");
return false;
}
//无法获取时间控件的值，待解决 (Easy UI的Bug问题)
var birthday = document.getElementById("birthday").value;
if (birthday == null || birthday == "") {
alert("请输入正确生日日期 ");
return false;
}
var phone = document.getElementById("phone").value;
if (phone == null || phone == "") {
alert("请输入正确电话号码 ");
return false;
}
var url = document.getElementById("url").value;
if (url == null || url == "") {
alert("请输入正确的url");
return false;
}
alert("验证数据成功 ，可以进行相关的异步请求了 ！");
}
</script>
</head>
<body>
<div class="easyui-panel" title="Register"
style="width: 400px; padding: 10px">
<table>
<tr>
<td>
r用户名:
</td>
<!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 -->
<td>
<input class="easyui-validatebox"
data-options="required:true,validType:'length[3,10]'" id="name">
</td>
</tr>
<tr>
<td>
密码:
</td>
<!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 -->
<td>
<input class="easyui-validatebox" type="password"
data-options="required:true,validType:'length[3,10]'"
id="password">
</td>
</tr>
<tr>
<td>
密码确认:
</td>
<!--数据要求：必须输入，（默认是字符）字符长度（3，10），class='easyui-validatebox'表示验证 -->
<td>
<input class="easyui-validatebox" type="password"
data-options="required:true,validType:'length[3,10]'"
id="repassword">
</td>
</tr>
<tr>
<td>
邮箱地址:
</td>
<!--数据要求：必须输入，验证数据类型：邮箱类型 -->
<td>
<input class="easyui-validatebox"
data-options="required:true,validType:'email'" id="email">
</td>
</tr>
<tr>
<td>
生日日期:
</td>
<td>
<input class="easyui-datebox" id="birthday">
</td>
</tr>
<tr>
<td>
URL:
</td>
<!--数据要求：必须输入，验证数据类型：URL类型 -->
<td>
<input class="easyui-validatebox"
data-options="required:true,validType:'url'" id="url">
</td>
</tr>
<tr>
<td>
电话号码:
</td>
<!--数据要求：必须输入，验证数据类型：电话类型 -->
<td>
<input class="easyui-validatebox" data-options="required:true"
id="phone">
</td>
</tr>
</table>
</div>
<input type="submit" value="验证" οnclick="validate()">
</body>
</html>