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>
  • 相关阅读:
    Jmeter使用实践-接口diff测试
    Jmeter发送HTTPS请求
    Jmeter使用实践- 基础介绍
    Jmeter性能测试工具的使用(Web性能测试)
    使用JMeter创建FTP测试计划
    Jmeter引用cookies进行登录实战
    Jmeter: PATCH方法无法发送参数的暂时解决方法
    Springboot整合Freemarker
    Springboot整合Jsp
    Springboot文件上传
  • 原文地址:https://www.cnblogs.com/tangge/p/5045814.html
Copyright © 2011-2022 走看看