Write before:
When doing some adding functions, the form verification before submission is essential. The jquery validate plug-in is OK, which is enough for basic requirements. Record the basic usage here.
Let's write a simple demo
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Jquery Form verification plug-in validate</title> <%--jqury Plug-in unit--%> <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script> <%--validate Plug-in unit--%> <script src="${baseURL}/ligerui/jquery-validation/jquery.validate.min.js"></script> <%--Chinese prompt plug-in--%> <script src="${baseURL}/ligerui/jquery-validation/messages_cn.js" type="text/javascript"></script> </head> <body> <div > <form id="myform"> <table> <tr> <td> ID </td> <td> <input type="text" id="input_id" name="perCode" style="border:0.5px solid #fac090"/> </td> </tr> <tr> <td> Name </td> <td> <input type="text" id="input_name" name="perName" style="border:0.5px solid #fac090"/> </td> </tr> <tr> <td> Role </td> <td> <select id="sel_role" name="role" data-width="150px" style=""> <option>Engineer</option> <option>PM</option> </select> </td> </tr> <tr> <td>Gender</td> <td style="text-align: center"><input type="radio" name="sex" value="1" checked/>male    <input type="radio" name="sex" value="0"/>female</td> </tr> <tr> <td>hobby</td> <td> <input type="checkbox" name="favorite" value="1" /> make money <input type="checkbox" name="favorite" value="2"/> Sing <input type="checkbox" name="favorite" value="3"/> Game </td> </tr> <tr> <td> <input id="btn_commit" type="button" value="Submission"/> </td> </tr> </table> </form> </div> </body> <script> $(function(){ //Form Validation $("#btn_commit").click(function(){ var myflag = $("#myform").validate({ //onfocusout:true,// Whether to verify when getting focus rules:{ //Field name attribute:"Calibrator" perCode:"required",//required This meaning is required //Field name attribute:{Calibrator:value,Calibrator:value} perName:"required", role : "required", sex:"required", favorite:"required", }, messages: { //Custom error messages, perName: { required: "User name is required" } }, errorPlacement: function(error, element) { //Specify error message location if (element.is(':radio') || element.is(':checkbox')) { //If it is radio or checkbox var eid = element.attr('name'); //Get element's name attribute error.appendTo(element.parent()); //Add error information after the parent node of the current element } else { error.insertAfter(element); } //Error message color error.css("color","red"); }, }); if(!(myflag.form())){ //Form verification failed return ; } //Form verification passed submit form $.ajax( { //... } ); }); }); </script> </html>
The verification of jquery forms is still relatively simple. The usage here is just a simple demo. If you want to verify radio and checkbox, you'd better specify the location where the error message appears, which is more beautiful
Main steps:
1. Import jquery plug-ins and related plug-ins of validate
2. Call the validate() method, and write the corresponding fields to be verified and the verification rules
In fact, there are many demo examples on the Internet, which are more detailed than my explanation. Here is just a simple record. I haven't written out the complex verification rules here. After that, you can refer to the relevant information.
demo rendering:
