Jquery表单验证插件validate
2018-08-05 07:45:54来源：博客园 阅读 ()
写在前面：
在做一些添加功能的时候，表单的提交前的验证是必不可少的，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效果图：
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：69道Spring面试题和答案
下一篇：Kafka从入门到进阶
- SpringBoot 2.x 版本以put方式提交表单不生效的问题详解 2020-06-01
- 第六章第三十一题（金融应用：信用卡号的合法性验证）(Finan 2020-05-20
- LeetCode 680. 验证回文字符串 Ⅱ 2020-05-19
- 如何用SpringBoot集成JWT实现token验证及token注销？一招教 2020-05-13
- Https双向验证与Springboot整合测试-人来人往我只认你 2020-05-05
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
