标签：
在做web应用的时候，数据验证是非常重要的，一个不小心就产生bug，而bug多了显得个人开发能力都有问题，这个时候如果能有一个用着得心应手的验证插件，开发效率也会大大的提高。就好像牛魔王告诉孙悟空，你缺少一件兵器，于是他就抢来了棒子，用着那叫一个爽。三首蛟告诉杨戬，你手里缺少一件兵器，于是他把三首蛟变成了三尖两刃枪里，再配合一个忠心而又嗅觉灵敏的狗狗，办起事来真是事半功倍。今天我也学学这款比较流行的表单验证插件，给自己搞一个好使的兵器。
插件官网：https://jqueryvalidation.org
bootcdn(http://www.bootcdn.cn)提供了比较多的插件cdn，比较稳定，使用了一段时间感觉比较靠谱，所以就选择使用它了，当然也可以自己下载到本地使用。
jquery：http://cdn.bootcss.com/jquery/1.8.1/jquery.js
validate：http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js
插件要生效必须要引入jQuery才可以。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> <script src="http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.js"></script> <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <form id="commentForm"> <div class="form-group"> <label for="exampleInputName">Name</label> <input type="text" class="form-control" id="exampleInputName" name="exampleInputName" style="width:40%" required> </div> <div class="form-group"> <label for="exampleInputEmail">Email</label> <input type="email" class="form-control" id="exampleInputEmail" name="exampleInputEmail" style="width:40%" required> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </div> </body> <script> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); }); </script> </html>
只要为html标签指定了required属性，js中只需要一句 $("#commentForm").validate(); 即可完成验证，效率真是大大的提高了。
111
标签：
原文地址：http://www.cnblogs.com/wange/p/5561209.html
