美文网首页
BootstrapValidator 验证表单 form

BootstrapValidator 验证表单 form

作者: 赛亚人之神 | 来源:发表于2017-09-27 18:41 被阅读17次
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,放在隐藏域中

相关文章

网友评论

      本文标题:BootstrapValidator 验证表单 form

      本文链接:https://www.haomeiwen.com/subject/zjtpextx.html