bootstrap的验证和确认对话框

 

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

 

引用

<!-- jquery-confirm.确认对话框 -->
<link href="~/assets/dist/css/jquery-confirm.min.css" rel="stylesheet" />
<script src="~/assets/dist/js/jquery-confirm.min.js"></script>

<!-- bootstrapValidator.验证 -->
<link href="~/assets/dist/css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="~/assets/dist/js/bootstrapValidator.js"></script>

 

 

JS

<script>
    $('#formMenu').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: 'The username can only consist of alphabetical, number and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },
        }
    }).on('success.form.bv', function (e) {
        //验证成功
        $.confirm({
            confirmButtonClass: 'btn-info',
            cancelButtonClass: 'btn-danger',
            title: '保存',
            content: '请确认，是否保存？',
            confirm: function () {

                $.ajax({
                    url: "/Menu/save",
                    type: "post",
                    data: $('#formMenu').serialize(),
                    success: function (data) {

                        $("#myModal").modal("hide");
                        tables.ajax.reload(null, false);
                    }
                });
                this.close();
            },
        });
    });


    //保存
    $('#save').on('click', function () {
        //开启验证
        $('#formMenu').bootstrapValidator('validate');
    })
</script>