bootstrapvalidator验证表单

 

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator  或者 http://www.jq22.com/jquery-info522

boostrapvalidator api：http://bv.doc.javake.cn/api/

表单格式:

<form>
            <div class="form-group">
                <label class"col-lg-3”>Username</label>
<div class="col-lo-9">
                <input type="text" class="form-control" name="username" />
</div>
            </div>
            <div class="form-group">
                <label>Email address</label>
                <input type="text" class="form-control" name="email" />
            </div>
            <div class="form-group">
                <button type="submit" name="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>

 

调用

$(function () {
        $('form').bootstrapValidator({
            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: '邮箱地址格式有误'
                        }
                    }
                }
            }
        });
    });

 防止表单重复提交

// 修复bootstrap validator重复向服务端提交bug
                    $form.on('success.form.bv', function(e) {
                        // Prevent form submission
                        e.preventDefault();
                    });

日期验证

//日期
            $( "#datepicker,#datepicker2" ).datepicker({
                showOtherMonths: true,
                selectOtherMonths: false,
                format: "yyyy-mm-dd",
            }).on('changeDate', function(ev){
                var name = $(this).attr('name');
                $('form.search').data('bootstrapValidator').updateStatus(name, 'NOT_VALIDATED', null)
                        .validateField(name);
            });