适配bootstrap的表单验证插件bootstrap-Validator

适配bootstrap的表单验证插件bootstrap-Validator

@[命令行|Git|代码管理]

---

最近在做软件工程的时候，做到表单验证，就找了jQuery的Validator库，虽然也还算好用，但是样式真的太丑了，还有一个莫名其妙的炫酷bug，找来找去，才发现原来bootstrap就有适配的Validator库

链接库

从github下载链接bootstrap Validator下载
与之前的bootstrap-editor等插件相同，第一要做的就是把库链接进html文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrapvalidator/dist/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
<script src="bootstrapvalidator/dist/js/language/zh_CN.js"></script>

先把bootstrap自带的css，js链接进去，再链接Validator的css和js，最后记得加上中文包

HTML文件

自己按照bootstrap的要求写一个表单

<div class="row">
     <div class="col-lg-offset-4 col-lg-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
      <form role="form" style="margin:5%;" id="registform">
             <div class="form-group">
                 <label for="Username">学号</label>
                 <input  type="text" name="Username" class="form-control" id="Username" maxlength="10" placeholder="学号">
             </div> 
             <div class="form-group">
                 <label for="Email">邮箱</label>
                 <input  type="Email"  name="Email" class="form-control" id="Email"
                 maxlength="50" placeholder="邮箱">
             </div>
             <div class="form-group">
                 <label for="Password">密码</label>
                 <input  type="password"  name="Password" class="form-control" id="Password" maxlength="16" placeholder="请输入密码">
             </div>
             <div class="form-group">
                 <label for="ConPassword">验证密码</label>
                 <input  type="password"  name="ConPassword" class="form-control" id="ConPassword" maxlength="16" placeholder="请再次输入密码">
             </div>
             <div align="center">
             <label class="radio-inline">
                 <input type="radio" name="option" id="option1" value="option1" checked>我是助教
             </label>
             <label class="radio-inline">
                 <input type="radio" name="option" id="option2"  value="option2"> 我是学生
             </label>
             </div>
             <br>
             <button type="submit" class="btn btn-default center-block" style="width:200px;">注&nbsp;册</button>
         </form>    
      </div>
      </div>

如上，效果在大屏幕下大概就这样，当然中间有一些比如SIGN UP和注册不是代码中表单的内容

添加表单验证代码

    <script type="text/javascript">
    $(document).ready(function(){
        $("#registform").bootstrapValidator({
            message:"未验证",
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
               Username:{
                   message:"学号还未验证",
                   validators:{
                       notEmpty:{
                           message:"学号不可为空"
                       },
                       stringLength:{
                           min:10,
                           max:10,
                           message:"学号长度为10"
                       }
                   }
               },
               Email:{
                   validators:{
                       notEmpty:{
                           message:"邮箱不可为空"
                       },
                       emailAddress:{
                           message:"邮箱名有误"
                       },
                       stringLength:{
                           max:50,
                           message:"邮箱长度不可超过50"
                       }
                   }
               },
               Password:{
                   message:"密码还未验证",
                   validators:{
                       notEmpty:"密码不能为空",
                       stringLength:{
                           min:6,
                           max:16,
                           message:"密码长度在6到16之间"
                       }
                   }
               },
               ConPassword:{
                   message:"密码重复还未验证",
                   validators:{
                       notEmpty:{
                           message:"密码验证不可为空"
                       },
                       stringLength:{
                           min:6,
                           max:16,
                           message:"密码长度在6到16之间"
                       },
                       identical:{
                           field:"Password",
                           message:"两次密码不同，请重新输入"
                       }
                   }
               }
            }
        });     
    }); 
    </script>

对于用过JQuery-Validator插件的同学一定觉得非常清楚明白了，message就是输出的提示符

由上面的代码可以看出在validators属性对应一个Json对象，里面可以包含多个验证的类型：
- notEmpty：非空验证；
- stringLength：字符串长度验证；
- regexp：正则表达式验证；
- emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
除此之外，在文档里面我们看到它总共有46个验证类型，我们抽几个常见的出来看看：
- base64：64位编码验证；
- between：验证输入值必须在某一个范围值以内，比如大于10小于100；
- creditCard：身份证验证；
- date：日期验证；
- ip：IP地址验证；
- numeric：数值验证；
- phone：电话号码验证；
- uri：url验证；

此时效果如上图所示