JS validation control jquery Validate

The JQuery Validate plugin provides a powerful validation feature for forms, making it easier to validate client forms, while providing a number of customization options to meet the needs of your application. The plugin bundles a set of useful validation methods, including URL and email validation, and provides an API to write user-defined methods.

The implementation steps are as follows:

Step1: Add a form label to the body tag

2. <form id= "Login_form" action= "login.action" method= "POST" >
4. <table cellpadding= "0" cellspacing= "0" border= "0" class= "form_table" >
6. <tr>
8. <TD valign= "Middle" align= "right" >
10. Email:
12. </td>
14. <TD valign= "Middle" align= "left" >
16. <input type= "text" class= "Inputgri" name= "email"/>
18. <span style= "color:red" >${msg}</span>
20. </td>
22. </tr>
24. <tr>
26. <TD valign= "Middle" align= "right" >
28. Password:
30. </td>
32. <TD valign= "Middle" align= "left" >
34. <input type= "Password" class= "Inputgri" name= "password"/>
36. </td>
38. </tr>
40. </table>
42. <p>
44. <input type= "Submit" class= "button" value= "Login?"/>
46. <a href= "register.jsp" > not registered </a>
48. </p>
50. </form>

Step2: Import Validate plugin js file

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: Write JS code

2. <script>
4. $ (document). Ready (function () {
6. $ ("#login_form"). Validate ({
8. Rules: {
10. Email: {required:true, email:true},
12. Password:{required:true,minlength:6,maxlength:16},
14. },
16. Messages: {
18. Email: {Required: "Need to enter e-mail address", email: "E-mail format is incorrect"},
20. Password: {required: "Need to enter password", minlength: "Password length between 6-16 characters", maxlength: "Password length between 6-16 characters"},
22. }
24. });
26. });
28. </script>

Reference Link: http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

Click to download the source code

JS validation control jquery Validate