一、效果圖：
二、JqueryValidate的好處
在做註冊、或者類似以上的表單提交的時候，大家是不是都很煩那種，把數據拿到後臺去判斷，
可能經過了正則表達式之類的複雜判斷，然後發現數據錯誤。接着通過request轉發到頁面上，再通過EL
表達式輸出錯誤信息。實話實話，在沒發現這個插件之前，我是這麼幹的，好痛苦的感覺。
JqueryValidate的好處就在於，你不必經過servlet，就可以在頁面上面判斷用戶輸入的信息是否正確，它能夠快速實現
表單的校驗。
三、引入插件
- 順序不能亂，此插件是依賴於jquery的
四、給你的表單添加一個id
五、使用
- 格式
$("#表單的id").validate({
rules:{
"input的name屬性的值":{
"校驗規則":布爾值,
}...
},
messages:{
""input的name屬性的值":{
"校驗規則":"提示信息",
}...
});
- 校驗規則 （詳看：http://www.runoob.com/jquery/jquery-plugin-validate.html）
- 源代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="${ctx}/js/jquery.validate.min.js"/></script> <script type="text/javascript" charset="utf-8"> //表單校驗 $("#checkform").validate({ rules:{ "customer_id":{ "required":true, }, "mustPay":{ "required":true, "number":true }, "hadPaid":{ "required":true, "number":true }, "order_profit":{ "required":true, "number":true }, "orderTime":{ "required":true, "date":true } }, messages:{ "customer_id":{ "required":"不能爲空", }, "mustPay":{ "required":"不能爲空", "number":"需要數字" }, "hadPaid":{ "required":"不能爲空", "number":"需要數字" }, "order_profit":{ "required":"不能爲空", "number":"需要數字" }, "orderTime":{ "required":"不能爲空", } } }); </script> </head> <body> <form id="checkform" action=" " method="post"> 客    戶:<select type="text" name="customer_id" > <option >客戶1</option> <option >客戶2</option> <option >客戶3</option> </select><br> 應付金額:<span style="width: 20px; color:#E31D1A; font-size:20px; display: inline-block; margin-left:48px; text-align:center;">￥</span><input style="width: 180px;margin-left: 0px;" type="text" name="mustPay" ><br> 已付金額:<span style="width: 20px; color:#E31D1A; font-size:20px; display: inline-block; margin-left:48px; text-align:center;">￥</span><input style="width: 180px;margin-left: 0px;" type="text" name="hadPaid" ><br> 利    潤:<span style="width: 20px; color:#E31D1A; font-size:20px; display: inline-block; margin-left:48px; text-align:center;">￥</span><input style="width: 180px;margin-left: 0px;" type="text" name="order_profit"><br> 下單時間:<input type="text" name="orderTime" id="pickdate"><br> <input type="submit" style="float: right;" value="提交"> </form> </body> </html>
以上爲今天的所有分享，如需瞭解更加深入的知識，
請大家進入知了堂社區：http://www.zhiliaotang.com/portal.php;
轉載請註明出處；
請大家多多指教！歡迎提意見，非誠勿擾！！！
---By GET_CHEN