zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    wikioi 1002 旁路
    OS X升级到10.10使用后pod故障解决方案出现
    Python challenge 3
    maven 编
    独立博客网站FansUnion.cn操作2多年的经验和教训以及未来计划
    Wakelock API详解
    智遥工作流——会签与多人审批区别
    mysql 参数optimizer_switch
    OpenRisc-31-关于在设计具有DMA功能的ipcore时的虚实地址转换问题的分析与解决
    TROUBLE SHOOTING: FRM-30425
  • 原文地址:https://www.cnblogs.com/tangge/p/5045814.html
Copyright © 2011-2022 走看看