第一種方式：混合寫法
$("#password").validatebox({
}) <td><input type="text" name="password" required="true" id="password"></td>
第二種方式：js寫法 $("#password").validatebox({
required="true" 注意沒有分號；
}) <td><input type="text" name="password" id="password"></td>
第三種方式：html寫法 <td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用戶名無效"></td>
屬性：
required="true"：定義是否字段應被輸入，默認false，missingMessage可以改變內容
validType 是驗證規則：
驗證規則是通過使用 required 和 validType 特性來定義的， 這里是已經實施的規則：
- email：匹配 email 正則表達式規則
- url：匹配 URL 正則表達式規則
- length[0,100]：允許從 x 到 y 個字符
- remote['http://.../action.do','paramName']：發送 ajax 請求來驗證值，成功時返回 'true' 。
自定義驗證規則，重寫 $.fn.validatebox.defaults.rules ：
namerules是自定義的名字，用在validType里面
$(function(){
$.extend($.fn.validatebox.defaults.rules, { namerules: { validator: function(value){ var str= /^[a-zA-Z0-9_-]{4,16}$/; return value.match(str); //return true規則生效 }, message: '4到16位（字母，數字，下划線，減號）' //message就是不滿足驗證規則下面框的內容 ，如果required=true,那么一開始就有驗證框必填，missingMessage可以改變內容，屬性invalidMessage會覆蓋驗證規則中message
下面就是覆蓋了，所以是用戶名無效，不然是 ’4到16位（字母，數字，下划線，減號）’
invalidMessage作用：當重用驗證規則時，提示信息會不一樣，這時可以invalidMessage
<td><input type="text" name="username" id="username" required="true" class="easyui-validatebox" validType="namerules" invalidMessage="用戶名無效"></td>
},
//多個驗證規則，直接在后面添加
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.' //
}
});
<%@ 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 : '大於5小於8位' } }); }) </script> </head> <body> <div class="easyui-panel" title="新增用戶" style="width: 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="密碼不能為空" ></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"></td> </tr> <tr> <td>生日</td> <td><input type="text" name="birthday"></td> </tr> <tr> <td>城市</td> <td><input type="text" name="city"></td> </tr> <tr> <td>薪水</td> <td><input type="text" name="salary"></td> </tr> <tr> <td>起始時間</td> <td><input type="text" name="starttime"></td> </tr> <tr> <td>結束時間</td> <td><input type="text" name="endtime"></td> </tr> </table> <tr colspan="2" align="center"> <td colspan="2"><a class="easyui-linkbutton">點擊</a></td> </tr> </form> </div> </body> </html>