小案例搞懂—bootstrapvalidator前端表单校验

Bootstrap Validator入门案例

• Bootstrap Validator数据校验就是表单验证。友好的错误提示能增加用户体验。
• jQuery form validator for Bootstrap，从描述中我们就可以知道它至少需要jQuery、bootstrap的支持

1、导入相关组件

<%--引入bootstrap.css--%>
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<%--引入BootstrapValidator.css--%>
<link href="${pageContext.request.contextPath}/bootstrapvalidator/css/bootstrapValidator.min.css" rel="stylesheet">

<%--引入jquery.js--%>
<script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<%--引入Bootstrap.js--%>
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<%--引入BootstrapValidator.js--%>
<script src="${pageContext.request.contextPath}/bootstrapvalidator/js/bootstrapValidator.min.js"></script>

2、如果想对某一个字段添加验证规则，需要div(class=“form-group”)包裹，input标签必须有name值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构。

<div align="center">
    <form id="myForm" action="${pageContext.request.contextPath}/demo01" method="post">
        <div class="form-group">
            账户:<input type="text" name="username"><br>
        </div>
        <div class="form-group">
            密码:<input type="text" name="password"><br>
        </div>
        <div class="form-group">
            <button type="submit">提交</button>
        </div>
    </form>
</div>

3、使用js添加验证

<script>
    $(function () {//页面加载完成
        $("#myForm").bootstrapValidator({
            message : "this is not a valid field",//设置提示信息
            fields:{//设置要校验的字段集合
                username:{
                    validators:{
                        notEmpty:{
                            message:"账户不能为空"
                        },
                        stringLength:{
                            min:6,
                            max:10,
                            message: "账户长度为6-10"
                        },
                        regexp:{
                            regexp: /^[a-z0-9]{6,10}$/,
                            message:"账户格式不正确"
                        }
                    }
                },
                password:{
                    validators:{
                        notEmpty:{
                            message:"密码不能为空"
                        },
                        stringLength:{
                            min:6,
                            max:10,
                            message:"密码长度为6-10"
                        },
                        regexp:{
                            regexp: /^[a-z0-9]{6,10}$/,
                            message:"密码格式不正确"
                        },
                                                    			 different:{
                                message:"密码不能和手机号一致",
                                field:"user_tel"
                            }
                    }
                }
            }

        });
    })
</script>

4、运行效果如下：