2

我面临以下问题。在注册表单中，它会尝试远程检查给定的用户名是否已被使用。这很好用，如果用户名已经在使用中，我添加一个错误类就可以了。问题是，即使用户名已被使用，您仍然可以提交注册表单。远程验证不应该阻止它吗？

这是我的验证码。

var validator = $('#register').validate({
    rules: {
        registerUsername: {

            required: true,
            remote: {
            type: 'post',
            url: 'includes/CheckUsername',
            data: {
                username: function() {
                    return $('#registerUsername').val()
                }
            },
            complete: function(data){
                  if( data.responseText != "found" ) {
                      $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
                      return false;
                  }
                  else{
                      $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
                  }
                }
            }
        },
        registerEmail: {
            required: true
        },
        registerPassword: {
            required: true
        }
    },
    messages: {
        registerUsername: {remote: 'tzuwertzut',required: 'asdasd'},
        registerEmail: "",
        registerPassword: ""
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

});
$('#myModal').on('hidden.bs.modal', function () {
  validator.resetForm();
  $('#regEmailGroup').removeClass('has-error').removeClass('has-success');
  $('#regUsernameGroup').removeClass('has-error').removeClass('has-success');
  $('#regPassGroup').removeClass('has-error').removeClass('has-success');

});

任何提示将不胜感激。

4

1 回答 1

1

参考该remote方法的文档：

options：
这些选项深度扩展了默认值( dataType:"json", data:{nameOfTheElement:valueOfTheElement})。您提供的任何选项都将覆盖默认值。

和...

响应被评估为 JSON 并且必须true针对有效元素，并且可以是任意false的，undefined或者null针对无效元素，使用默认消息；或字符串，例如。“该名称已被占用，请尝试 peter123”以显示为错误消息。

（上面的“响应”一词是指来自您的服务器端代码的响应）

现在让我们检查您的代码：

remote: {
    type: 'post',
    url: 'includes/CheckUsername',
    data: {
        username: function () {
            return $('#registerUsername').val()
        }
    },
    complete: function (data) {
        if (data.responseText != "found") {
            $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
            return false;
        } else {
            $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
        }
    }
}

关于您的使用data:

data: {
    username: function () {
        return $('#registerUsername').val()
    }
}

根据上面引用的文档，该data选项的默认值已经是nameOfTheElement: valueOfTheElement，因此您根本不需要在这里覆盖它。您的语法没有问题，但仅当您还必须从另一个字段发送数据以及来自remote;目标字段的数据时才需要此选项。示例-您正在检查用户名字段，remote但您需要将电子邮件地址字段连同它一起发送。

关于您的使用complete:

complete: function (data) {
    if (data.responseText != "found") {
        $('#regUsernameGroup').addClass('has-error').removeClass('has-success');
        return false;
    } else {
        $('#regUsernameGroup').removeClass('has-error').addClass('has-success');
    }
}

您绝对不需要指定.addClass('has-error').removeClass('has-success')and .removeClass('has-error').addClass('has-success')。当remote规则收到通过/失败状态时，类的正确应用将自动发生。

您的逻辑试图确定响应是否匹配"found"。如果没有，则返回false. 如果是（匹配"found"），那么您希望它通过验证。但是，根据文档，如果服务器返回一个字符串，则认为它具有“失败”验证，并且该字符串成为错误消息。我相信您的return false行只是remote完全禁用规则，这就是您能够提交表单的原因。

基本上，您绝对不需要手动检查响应是否匹配。同样，远程规则只是在true验证通过时查找您的服务器端响应，或者false，如果验证失败undefined，null则为字符串。然后插件会自动处理所有内容，包括错误类。

只要您的服务器端代码构造正确以返回所需的响应，您的remote规则只需要看起来像这样......

remote: {
    type: 'post',
    url: 'includes/CheckUsername'
}
于 2013-11-08T21:22:56.967 回答