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

How to specifically validate a certain form field using Jquery Validation plugin

本文关键字：验证 表单 字段 何使用 Jquery 插件      更新时间：2023-09-26

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

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

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

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

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

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

谢谢

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

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

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% DRY，因为您需要在 blur 事件处理程序中执行自己的错误处理

相关文章：