BootstrapValidator - 表单验证插件

BootstrapValidator是一款基于Bootstrap的强大jQuery表单验证插件。

使用方法

一、引入 js 和 css 文件

<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

二、HTML表单示例

<form class="form-horizontal" id="demo_form">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Email address</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

说明

如果想要对字段进行验证，就必须放在 <div class="form-group"></div>内

表单元素必须要有name属性值，用来匹配字段， 比如 name="email" 

三、添加规则验证

1、在html标签中添加，代码如下所示：

<div class="form-group">
    <label class="col-lg-3 control-label">Username</label>
    <div class="col-lg-5">
        <input type="text" class="form-control rounded-0" id="email" name="email" required data-bv-notempty-message="自定义未填提示" placeholder="* {dr_lang('Email')}">
    </div>
</div>

2、添加 js 文件，代码如下：

$(function () {
    $(".dyui-validation").bootstrapValidator({
        excluded: [":disabled"],
        message: '表单校验',
        feedbackIcons: {
            valid: 'bi bi-check-lg',
            invalid: 'bi bi-x-lg',
            validating: 'bi bi-arrow-repeat'
        },
        fields: {
            uname:{
                message: "name字段校验",
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    regexp: {
                        regexp:/^[\u4e00-\u9fa5]+$/,
                        message: '只能输入汉字'
                    },
                    stringLength: {/*长度提示*/
                        max: 16,
                        message: '用户名不能超过16个字符'
                    }
                }
            },
            mobile:{
                message: "mobile字段校验",
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '手机号码不能为空'
                    },
                    regexp: {
                        regexp:/^1[3456789]\d{9}$/,
                        message: '手机号码格式错误'
                    },
                }
            },
            email: {
                message: "email字段校验",
                trigger:"change",
                validators: {
                    emailAddress: {
                        message: 'Mailbox format error'
                    }
                }
            },
            area: {
                message: "area字段校验",
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '所在地区不能为空'
                    }
                }
            },
            address: {
                message: "address字段校验",
                trigger: "change",
                validators: {
                    notEmpty: {
                        message: '详细地址不能为空'
                    },
                    stringLength: {/*长度提示*/
                        max: 50,
                        message: '详细地址不能超过50个字符'
                    }
                }
            },
            default: {

            }
        }
    });

});