2

我正在使用Jquery Validation 插件在提交之前在客户端验证我的表单。

一旦用户填写了该字段（onblur），我的表单中有一个特定字段，我想使用 ajax 对服务器进行验证。（基本上是用户名字段，我想在服务器上检查用户名是否可用并相应地显示一条消息）

这是我用来验证表单的代码：

$(document).ready(function()
{
     $("#signupForm").validate({
        submitHandler: ajaxSubmitForm});

});

（ajaxSubmitForm只是提交表单的js代码）

如何使用 Jquery Validation 插件让用户名字段在更改时将其值发送到服务器（使用 ajax）并让服务器返回一个结果，该结果以某种方式将该字段标记为在客户端上有效，以便其余的验证作品？

谢谢

4

2 回答 2

2

您可以使用该元素上的远程规则来执行此操作。你会这样申请：

$('#signupForm').validate({
    rules: {
        username: {
            remote: 'check_username.php' // this is the service page that returns true/false
        }
    }
});

然后要触发模糊验证，请添加以下内容：

$('input[name="username"]').on('blur', function() {
    $('#signupForm').validate().element(this); // this triggers the single element validation
});
于 2012-06-29T13:37:02.493 回答
1

submitHandler 在第一次提交表单之前不会触发。如果您想在用户第一次填写表单时检查用户名的唯一性，您需要一个单独的函数。下面的示例假设您有一个页面运行 SQL 查询以查看提供的用户名是否存在于数据库中，然后返回一个 json 字符串，例如"{taken:false}"用户名是否唯一

$('#yourForm [name="username"]').on('blur',function(){
    var username = $(this).val();
    $.get('check/username.php',{username:username},function(data) {
        if(data.taken) {
            // highlight the field and indicate that the username is already taken
        }
    },'json');
}

调用的细节$.get取决于你的后端是如何设置的。但总的来说，这个过程会：

  • 用户输入用户名
  • 用户模糊了场外
  • 对服务器进行 $.get 或 $.ajax 调用以检查用户名的唯一性
  • 如果来自服务器的响应表明用户名不是唯一的，请处理您的验证（突出显示该字段，添加X图标等）并且要么
    • 在用户名唯一之前阻止表单提交，或者
    • 让表单提交并返回重复用户名的错误

更新

如果要为验证插件创建新规则，可以执行以下操作：

function isUsernameUnique(username,field) {
  var unique = false;
  $.ajax({
    url: 'path/to/usernameCheck/',
    data: { username: username },
    async: false,
    success: function(data) { unique = data.unique; }
  });
  return unique;
}

$.validator.addMethod(
    'uniqueUsername',
    isUsernameUnique,
    'That username is already in use. Please choose a unique username.'
);

然后，在表单的 validate 函数中：

$('#yourForm').validate({
  ...
  rules: {
    username: { uniqueUsername: true }
    ...
  }
  ...
});

并且，您的用户名字段的单独blur功能：

$('[name="username"]').on('blur',function(){
  var unique = isUsernameUnique($(this).val(),$(this));
  if(!unique) {
    // handle error
  }
});

这使您可以为预提交验证和验证插件重用相同的功能。但是，我在这里看到两个问题：

1 - 在您第一次提交后，$.fn.validate() 将急切地验证您的用户名字段，这意味着blur不再需要用户名字段上的事件。也许您可以在第一次提交后禁用它以防止不必要的 ajax 调用

2 - 它不是 100% DRY，因为您需要在blur事件处理程序中进行自己的错误处理

于 2012-06-27T14:21:23.130 回答