Bootstrap组件进行表单校验

青衫染红尘

发布于 2021-01-19 11:30:37

2.2K0

发布于 2021-01-19 11:30:37

文章被收录于专栏：Surpass' Blog

前言

博主在做项目的时候前段框架使用bootstrap，在进行表单提交是需要对表单数据进行校验，那么如何进行表单校验。

地址

校验要用的到组件叫bootstrapvalidator。

bootstrapvalidator源码： https://github.com/nghuuphuoc/bootstrapvalidator

正文

文件引入

下载后需要引入jquery,bootstrap.min.js,bootstrap.min.css以及bootstrapvalidator相关的js和css。

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

Form表单

这里举个例子创建一个表单。

　　　　　<form id="formLogin">
    <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" name="username" />
        <span id="username_err"></span><!--这里用来显示错误信息-->
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="text" class="form-control" name="password" />
        <span id="password_err"></span>
    </div>
    <div class="form-group">
        <button type="button" name="submit" class="btn btn-primary">提交</button>
    </div>
</form>

校验初始化

<script type="text/javascript">
        $(document).ready(function () {
            $("#formLogin").bootstrapValidator({
                excluded:[":disabled",":hidden"], // 关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        container: "#username_err",//错误信息显示位置
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            }
                        }
                    },
                    password: {
                        container: "#password_err",//错误信息显示位置
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            }
                        }
                    }
                }
            });
        });
    </script>

js提交校验

function formLogin(){
    var bootstrapValidator = $("#formLogin").data("bootstrapValidator").validate();
    if (bootstrapValidator.isValid()){
        //异步提交
        $.ajax({
                type : 'post',
                url : "",
                dataType: 'json',
                data : $("#formLogin").serialize(),
                success : function(result) {
                    alert(result.rspMsg);
                }
		});
	}
}

以上只是简答的校验表单数据是否为空，如果为空则会在<span></span>里面显示错误信息。不为空则提交登录。

当然bootstrap表单校验并不是只有这么一点能力的，继续看吧。

进阶

　　$(function () {
    $('#formLogin').bootstrapValidator({
         excluded:[":disabled",":hidden"], // 关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
        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: '用户名只能包含大写、小写、数字和下划线'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '邮箱地址格式有误'
                    }
                }
            }
        }
    });
});

这段可以看出，不但能够对数据是否为空进行校验，还能对数据格式进行校验。-