Bootstrap表单验证器BootstrapValidator

在进行web开发的时候，表单验证是常见的操作，友好的提示可以提高用户的使用体验，我尝试使用了一下BootstrapValidator进行表单验证，将使用过程和遇到的问题记录如下。

一、Github地址

地址

二、用法

1、引入

<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrapValidator.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrapValidator.js" type="text/javascript"></script>

需要注意的是已经将要使用到的文件下载到了本地。

2、使用

既然是表单验证，那么我们在html代码内必须有一个form，并且Form里面取元素都是通过name属性去取值的，所以，表单里面的元素都要有一个name的属性值。
HTML代码

<form id="register-form">
      <div class="form-group">
          <input id="register-username" type="text" class="form-control" placeholder="请输入用户名/姓名" name="username">
       </div>
      <div class="form-group">
          <input id="register-password" type="password" class="form-control" placeholder="请输入密码" name="password">
      </div>

      <div class="form-group">
          <button class="btn btn-primary btn-lg " type="submit" >登录</button>
      </div>

      <div class="pull-right control">
           <input type="checkbox">
           <label class="control">自动登录</label>
      </div>

      <div class="pull-right control">
           <input type="checkbox">
           <label class="control">记住密码</label>
      </div>
</form>

js代码

$(function () {
                $('#register-form').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        username: {
                            message: '用户名验证失败',
                            validators: {
                                notEmpty: {
                                    message: '用户名不能为空'
                                }
                            }
                        },
                        password:{
                            validators:{
                                notEmpty:{
                                    message:'密码不能为空'
                                },
                            }
                        }
                    }
                });
        });

如果需要添加其他的验证，比如限制用户名长度，正则表达式，两次输入的密码是否一致等等，需要的js代码如下

$(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }
            }
        });
    });

其他的还有很多，详见github仓库内的demo

3、遇到的问题

1、验证没有效果
原因分析：可能是导入的文件不一致的问题，在根据提供的demo里面的文件重新导入css、js文件之后，可以正常的验证了，建议根据里面的文件导入，否则不会显示效果
2、图标不显示
原因分析：ctrl+鼠标左键点击引入的<link href="css/bootstrap.css" rel="stylesheet">发现没有fonts文件夹，从demo里面复制一份到项目文件夹下即可。