---

title: bootstrap表单校验
copyright: true
date: 2020-05-10 15:13:57
tags: bootstrap
categories: 前端
description: 使用bootstrap进行表单校验

---

前言

博主在做项目的时候前端框架使用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: '邮箱地址格式有误'
                        }
                    }
                }
            }
        });
    });

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

• notEmpty：不能为空。

• emailAddress：邮箱格式

• regexp：正则表达式

• stringLength：数据长度

其实还有很多的校验规则，它们都是以JSON格式呈现的。其他常见的校验格式：

• creditCard：身份证
• date：日期
• ip：IP地址
• phone： 电话
• url：url链接
• ······

对于日常开发工作这些已经足够使用了，想要更深了解的可直接参考官方api。

好啦，这次就说到这里。