bootstrap validator 使用 带代码

如何使用bootstrapVlidator插件?

下载bootstrapVlidator插件

在需要使用的页面引入bootstrapVlidator的js文件和css文件

如:

 

注:

在此基础之前必须引入jquery库和bootstrap的js文件和css样式。

如:

放入所需插件

 

引入路径

 

3.表单代码:

<form id="registForm">

            <!--下面是用户名输入框-->

            <div class="form-group">

                <div class="input-group">

                   <span class="input-group-addon" id="basic-addon1">

                        <span class="glyphicon glyphicon-user"></span>

                   </span>                     

                   <input id="userName" name="username" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">

                </div>

            </div>

            <br>

             <!--下面是邮箱输入框-->

             <div class="form-group">

                <div class="input-group">

                    <span class="input-group-addon" id="basic-addon1">

                            <span class="glyphicon glyphicon-envelope"></span>

                    </span>

                    <input id="email" name="email"type="text" class="form-control" placeholder="请输入邮箱">

                </div>

            </div>

            <br>

             <!--下面是手机号输入框-->

             <div class="form-group">

                <div class="input-group">

                    <span class="input-group-addon" id="basic-addon1">

                        <span class="glyphicon glyphicon-earphone"></span>

                    </span>

                   <input id="phoneNumber" name="phonenumber" type="text" class="form-control" placeholder="请输入手机号">

                </div>

            </div>

            <br>

            <!--下面是密码输入框-->

            <div class="form-group">

                <div class="input-group">

                    <span class="input-group-addon" id="basic-addon1">

                        <span class="glyphicon glyphicon-lock"></span>

                    </span>

                    <input id="passWord" name="password1" type="text" class="form-control" placeholder="请输入密码">

                </div>

            </div>

            <br>

            <!--下面是确认密码输入框-->

            <div class="form-group">

                <div class="input-group">

                    <span class="input-group-addon" id="basic-addon1">

                        <span class="glyphicon glyphicon-lock"></span>

                    </span>

                    <input id="passwordTow" name="password2" type="text" class="form-control" placeholder="请重新输入密码">

                </div>

            </div>

            <br>

            <!--下面是登陆按钮,包括颜色控制-->

            <div class="form-group">

                <button type="submit" name="submit" class="btn btn-primary btn-sm">提交</button>                   

                <button type="reset" id="resetBtn" name="reset" class="btn btn-primary btn-sm">重置</button>

            </div>

        </form>

4.js代码

1.  form里每一个input标签必须要有name属性,是根据name属性的值来设置条件

2.  属性介绍

    username:是用户input标签那么的属性值

notEmpty代表不为空验证

   Message:写提示语

    stringLength:设置字符串长度

    regexp:写正则表达式

    identical: 相同,用来验证两次密码是否相同

field:写想要相同的mame属性值

 

    //表单验证

     $(function () {

        $('form').bootstrapValidator({

            message: '请重新输入',

            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: '邮箱地址格式有误'

                        }

                    }

                },

                phonenumber: {

                    validators: {

                        notEmpty: {

                            message: '手机号不能为空'

                        },

                        regexp: {

                            regexp: /^1\d{10}$/,

                            message: '请输入11为手机号'

                        }

                    }

                },

                password1: {

                    validators: {

                        notEmpty: {

                            message: '密码不能为空'

                        },

                        stringLength: {

                            min: 6,

                            max: 12,

                            message: '密码长度必须在6到12位之间'

                        },

                        regexp: {

                            regexp: /^[a-zA-Z0-9_]+$/,

                            message: '密码只能包含大写、小写、数字和下划线'

                        },

                        identical: {

                            field: 'password2',

                            message: '两次输入的密码不相符'

                        }

                    }

                },

                password2: {

                    validators: {

                        notEmpty: {

                            message: '密码不能为空'

                        },

                        stringLength: {

                            min: 6,

                            max: 12,

                            message: '密码长度必须在6到12位之间'

                        },

                        regexp: {

                            regexp: /^[a-zA-Z0-9_]+$/,

                            message: '密码只能包含大写、小写、数字和下划线'

                        },

                        identical: {

                            field: 'password1',

                            message: '两次输入的密码不相符'

                        }

                    }

                }

            },

        });

});

如终极效果:

 

5.重置按钮js写法,包括重置validator验证规则

//重置按钮事件

    $("#resetBtn").off().on("click",function(){ 

        $(registForm).data("bootstrapValidator").resetForm();

    });

注:"#resetBtn“这个代表重置按钮id值

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwddzj.html