bootstrap之bootstrapValidator的使用

bootstrapValidator是一款不错的表单验证的插件，本篇文章简单介绍了这款插件的使用，需要的朋友可以参考一下。下载实例

1、引入需要的css和js

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

2、编写html

如果想对某一个字段添加验证规则，需要<div class="form-group"></div>包裹（对应的错误提示会根据class值来定位），input标签必须有name值，此值为验证匹配的字段。

<div class="form-group">
     <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input type="text" class="form-control" placeholder="用户名" name="username" />
     </div>
</div>

3、添加验证规则

$(function(){
    //初始化input状态样式图标
    var icon = {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    };
    //初始化验证规则
    $("form").bootstrapValidator({
        feedbackIcons: icon,   //加载图标
        /* 生效规则
         * enabled:字段值发生变化就触发验证
         * disabled/submitted:点击提交时触发验证
         */
        live: 'disabled', 
        //表单域配置
        fields: {
            username: {//username为input标签name值
                validators: {
                    notEmpty: {message: '请输入用户名'},    //非空提示
                    stringLength: {    //长度限制
                          min: 6,
                          max: 30,
                          message: '用户名长度必须在6到30之间'
                    }, 
                    regexp: {//匹配规则
                          regexp: /^[a-zA-Z0-9_\\u4e00-\\u9fa5]+$/,  //正则表达式
                          message:'用户名仅支持汉字、字母、数字、下划线的组合'
                    },
                    remote: { //ajax校验，获得一个json数据（{'valid': true or false}）
                          url: 'user.php',                  //验证地址
                          message: '用户已存在',   //提示信息
                          type: 'POST',                   //请求方式
                          data: function(validator){  //自定义提交数据，默认为当前input name值
                            return {
                                act: 'is_registered',
                                username: $("input[name='username']").val()
                            }
                        }
                    }
                }
            },
            password: {
                validators: {
                   notEmpty: {message: '请输入密码'},
                   different: {  //比较
                        field: 'username', //需要进行比较的input name值
                        message: '密码不能与用户名相同'
                   }
                }
            },
            confirm_password: {
                validators: {
                    notEmpty: {message: '请再次输入密码'},
                    identical: {  //比较是否相同
                           field: 'password',  //需要进行比较的input name值
                           message: '两次密码不一致'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {message: '请输入邮箱'},
                    emailAddress: {message: '请输入正确的邮件地址'}
                }
            }   //最后一个没有逗号
        }
    })
});

效果图：

图片1
图片2

其他常见的验证类型：

• between: 验证输入值必须在某一个范围值内
• creditCard: 身份证验证
• date: 日期验证
• ip: IP地址验证
• numeric: 数值验证
• phone: 电话号码验证
  更多验证类型详见：http://bv.doc.javake.cn/validators/