时间戳

首页 > 解决方案 > 如何在 jQuery Validator 中使用 addMethod 验证全名？

javascript - 如何在 jQuery Validator 中使用 addMethod 验证全名？

问题描述

我目前正在使用 jQuery Validate 来验证我的表单数据，并且我正在对多个字段使用正则表达式来使用模式检查有效性。但是，即使在通过 addMethod 应用我的新验证方法之后，表单仍然允许人们在全名字段中仅使用名字来提交表单。

对于我的全名字段，我已经通过在字段上测试它而不在我的表单上使用 novalidate 来验证我的正则表达式的工作原理。

正则表达式：^([a-zA-Z]{2,}\s[a-zA-z]{1,}'?-?[a-zA-Z]{2,}\s?([a-zA-Z]{1,})?)

addMethod 尝试

jQuery.validator.addMethod("fullname", function(value, element) {
    return this.optional(element) || /^([a-zA-Z]{2,}\s[a-zA-z]{1,}'?-?[a-zA-Z]{2,}\s?([a-zA-Z]{1,})?)/.test(value);
}, 'Please enter your full name.');

<input id="full-name" name="Full_Name" type="text" class="form-control" placeholder="John Doe" required>

如果输入了单个姓名（例如 John）而不是全名，我的正则表达式应将其标记为无效并请求该人的全名。

标签： javascriptjqueryregexjquery-validate

解决方案

你需要做两件事：

  • 首先，true如果验证通过则返回，false否则返回。

  • 其次，实际调用中新增的方法.validate()。

这可以在下面看到：

jQuery.validator.addMethod("fullname", function(value, element) {
  if (/^([a-zA-Z]{2,}\s[a-zA-z]{1,}'?-?[a-zA-Z]{2,}\s?([a-zA-Z]{1,})?)/.test(value)) {
    return true;
  } else {
    return false;
  };
}, 'Please enter your full name.');

$("#sample").validate({
  rules: {
    Full_Name: { // Corresponds to the `name` attribute
      required: true,
      fullname: true // Attaches the new method to the element
    }
  },
  submitHandler: function(form, e) {
    e.preventDefault();
    console.log('The form is valid and would have been submitted successfully');
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<form id="sample">
  <input id="full-name" name="Full_Name" type="text" class="form-control" placeholder="John Doe" required>
  <button id="submit">Submit</button>
</form>

推荐阅读