前言：表单验证是十分常见的需求。公司做运维系统需要大量的编辑/新增表单，编辑之后提交，提交前需要进行表单验证，验证成功才能发起POST请求。由于项目前端大部分是基于Bootstrap开发的，可看官网Bootstrap Validator http://1000hz.github.io/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>