bootstrap表单验证

孙霸天

已于 2022-01-28 16:35:43 修改

阅读量5.5k

点赞数 1

分类专栏：前端学习文章标签： bootsrap 表单验证表单

于 2019-01-27 17:25:48 首次发布

本文链接：https://blog.csdn.net/qq_36213352/article/details/86667634

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

bootsrarp为表单验证提供了插件：BootstrapValidator，可以在官网和GitHub上查看

1.引入头文件：

<script src="${pageContext.request.contextPath}/lib/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <link href="lib/bootstrap-3.3.7-dist/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet">
<script src="lib/bootstrap-3.3.7-dist/bootstrapValidator/js/bootstrapValidator.js"></script>

请自行下载

2.代码：


<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header ">
            <a class="navbar-brand" href="#" style="padding: 10px 10px">
                <img alt="Brand" src="resources/images/logo/bigdata.png" style="height: 30px;width: 30px">
            </a>
            <p class="navbar-text" style="color: white;font-size: 14px;">注册界面</p>
        </div>
    </div>
</nav>
<div class="container-fluid">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="username" class="col-sm-5 control-label">用户名:</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="username" name="username">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-5 control-label">密码:</label>
            <div class="col-sm-7">
                <input type="password" class="form-control" id="password" name="password">
            </div>
        </div>

        <div class="form-group">
            <label for="confirmPassword" class="col-sm-5 control-label">确认密码:</label>
            <div class="col-sm-7">
                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword">
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-5 control-label">Email:</label>
            <div class="col-sm-7">
                <input type="text" class="form-control"  id="email" name="email">
            </div>
        </div>
        <div class="form-group">
            <label for="name" class="col-sm-5 control-label">真实姓名:</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" id="name" name="name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">性别:</label>
            <div class="col-sm-7">
                <label class="radio-inline">
                    <input type="radio" name="sex" id="male" value="male" checked> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="female"  value="female"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label"></label>
            <div class="col-sm-7">
            <button type="submit" name="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>
<script src="lib/bootstrap-3.3.7-dist/bootstrapValidator/js/bootstrapValidator.js"></script>
<script>

    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            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: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                password:{
                    message:'密码验证失败',
                    validators:{
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        different:{
                            field:'username',
                            message:'密码不能与用户名相同'
                        }
                    }
                },
                confirmPassword:{
                    message:'密码验证失败',
                    validators:{
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        identical: {  //比较是否相同
                            field: 'password',  //需要进行比较的input name值
                            message: '两次密码不一致'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                },
                name:{
                    validators: {
                        notEmpty: {
                            message: '姓名不能为空'
                        }
                    }
                }
            }
        });
    });
</script>
</body>

表单验证的规则写在了javascript中，对应的是表单中的name值

其他规则：

$('form').bootstrapValidator({
      // 默认的提示消息
      message: 'This value is not valid',
      // 表单框里右侧的icon
      feedbackIcons: {
        　　　　　　　　valid: 'glyphicon glyphicon-ok',
        　　　　　　　　invalid: 'glyphicon glyphicon-remove',
        　　　　　　　　validating: 'glyphicon glyphicon-refresh'
      },
      submitHandler: function (validator, form, submitButton) {
        // 表单提交成功时会调用此方法
        // validator: 表单验证实例对象
        // form  jq对象  指定表单对象
        // submitButton  jq对象  指定提交按钮的对象
      },
      fields: {
        username: {
          message: '用户名验证失败',
          validators: {
            notEmpty: {
              message: '用户名不能为空'
            },
            stringLength: {  //长度限制
              min: 6,
              max: 18,
              message: '用户名长度必须在6到18位之间'
            },
            regexp: { //正则表达式
              regexp: /^[a-zA-Z0-9_]+$/,
              message: '用户名只能包含大写、小写、数字和下划线'
            },
            different: {  //比较
              field: 'username', //需要进行比较的input name值
              message: '密码不能与用户名相同'
            },
            identical: {  //比较是否相同
              field: 'password',  //需要进行比较的input name值
              message: '两次密码不一致'
            },
            remote: { // ajax校验，获得一个json数据（{'valid': true or false}）
              url: 'user.php',       //验证地址
              message: '用户已存在',   //提示信息
              type: 'POST',          //请求方式
              data: function(validator){  //自定义提交数据，默认为当前input name值
                return {
                  act: 'is_registered',
                  username: $("input[name='username']").val()
                };
              }
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: '邮箱地址不能为空'
            },
            emailAddress: {
              message: '邮箱地址格式有误'
            }
          }
        }
      }
    });