Question

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

这是我的验证码。

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');

}）;

任何提示都将不胜感激。

Answer 1

参考the documentation for the remote method：

选项：
这些选项深度扩展默认值（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')和.removeClass('has-error').addClass('has-success')。当remote规则接收通过/失败状态时，正确地自动发生类的正确应用。

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

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

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

remote: { type: 'post', url: 'includes/CheckUsername' }

JQuery远程验证（不阻止表单提交）

1 个答案: