BootstrapValidator使用范例-优快云博客

本文链接：https://blog.youkuaiyun.com/QiuDW_01/article/details/48193975

本文详细介绍了如何使用BootstrapValidator进行表单验证，包括不合法和合法数据的展示，以及具体的HTML和JS代码示例，强调了属性name在映射控件中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BootstrapValidator API
效果图：
这里写图片描述

点击提交：
这里写图片描述

不合法数据：
这里写图片描述

合法数据
这里写图片描述

How to use?

HTML代码

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

注意：属性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]+$/
                }
            }
        }
    }
});