BootstrapValidator前端验证框架基础使用

最新推荐文章于 2021-12-20 09:50:43 发布

Kris_Wilson

最新推荐文章于 2021-12-20 09:50:43 发布

阅读量2.6k

点赞数 1

分类专栏： Web前端文章标签： Web前端 jQuery插件 BootstrapValidator

本文链接：https://blog.csdn.net/hehe1006114318/article/details/80421761

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端开发时总离不开表单验证，于是无意中发现了BootstrapValidator这个插件，和Bootstrap十分契合。
以下是学习使用的过程：
其中必须引入的相关js和css、字体文件为：

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

如果需要使用Bootstrap的字体和图标的话，还需要将fonts文件夹放入项目的根目录和js目录同级，如图：
这里写图片描述

test_bootstrap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test_bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrapValidator.css">
    <script src="libs/jquery-3.3.1.js"></script>
    <script src="libs/bootstrap.js"></script>
    <script src="libs/bootstrapValidator.js"></script>
    <script src="js/test_bootstrap.js"></script>
</head>
<body>
    <form id="myForm" action="#" method="post" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-2 control-label">账号类型</div>
            <div class="col-sm-10">
                <div class="radio-inline">
                    <input type="radio" name="accountType" value="0">个人
                </div>
                <div class="radio-inline">
                    <input type="radio" name="accountType" value="1">企业
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">用户名</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="username" placeholder="用户名">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">登录密码</div>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" placeholder="登录密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">确认密码</div>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password2" placeholder="确认密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">手机号</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="phone" placeholder="手机号">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">E-mail</div>
            <div class="col-sm-10">
                <input type="email" class="form-control" name="email" placeholder="E-mail">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">安全问题</div>
            <div class="col-sm-10">
                <select name="question" class="form-control">
                    <option value="" disabled selected>请选择安全问题</option>
                    <option value="0">你的生日是？</option>
                    <option value="1">你的爱人是？</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">问题答案</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="answer" placeholder="问题答案">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">性别</div>
            <div class="col-sm-10">
                <div class="radio-inline">
                    <input type="radio" name="sexRadio" value="0">男&nbsp;&nbsp;
                </div>
                <div class="radio-inline">
                    <input type="radio" name="sexRadio" value="1">女&nbsp;&nbsp;
                </div>
                <div class="radio-inline">
                    <input type="radio" name="sexRadio" value="2">保密
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">验证码</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="verifyCode" placeholder="验证码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <div class="col-sm-10">
                <button id="submit" type="submit" class="btn btn-lg btn-success btn-block">注册</button>
            </div>
        </div>
    </form>
</body>
</html>

test_bootstrap.js

$(function () {
    $("#myForm").bootstrapValidator({
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        live: 'enabled',
        submitHandler: null,
        trigger: null,
        threshold: null,
        fields: {
            accountType: {
                feedbackIcons: false,
                validators: {
                    notEmpty: {
                        message: '账号类型不能为空'
                    }
                }
            },
            username: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 22,
                        message: '6到22个字符之间'
                    },
                    // threshold: 6,
                    // remote: {
                    //     url: 'http://localhost:8080/validateUsername.json',
                    //     message: '用户已存在',
                    //     delay: 1000,
                    //     type: 'POST',
                    //     contentType: 'application/json;charset=UTF-8',
                    //     dataType: 'json',
                    //     data: JSON.stringify({username: $('[name=username]').val()})
                    // },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '必须是字母、数字、下划线或.'
                    }
                }
            },
            password: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: '登录密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 22,
                        message: '6到22个字符之间'
                    },
                    different: {
                        field: 'username',
                        message: '不能和用户名相同'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '必须是字母、数字、下划线或.'
                    }
                }
            },
            password2: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: '确认密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 22,
                        message: '6到22个字符之间'
                    },
                    identical: {
                        field: 'password',
                        message: '两次密码不一致'
                    },
                    different: {
                        field: 'username',
                        message: '不能和用户名相同'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '必须是字母、数字、下划线或.'
                    }
                }
            },
            phone: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: '手机号不能为空'
                    },
                    stringLength: {
                        min: 11,
                        max: 11,
                        message: '请输入11位手机号码'
                    },
                    regexp: {
                        regexp: /^1[3|5|7|8]{1}[0-9]{9}$/,
                        message: '请输入正确的手机号码'
                    }
                }
            },
            email: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: 'email不能为空'
                    },
                    emailAddress: {
                        message: 'email格式错误'
                    }
                }
            },
            question: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: '安全问题不能为空'
                    }
                }
            },
            answer: {
                feedbackIcons: true,
                validators: {
                    notEmpty: {
                        message: '问题答案不能为空'
                    }
                }
            },
            sexRadio: {
                feedbackIcons: false,
                validators: {
                    notEmpty: {
                        message: '性别不能为空'
                    }
                }
            },
        }
    });

    $("#submit").on("click", function () {
        $(".form-horizontal").bootstrapValidator('validate');//提交验证
        if($(".form-horizontal").data("bootstrapValidator").isValid()){
            //表单提交的方法、比如ajax提交
            alert("Success....");
        }
    });
})