<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP '003.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.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" 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> <script type="text/javascript"> $(function() { $.extend($.fn.validatebox.defaults.rules, { namerules : { validator : function(value) { var str = /^[a-zA-Z0-9_-]{4,16}$/; return value.match(str); }, message : '4到16位（字母，数字，下划线，减号）' }, minLength : { validator : function(value, param) { return value.length >= param[0] && value.length<=param[1]; }, message : '' } }); $("#age").numberbox({ min:0, max:150, precision:0, required:true, missingMessage:"年龄不能为空" }) $("#birthday").datebox({ required:true, editable:false }) //日期时间选择 $("#starttime,#endtime").datetimebox({ required:true, editable:false, missingMessage:"日期不能为空" }) }) </script> </head> <body> <div class="easyui-panel" title="新增用户" style=" 400px; height: 400px"> <form id="userform"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用户名无效" missingMessage="用户名不能为空" ></td> </tr> <tr> <td>密码</td> <td><input type="text" name="password" required="true" id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间" ></td> </tr> <tr> <td>性别</td> <td>男：<input type="radio" name="sex" value="1"> 女：<input type="radio" name="sex" value="0"></td> </tr> <tr> <td>年龄</td> <td><input type="text" name="age" id="age"></td> </tr> <tr> <td>生日</td> <td><input type="text" name="birthday" id="birthday"></td> </tr> <tr> <td>城市</td> <td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet?method=getcity" valueField="id" textField="name"></td> </tr> <tr> <td>薪水</td> <td><input type="text" name="salary" id="salary" validType="minLength[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td> </tr> <tr> <td>起始时间</td> <td><input type="text" name="starttime" id="starttime"></td> </tr> <tr> <td>结束时间</td> <td><input type="text" name="endtime" id="endtime"></td> </tr> </table> <tr colspan="2" align="center"> <td colspan="2"><a class="easyui-linkbutton">点击</a></td> </tr> </form> </div> </body> </html>
numberbox组件：上面的年龄的验证 用来验证数字的
$("#age").numberbox({
min:0, 最小值
max:150,最大值
precision:0,小数位
required:true,必填
missingMessage:"年龄不能为空" 必填提示信息
})
datebox组件：验证日期的，上面的生日，弹出一个日历选择框
$("#birthday").datebox({
required:true,
editable:false //input框不可编辑，继承于combo组件，是combo属性
})
datetimebox组件：验证日期带有时间的，依赖于timespinner微调器，所以有时间
//日期时间选择
$("#starttime,#endtime").datetimebox({
required:true,
editable:false,// 依赖于combo,不可编辑
missingMessage:"日期不能为空"
})
combobox组合框组件：使用来异步下拉列表使用，input框声明easyui-combobox,
然后通过url来发送异步请求，获取数据，
<p>Multiple ComboBox: </p> <input class="easyui-combobox" name="language" url="combobox_data.json" valueField="id" textField="text" multiple="true" panelHeight="auto">
请求数据需要valueFiled ：绑定到 ComboBox 的 value 上的基础数据的名称。相当于select option的value值
textField：绑定到 ComboBox 的 text 上的基础数据的名称。相当于select option的text值，必须json数组传递过来
[{"country":"","id":1,"name":"北京","pro_id":0},{"country":"","id":2,"name":"上海","pro_id":0},{"country":"","id":3,"name":"南京","pro_id":0},{"country":"","id":4,"name":"武汉","pro_id":0},{"country":"","id":5,"name":"天津","pro_id":0}]
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet?method=getcity" valueField="id" textField="name"></td>
或者：
<select id="cc" name="state" style="200px;"> </select></td>
$('#cc').combobox({
url:'servlet1/userServlet?method=getcity',
valueField:'id',
textField:'name'
});
使用同一个验证规则时，想提示各自的信息，如下，我想在年龄和薪水都共用一个minLength验证规则，则可以，将message志为空，如下，
然后再各自加上invalidMessage属性，就可以覆盖验证规则message（invalidMessage就是覆盖验证规则message）
$.extend($.fn.validatebox.defaults.rules, { namerules : { validator : function(value) { var str = /^[a-zA-Z0-9_-]{4,16}$/; return value.match(str); }, message : '4到16位（字母，数字，下划线，减号）' }, minLength : { validator : function(value, param) { return value.length >= param[0] && value.length<=param[1]; }, message : '' } });
<td><input type="text" name="salary" id="salary" validType="minLength[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td>
<td><input type="text" name="password" required="true" id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间" ></td>