一、引入

  1. 使用npm下载项目 npm i [email protected]
  2. BootstrapValidator插件需要jQueryBootstrap
  3. 引入js和css文件

注意:jQuery和Bootstrap任何版本都可以,但是需要注意引入顺序先

引入顺序为:jQuery --> Bootstrap --> BootstrapValidator

代码如下:

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

二.添加验证规则

1.要求

如果想对某一个字段添加验证规则,需要<div class="form-group"></div>包裹,input标签必须有name值,此值为验证匹配的字段。

总结:其实就只要符合bootstrap表单结构就行了,其次就是必须声明name属性和属性值即可

代码示例:

<form action="#" class="form-horizontal" id="myform">
    <div class="form-group">
        <label for="name" class="control-label col-sm-2">用户名</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" name="username" placeholder="请输入用户名">
        </div>
    </div>
</form>

2.使用JS开始实现效果

<script>
    $(function () {
        $('#myform').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名校验失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        // stringLength:{
                        //     min:6,
                        //     max:10,
                        //     message:'用户名长度必须为6-10位之间'
                        // },
                        regexp: {
                            regexp: /^[\da-z_]{6,10}$/i,
                            message: '用户名只能包含数字、字母和下划线,长度为6-10'
                        }
                    }
                },
                password: {
                    message: '密码不符合规则',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) { // 当表单提前时触发
            // 阻止表单提交
            e.preventDefault();
        });
    });
</script>

3.完成

效果图:

最后修改:2020 年 08 月 10 日 05 : 13 PM