Bootstrap表单验证插件jquery.bootstrapvalidator示例

Bootstrap表单验证插件jquery.bootstrapvalidator示例
jquery.bootstrapvalidator是一款小巧轻量级的表单验证插件,简单易用。

入门指南

使用教程

1.引入CSS,JS依赖库

<link href="./path/to/css/bootstrap-3.3.7.min.css" rel="stylesheet">
<link href="./path/to/css/font-awesome-4.7.0.min.css" rel="stylesheet">
<link href="./path/to/css/bootstrapValidator-0.5.3.min.css" rel="stylesheet">
<script src="./path/to/js/jquery-3.3.1.min.js"></script>
<script src="./path/to/js/bootstrap-3.3.7.min.js"></script>
<script src="./path/to/js/bootstrapValidator-0.5.3.min.js"></script>

2.HTML标签(核心部分)

<form class="well form-horizontal" action="doContactAction" method="post" id="contactUsForm">
    <fieldset>
        <legend><h3 class="text-center">jquery.bootstrapvalidator表单验证示例-联系我们</h3></legend>
        <div class="form-group">
            <label class="col-md-4 control-label">姓名</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input name="name" placeholder="请输入姓名" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">邮箱</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                    <input name="email" placeholder="E-Mail地址" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">电话号码</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                    <input name="phone" placeholder="(010)13800000000" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">通讯地址</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input name="address" placeholder="详细地址" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">State</label>
            <div class="col-md-4 selectContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                    <select name="provence" class="form-control selectpicker">
                        <option value=" ">===所在省市===</option>
                        <option>四川</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广东</option>
                        <option>江苏</option>
                        <option>湖南</option>
                        <option>浙江</option>
                        <option>其他</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">邮编:</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <input name="zip" placeholder="邮编编码" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">个人网站</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
                    <input name="website" placeholder="" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label">评论信息</label>
            <div class="col-md-4 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" placeholder="在这里留下您的评论"></textarea>
                </div>
            </div>
        </div>
        <div class="alert alert-success" role="alert" id="successMsg" style="display: none;">成功 <i
                                                                                                   class="glyphicon glyphicon-thumbs-up"></i> 感谢您的反馈,我们会尽快联系您!
        </div>
        <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-4">
                <button type="submit" class="btn btn-warning">发送 <span class="glyphicon glyphicon-send"></span>
                </button>
            </div>
        </div>
    </fieldset>
</form>

3.Javascript脚本初始化

$(function () {
    $('#contactUsForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                validators: {
                    stringLength: {
                        min: 2,
                    },
                    notEmpty: {
                        message: '姓名为必填项'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '无效邮箱地址'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: '请输入电话号码'
                    },
                    phone: {
                        country: 'CN',
                        message: '电话号码无效'
                    }
                }
            },
            address: {
                validators: {
                    stringLength: {
                        min: 8,
                    },
                    notEmpty: {
                        message: '请输入详细地址信息'
                    }
                }
            },
            provence: {
                validators: {
                    notEmpty: {
                        message: '请选择您所在的省份'
                    }
                }
            },
            zip: {
                validators: {
                    notEmpty: {
                        message: '邮政编码不能为空'
                    }
                }
            },
            comment: {
                validators: {
                    stringLength: {
                        min: 10,
                        max: 200,
                        message: '请输入不少于10字,最多200字的评论'
                    },
                    notEmpty: {
                        message: '评论不能为空'
                    }
                }
            }
        }
    })
        .on('success.form.bv', function (e) {
        $('#successMsg').show("slow");
        $('#contactUsForm').data('bootstrapValidator').resetForm();

        //住址表单自动提交
        e.preventDefault();

        //表单对象
        var $form = $(e.target);

        //提交表单数据
        $.post($form.attr('action'), $form.serialize(), function (result) {
            //处理表单处理结果
        }, 'json');
    });
});

这样就完成了jquery.bootstrapvalidator表单验证示例

the end