> 脚本语言 > >

Jquery.validate.js表单验证详解 2017-08-27 11:27　出处：清屏网　人气：　

前言 ：表单验证是十分常见的需求。公司做运维系统需要大量的编辑/新增表单，编辑之后提交，提交前需要进行表单验证，验证成功才能发起POST请求。由于项目前端大部分是基于Bootstrap开发的，可看官网 Bootstrap Validator ，感觉比较容易上手。用bootstrap validator有个问题，需验证的input/select等标签的外部需要有一个 <div class="form-group">包着，验证失败时给class="form-group"的div变成红色。

1 <form data-toggle="validator" role="form"> 2 <div class="form-group"> 3 <label for="inputName" class="control-label">Name</label> 4 <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required> 5 </div> 6 <div class="form-group has-feedback"> 7 <label for="inputTwitter" class="control-label">Twitter</label> 8 <div class="input-group"> 9 <span class="input-group-addon">@</span> 10 <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required> 11 </div> 12 <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 13 <div class="help-block with-errors">Hey look, this one has feedback icons!</div> 14 </div> 15 <div class="form-group"> 16 <label for="inputEmail" class="control-label">Email</label> 17 <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required> 18 <div class="help-block with-errors"></div> 19 </div> 20 <div class="form-group"> 21 <label for="inputPassword" class="control-label">Password</label> 22 <div class="form-inline row"> 23 <div class="form-group col-sm-6"> 24 <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required> 25 <div class="help-block">Minimum of 6 characters</div> 26 </div> 27 <div class="form-group col-sm-6"> 28 <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required> 29 <div class="help-block with-errors"></div> 30 </div> 31 </div> 32 </div> 33 <div class="form-group"> 34 <div class="radio"> 35 <label> 36 <input type="radio" name="underwear" required> 37 Boxers 38 </label> 39 </div> 40 <div class="radio"> 41 <label> 42 <input type="radio" name="underwear" required> 43 Briefs 44 </label> 45 </div> 46 </div> 47 <div class="form-group"> 48 <div class="checkbox"> 49 <label> 50 <input type="checkbox" id="terms" data-error="Before you wreck yourself" required> 51 Check yourself 52 </label> 53 <div class="help-block with-errors"></div> 54 </div> 55 </div> 56 <div class="form-group"> 57 <button type="submit" class="btn btn-primary">Submit</button> 58 </div> 59 </form> View Code 一、跳过的坑

后来没用Bootstrap Validator, 用了jquery.validate.js插件。 https://jqueryvalidation.org/ ，接下来学习jquery.validate.js，有点懒，直接用英文，不懂的可以评论问我，我在form表单验证踩了很多坑，比较有体会……

最开始用jquery.validate.js时，用来 验证Bootstrap模态框的Form表单 ，妈蛋，竟然 验证不了 ，根本没有反应。搞了很久很久，才知道是因为用模态框时， submit按钮没有放在Form表单里面，所以触发不了验证 。后来改用Bootstrap Validator，尼妈，得给要验证的input/select标签外的标签(验证不通过会变红)加上class="form-group"，但是 加上form-group属性后我的表单样式出错了(变丑了 )，怎么办，我只想给这个标签加上form-group属性，但是不希望它带上form-group的样式，正所谓有名无实……我当时不懂，一直用浏览器调前端界面，然而并没有什么卵用，后来请教隔壁组做前端的PHP大神， 给这个标签的class最后加上自定义的样式，覆盖前面form-group的样式 ，前后只花了一两分钟，顿时膜拜铭哥大佬。比如说A标签的class有两个属性class="a b"当a和b的样式有冲突是，比时a样式是margin-top:10px，而b样式是margin-top:20px，这时会选取class最后的样式，b在a的后面，当a,b样式冲突时，会优先取b的样式。具体代码现在没有，要的话明天去公司的SVN找找看……

后来项目被我改用layer弹框，而不是模态框，老大让我做一个表单验证的接口……

因为总不能每一个HTML文件都写那么多JS来验证Form表单。验证接口参考了老大前公司的代码(TC公司)。