jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。

實現步驟如下:

step1:在body標簽中增加一個表單標簽

1. <form id="login_form" action="login.action" method="post">
2. <table cellpadding="0" cellspacing="0" border="0" class="form_table">
3. <tr>
4. <td valign="middle" align="right">
5. Email:
6. </td>
7. <td valign="middle" align="left">
8. <input type="text" class="inputgri" name="email" />
9. <span style="color: red">${msg}</span>
10. </td>
11. </tr>
12. <tr>
13. <td valign="middle" align="right">
14. 密碼:
15. </td>
16. <td valign="middle" align="left">
17. <input type="password" class="inputgri" name="password" />
18. </td>
19. </tr>
20. </table>
21. <p>
22. <input type="submit" class="button" value="登錄 ?" />
23. <a href="register.jsp">沒有註冊</a>
24. </p>
25. </form>

step2:導入Validate 插件js文件

1. <script type="text/javascript" src="js/jquery.js"></script>
2. <script type="text/javascript" src="js/jquery.validate.min.js"></script>
3. <script type="text/javascript" src="js/messages_cn.js"></script>

step3:寫js代碼

1. <script>
2. $(document).ready(function(){
3. $("#login_form").validate({
4. rules: {
5. email: {required: true, email: true },
6. password:{required:true,minlength:6,maxlength:16},
7. },
8. messages: {
9. email: {required:"需要輸入電子郵箱", email:"電子郵箱格式不正確"},
10. password: {required:"需要輸入密碼",minlength:"密碼長度在6-16個字符之間", maxlength:"密碼長度在6-16個字符之間"},
11. }
12. });
13. });
14. </script>

參考鏈接:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

點擊下載源碼

JS驗證控件jQuery Validate