BootstrapValidator使用范例

BootstrapValidator API
效果图：

点击提交：

不合法数据：

合法数据

How to use?

HTML代码

class="form-horizontal" id="register-form">
    <div class="form-group">
        class="control-label col-sm-2 text-right">用户名
        <div class="col-sm-6">
            "text" name="username" class="form-control" placeholder="enter username">
        div>
    div>
    <div class="form-group">
        class="control-label col-sm-2 text-right">密码
        <div class="col-sm-6">
            "password" name="password" class="form-control" placeholder="enter passworm">
        div>
    div>
    <div class="form-group">
        class="control-label col-sm-2 text-right">确认密码
        <div class="col-sm-6">
            "password" name="comfirm_password" class="form-control" placeholder="comfirm passworm">
        div>
    div>
    <div class="form-group">
        class="control-label col-sm-2 text-right">邮箱
        <div class="col-sm-6">
            "text" name="email" class="form-control" placeholder="enter email">
        div>
    div>
    <div class="form-group">
        <div class="col-sm-offset-6 col-sm-2">
            class="btn btn-primary" type="submit">提交
        div>
    div>

注意：属性name不可缺，bootstrapvalidator根据name属性映射各控件。
JS代码

$('#register-form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields:{               // 各字段验证
        username:{         // 各控件name的属性值
            validators:{   //设置各验证机制
                notEmpty:{
                    message:'用户名不能为空'
                }
            }
        },
        password:{
            validators:{
                notEmpty:{
                    message:'密码不能为空'
                },
                stringLength:{
                    min:6,
                    max:9,
                    message:'密码长度为6~9'
                },
                callback:{
                    callback:function(value, validator){
                        var number_reg = /d/;
                        var letter_reg = /[a-zA-Z]/;
                        return number_reg.test(value) && letter_reg.test(value);
                    },
                    message:'密码必须为数字跟字母的组合'
                }
            }
        },
        comfirm_password:{
            validators:{
                notEmpty:{
                    message:'密码确认不能为空'
                },
                identical:{
                    field:'password',
                    message:'密码不一致'
                }
            }
        },
        email:{
            validators:{
                notEmpty:{
                    message:'邮箱不能为空'
                },
                regexp:{
                    message:'邮箱格式不合法',
                    regexp:/^\w+@\w+\.[a-z]+$/
                }
            }
        }
    }
});