原创

BootstrapValidator 基本使用

BootstrapValidator插件需要jQuery和Bootstrap 3

引入js和css文件

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  
 <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link href="http://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
    <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

二.添加验证规则

个人实例

<div class="panel-body center-block">
               <!-- login form start -->
               <form action="regist" class="form-horizontal" method="post" id="frmLogin" style="width:550px">
                   <div class="form-group">
                       <label class="col-sm-3 control-label">用户名:</label>
                       <div class="col-sm-9">
                           <input class="form-control" type="text" placeholder="请输入用户名" name="username">
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
                       <div class="col-sm-9">
                           <input class="form-control" type="password" placeholder="请输入密码" name="password">
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-sm-3 control-label">确认密码:</label>
                       <div class="col-sm-9">
                           <input class="form-control" type="password" placeholder="请输入密码" name="password">
                       </div>
                   </div>
                   <div class="form-group">
                       <label  class="col-sm-3 control-label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱:</label>
                       <div class="col-sm-9">
                           <input class="form-control" type="text" placeholder="请输入邮箱" name="email">
                       </div>
                   </div>
                   <div class="form-group">
                       <label class="col-sm-3 control-label"></label>
                       <div class="col-sm-9">
                           <input type="radio" checked="checked" name="gender" value="男">男
                           <input type="radio" name="gender" value="女">女
                       </div>
                   </div>
                   <div class="form-group">
                       <div class="col-sm-3">
                       </div>
                       <div class="col-sm-9 padding-left-0">
                           <div class="col-sm-4">
                               <button type="submit" class="btn btn-primary btn-block">注&nbsp;&nbsp;册</button>
                           </div>
                           <div class="col-sm-4">
                               <button type="reset" class="btn btn-primary btn-block">重&nbsp;&nbsp;置</button>
                           </div>
                       </div>
                   </div>
               </form>
           </div>

js代码


<script>
    function reloadImage() {
        $('#image').attr('src',"/checkCode?"+new Date().getTime());
    }
    $(function () {
        $('#frmLogin').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                username: {
                    validators: {
                        notEmpty: {
                            message: "用户名不能为空"
                        },
                        stringLength: {  //长度限制
                            min: 4,
                            max: 12,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: { //正则表达式
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        },
                    }
                },

                password:{
                    validators: {
                        notEmpty: {
                            message: "密码不能为空"
                        },
                        identical: {  //比较是否相同
                            field: 'password',  //需要进行比较的input name值
                            message: '两次密码不一致'
                        },
                        stringLength: {  //长度限制
                            min: 4,
                            max: 12,
                            message: '密码长度必须在6到12位之间'
                        },
                        regexp: { //正则表达式

                            message: '密码只能包含大写、小写、数字和下划线,特殊字符'
                        },
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                }



            }
        });

    });
</script>

常见的场景:

between: 验证输入值必须在某一个范围值内,比如大于1小于10

creditCard: 身份证验证 date: 日期验证 ip: IP地址验证 numeric: 数值验证 phone: 电话号码验证 url验证

web前端
  • 泽泽泽
  • 2020-10-30 11:56:59.974

评论区