Question

我在提交前使用Jquery Validation plugin在客户端验证我的表单。

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

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

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

});

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

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

由于

Answer 1

您可以使用该元素上的remote rule执行此操作。你这样申请：

$('#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
});

Answer 2

在第一次提交表单之前，

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

然后，在您的表单的验证功能中：

$('#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％干，因为您需要在blur事件处理程序中执行自己的错误处理

如何使用Jquery Validation插件专门验证某个表单字段

2 个答案: