jQuery自定义表单验证插件（基于Bootstraps）

休息休息夏

于 2021-04-23 22:59:19 发布

阅读量329

点赞数 1

分类专栏： jQuery基础案例文章标签： javascript jquery html

本文链接：https://blog.csdn.net/qq_42881159/article/details/116074526

版权

jQuery基础案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery自定义表单验证插件（基于Bootstraps）

表单验证展示图：
在这里插入图片描述
1.表单验证后，点击“提交”，出现alter弹窗

2.当表单验证后，输入不符合后，阻止提交，并且触发表单验证

3.当输入符合后，提交成功，表单验证成功

结构图：
在这里插入图片描述
head：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.1.0.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="js/bootstrapValidator.js"></script>
</head>

HTML代码

<div class="container">
    <!--水平排列的表单，要求必须配合栅格系统使用-->
    <form action="" id="myForm" class="form-horizontal">
        <div class="form-group">
            <label for="username" class="col-md-3 control-label">用户名</label>
            <div class="col-md-6">
                <input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="control-label col-md-3">密码</label>
            <div class="col-md-6">
                <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label for="name" class="control-label col-md-3">姓名</label>
            <div class="col-md-6">
                <input type="text" id="name" name="name" class="form-control" placeholder="请输入中文名">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
</div>

JavaScript代码

<script>
    $(function () {
        /*先调用初始化代码来设置验证规则*/
        $("#myForm").Validator({
            successIcon:"glyphicon-thumbs-up",
            errorIcon: "glyphicon-thumbs-down",
            fields: {
                password:{
                    validators: {
                        notEmpty: {
                            message:"密码不能为空"
                        }
                    }
                },
                username:{
                    validators:{
                        notEmpty:{
                            message:"用户名不能为空"
                        },
                        stringLength:{
                            min:5,
                            max:16,
                            message: "长度必须在5-16之间"
                        },
                        regexp:{
                            regexp:/^[a-zA-Z]\w{4,15}$/,
                            message:"用户名格式不匹配"
                        }
                    }
                },
                name:{
                    validators:{
                        notEmpty:{
                            message:"姓名不能为空",
                        },
                        regexp:{
                            regexp:/[\u4e00-\u9fa5]/,
                            message:"姓名只能是中文"
                        }
                    }
                }
            }
        });
        $("#myForm").submit(function () {
            /*提交事件时触发验证规则*/
            $("#myForm").checkValidator();
            /*判断验证是否全部通过*/
            if($("#myForm").validatorStatus()){
                alert("可以提交");
            }else{
                alert("禁止提交");
            }
            return false;
        });
    });
</script>

bootstrapValidator.js插件

(function ($) {
    /*设置默认内容*/
    let defaultObj={
        successIcon:"glyphicon-ok",
        errorIcon:"glyphicon-remove",
        fields: {}
    };
    /*自定义实例对象插件*/
    $.fn.Validator=function (paramObj) {
        $.extend(defaultObj,paramObj);
    }
    $.fn.checkValidator=function () {
        let formEl=this.find("[name]");
        for(let i=0;i<formEl.length;i++){
            /*获取表单元素的jq对象*/
            let $el=$(formEl[i]);
            /*获取父级group标签*/
            let formGroup=$el.parents(".form-group");
            /*给每个表单元素的父级group添加样式*/
            formGroup.addClass("has-feedback");
            /*删除span标签*/
            formGroup.find("div.col-md-6").next("span").remove();
            /*给每个输入框后面加入一个文本提示内容*/
            formGroup.find("div.col-md-6").after($("<span class='help-block col-md-3'></span>"));
            $el.next("i").remove();
            /*追加字体图标*/
            $el.after($('<i class="form-control-feedback glyphicon"></i>'));
            /*获取表单元素的name的值*/
            let elName=$el.prop("name");
            /*匹配自定义验证规则中的属性值*/
            for(let key in defaultObj.fields){
                /*key表示用户自己写的验证规则的值,elName表示表单中某个标签的name的值*/
                if(key===elName){
                    /*获取验证规则对象*/
                    let validator=defaultObj.fields[key].validators;
                    let check=true;
                    let message="验证不通过";
                    /*遍历所有验证规则*/
                    for(let k in validator){
                        /*非空验证*/
                        if(k==="notEmpty"){
                            check=$el.val();
                            if(!check){
                                message=validator[k].message;
                                break;
                            }
                        }
                        if(k==="stringLength"){
                            /*获取文本框的值*/
                            let vlen=$el.val().length;
                            /*获取最小值*/
                            let min=validator[k].min;
                            /*获取最大值*/
                            let max=validator[k].max;
                            /*绑定验证状态*/
                            check=vlen>=min&&vlen<=max;
                            if(!check){
                                /*绑定验证消息*/
                                message=validator[k].message;
                                /*匹配到验证规则就退出循环*/
                                break;
                            }
                        }
                        if(k==="regexp"){
                            check=validator[k].regexp.test($el.val());
                            if(!check){
                                /*绑定验证消息*/
                                message=validator[k].message;
                                /*匹配到验证规则就退出循环*/
                                break;
                            }
                        }
                    }
                    /*根据验证状态操作页面样式*/
                    if(check){
                        $el.parents(".form-group").removeClass("has-error").addClass("has-success");
                        formGroup.find("i.glyphicon").removeClass(defaultObj.errorIcon).addClass(defaultObj.successIcon);
                        formGroup.find("span.help-block").text("");
                    }else{
                        $el.parents(".form-group").removeClass("has-success").addClass("has-error");
                        formGroup.find("i.glyphicon").removeClass(defaultObj.successIcon).addClass(defaultObj.errorIcon);
                        formGroup.find("span.help-block").text(message);
                        $el.focus();
                    }
                }
            }
        }
    }
    $.fn.validatorStatus=function () {
        let status=true;
        let groups=this.find("[name]").parents(".form-group");
        for(let i=0;i<groups.length;i++){
            if($(groups[i]).hasClass("has-error")){
                status=false;
                break;
            }
        }
        return status;
    }
}(jQuery));