写在前面：
在做一些添加功能的时候，表单的提交前的验证是必不可少的，jquery的validate插件就还可以，对于基本的需求已经够了。这里记录下基本的用法。
还是写个简单的demo吧
<html> <head> <meta name="viewport" content="width=device-width" /> <title>Jquery表单校验插件validate</title> <%--jqury插件--%> <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script> <%--validate插件--%> <script src="${baseURL}/ligerui/jquery-validation/jquery.validate.min.js"></script> <%--中文提示插件--%> <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>工程师</option> <option>PM</option> </select> </td> </tr> <tr> <td>性别</td> <td style="text-align: center"><input type="radio" name="sex" value="1" checked/>男    <input type="radio" name="sex" value="0"/>女</td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="favorite" value="1" /> 赚钱 <input type="checkbox" name="favorite" value="2"/> 唱歌 <input type="checkbox" name="favorite" value="3"/> 游戏 </td> </tr> <tr> <td> <input id="btn_commit" type="button" value="提交"/> </td> </tr> </table> </form> </div> </body> <script> $(function(){ //表单验证 $("#btn_commit").click(function(){ var myflag = $("#myform").validate({ //onfocusout:true,// 是否在获取焦点时验证 rules:{ //字段的name属性:"校验器" perCode:"required",//required在此含义是必填 //字段的name属性:{校验器:值,校验器:值} perName:"required", role : "required", sex:"required", favorite:"required", }, messages: { //自定义错误信息， perName: { required: "用户名必填" } }, errorPlacement: function(error, element) { //指定错误信息位置 if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox var eid = element.attr('name'); //获取元素的name属性 error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面 } else { error.insertAfter(element); } //错误信息提示颜色 error.css("color","red"); }, }); if(!(myflag.form())){ //表单校验不通过 return ; } //表单校验通过 提交表单 $.ajax( { //... } ); }); }); </script> </html>
jquery表单的验证还是比较简单的，这里的用法也只是简单的写了个demo，如果要验证radio与checkbox的时候，最好指定下错误信息出现的位置，比较好看点
主要的步骤：
1.导入jquery插件以及validate的相关插件
2.调用validate()方法，在里面编写对应的需要校验的字段，以及校验规则
其实网上的demo例子很多，也比我这个解释详细的多，这里只是简单的记录下，对于复杂的校验规则我这里也没有写出来，之后可以查阅相关的资料即可。
demo效果图：
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/16866.html