BootstrapValidator 验证表单 form

简介: function initBootstrapValidator() { $("#roleForm").bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphico...
function initBootstrapValidator() {
    $("#roleForm").bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            roleName: {
                validators: {
                    notEmpty: {
                        message: '请填写角色名'
                    },
                    stringLength: {
                        min: 3,
                        max: 16,
                        message: '角色名长度在3-16位'
                    },
                    remote: {
                        type: 'POST',
                        delay: 1000,
                        url: 'checkExistOne.html',
                        message: '角色名已经存在',
                        data: function (validator) {
                            //自定义提交数据,默认为当前input name值
                            return {
                                test: "test"
                            }
                        }
                    },
                    regexp: {
                        regexp: /^[a-zA-Z_]+$/,
                        message: '角色名仅能使用字母下划线'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e, data) {
        var id = $('#id_update').val();
        // -1 表示添加角色,否则是修改角色
        if (id == -1) {
            var roleName = $("#roleName").val();
            var roleDesc = $("#roleDesc").val();
            if (roleName == "" || roleName == "请填写角色名称") {
                showMessage("请填写角色名称");
                return false;
            }
            var param = {roleName: roleName, roleDesc: roleDesc };
            $.post('addRole.html', param).done(function (data) {
                if (0 === data.code) {
                    $("#roleName").val("");
                    $("#roleDesc").val("");
                    $('#tablelist').bootstrapTable('refresh', {url: basePath + '/managerRole/list.html',query: {}});
                    showMessage(data.message);
                } else {
                    showMessage(data.message);
                }
            });
            $('#addRole').modal('hide');
        } else {
            var roleDesc = $("#roleDesc").val();
            var param = {id: id, roleDesc: roleDesc };
            $.post('updateRole.html', param).done(function (data) {
                if (0 === data.code) {
                    $("#roleName").val("");
                    $("#roleDesc").val("");
                    showMessage(data.message);
                    $('#tablelist').bootstrapTable('refresh', {url: basePath + '/managerRole/list.html',query: {}});
                } else {
                    showMessage(data.message);
                }
            });
            $('#addRole').modal('hide');
        }
        $("#roleForm").bootstrapValidator('resetForm', true);
    });

    $('#addRole').on('hide.bs.modal', function () {
        $("#roleForm").bootstrapValidator('resetForm', true);
    });

}

验证成功后,根据 隐藏域 判断是走编辑还是添加函数
1:添加时在隐藏域放一个,-1标志位
2:编辑时把主键 id,放在隐藏域中

目录
相关文章
|
7月前
|
移动开发 JavaScript 小程序
uView Form 表单
uView Form 表单
161 1
|
JavaScript
Element el-form 表单详解
本文目录 1. 前言 2. 基本用法 3. 行内表单 4. 标签对齐方式 5. 调整尺寸 6. 小结
1710 0
Element el-form 表单详解
|
JavaScript
layui-form下隐藏元素的验证问题
layui-form下隐藏元素的验证问题
|
Java
SpringMVC中使用form:form表单标签报500错误
SpringMVC中使用form:form表单标签报500错误
120 0
|
JSON 前端开发 数据安全/隐私保护
bootstrapvalidator 校验
callback 函数可以写自己的方法校验 issueInvoiceForm.validation = function(){ $('#issueInvoiceForm').on('init.field.bv', function(e, data) { var $icon = data.element.data('bv.icon'),
1879 0
|
JavaScript
Extjs Form 表单修改
Extjs修改分两种方法:1.前台直接加载;2.通过后台远程加载 1.直接加载:方法 form.getForm().loadRecord(); 应用时要求页面上已经存在页面中的所有数据,比如选中gridPanel一行,然后直接传递此行记录,到formPanel页面,可直接加载 2.后台加载:方法 form.getForm().load(); 应用时 传递一个参数到后台,然后远程取值,绑定。
1025 0
|
JavaScript
槽糕,layui表单提交俩次
槽糕,layui表单提交俩次
229 0
槽糕,layui表单提交俩次
|
移动开发 JSON JavaScript
基于原生JS验证表单组件:xy-form
基于原生JS验证表单组件:xy-form
基于原生JS验证表单组件:xy-form
|
前端开发
LayUI表单提交数据为空
本文目录 1. 现象 2. 解决方案
547 0
|
JavaScript 前端开发 数据安全/隐私保护
jQuery之validate验证表单
访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 validate.
2050 0