美文网首页
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