bootstrapValidator表单基本使用(学习篇)

1、首先引入相关css、js文件

<link rel="stylesheet" type="text/css" href="../css/bootstrapValidator.min.css" />
<script src="../js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>

2、html部分

<form class="form-horizontal" role="form" id="form-registered">
    //文件上传
    <div class="form-group" style="display: none;" id="operator01">
        <label for="managerPath" class="col-sm-5 control-label">帅哥照片</label>
        <div class="col-sm-7" style="padding-left: 7px;">
            <input type="file" class="form-control" id="managerPath" name="managerPath">
        </div>
    </div>
    //输入框
    <div class="form-group" style="display: none;" id="operator03">
        <label for="managerName" class="col-sm-5 control-label">帅哥姓名</label>
        <div class="col-sm-7" style="padding-left: 7px;">
            <input type="text" class="form-control" name="managerName" id="managerName" placeholder="经办人姓名">
        </div>
    </div>
    //下拉选择器
    <div class="form-group">
        <label for="industryType" class="col-sm-5 control-label">帅哥类别</label>
        <div class="col-sm-7" style="padding-left: 7px;">
            <select class="form-control" name="industryType" id="industryType">
                <option>选择行业类别</option>
                <option value="0">IT</option>
                <option value="1">金融</option>
                <option value="2">空乘</option>
            </select>
        </div>
    </div>
    //日期时间
    <div class="form-group">
        <label class="col-sm-5 control-label" for="establishDate">帅哥日期：</label>
        <div class='col-sm-7' id='datetimepicker1' style="padding-left: 7px;">
            <input type='date' name="establishDate" id="establishDate" class="form-control" />
        </div>
    </div>
    //文本域
    <div class="form-group">
        <label for="desc" class="col-sm-5 control-label">机构简介</label>
            <div class="col-sm-7" style="padding-left: 7px;">
                <textarea class="form-control" name="desc" id="desc" rows="3"></textarea>
            </div>
    </div>
    单选按钮
    <div class="form-group">
        <label for="bankCardType" class="col-sm-5 control-label">银行卡类型</label>
        <div class="col-sm-7" style="padding-left: 7px;">
            <input type="radio" style="margin-left: 5px;" name="radio1" value="借记卡" /> 借记卡
            <input type="radio" style="margin-left: 45px;" name="radio1" value="单位结算卡" /> 单位结算卡
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-5 control-label"></label>
        <div class="col-sm-7" style="padding-left: 7px;">
            <button onclick="handelSubmit()" type="submit" name="submit" class="btn btn-default">提交认证</button>
        </div>
    </div>
</form>

3、js部分

window.onload = function(){
    $('#form-registered').bootstrapValidator({
        message: 'This value is not valid',
        excluded: [':disabled'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            managerPath: {
                validators: {
                    notEmpty: {
                        message: '帅哥照片不能为空'
                    },
                },
            },
            managerName: {
                validators: {
                    notEmpty: {
                        message: '帅哥名称不能为空'
                    },
                },
            },
            industryType: {
                validators: {
                    notEmpty: {
                        message: '帅哥类别不能为空'
                    },
                    callback: {
                        message: '选择行业类别不能为空',
                        callback: function(value, validator) {
                            if (value == "选择行业类别") {
                                return false;
                            } else {
                                return true;
                            }
                        }
                    }
                },
            },
            establishDate: {
                validators: {
                    notEmpty: {
                        message: '帅哥日期不能为空'
                    },
                },
            },
            desc: {
                validators: {
                    notEmpty: {
                        message: '机构简介不能为空'
                    },
                },
            },
            desc: {
                validators: {
                    notEmpty: {
                        message: '机构简介不能为空'
                    },
                },
            },
            radio1: {
                validators: {
                    notEmpty: {
                        message: '银行卡类型不能为空'
                    },
                },
            },
    })
}
//表单提交
function handelSubmit() {
    //先校验，在调是否通过校验的方法
     $("#form-registered").data('bootstrapValidator').validate();
    //校验表单是否通过
    var flag = $("#form-registered").data('bootstrapValidator').isValid();
    if (flag) {
        //获取要提交的值
        let managerName = $('#managerName').val();
        //发送请求
        $.ajax({
            type: "PUT", //请求方式
            url: register + "v1/enterprise-user", //地址，就是json文件的请求路径
            dataType: "json", //数据类型可以为 text xml json  script  jsonp
            contentType: "application/json",
            data: managerName,
            success: function(res) { //返回的参数就是 action里面所有的有get和set方法的参数
                //请求成功后要做的事情
            }
        });
    }
}

 

 

转自：https://blog.csdn.net/skyblue_afan/article/details/123328743