jQuery 验证 HTML5 中的正则表达式答案

【问题标题】：jQuery Validate regex in HTML5jQuery 验证 HTML5 中的正则表达式
【发布时间】：2016-03-01 12:09:28
【问题描述】：

我正在使用jQuery validate 来验证前端表单。理想情况下，我希望从输入字段的 HTML5 pattern 属性中提取正则表达式。

我有一个使用以下代码的工作版本：

function isUKPostcode(value){
  return /^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$/.test(value);
}

$.validator.addMethod("postcode", function(value, element){
  return this.optional(element) || isUKPostcode(value);
}, "Please enter a valid UK postcode");

但理想情况下，我想简单地设置它：

<input id="Inputfield_user_first_name" class="postcode" name="user_first_name" type="text" maxlength="60" pattern="([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)">

required 和 maxlength 等属性被$.validate() 自动拾取的方式相同

有人知道这是否可行吗？

【问题讨论】：

从pattern中删除$，HTML5不需要^和$锚点

标签： jquery regex html validation jquery-validate

【解决方案1】：

无需编写自定义方法。

您只需要包含the additional-methods.js file。它包括 pattern 方法，该方法将自动获取 HTML5 pattern 属性。

【讨论】：

【解决方案2】：

作为一种解决方法，我想出了以下代码来检查pattern 属性并在validator.addMethod() 期间设置自定义消息。

$o.validator.addMethod("regex", function(value, element){
  var pattern = $o(element).prop('pattern');
  if(!pattern || this.optional(element)){
    return true;
  }
  return new RegExp(pattern).test(value);
}, $o.validator.format("{0}"));

$o.validator.addClassRules("visible-postcode-input", {
  regex: "Please enter a valid UK postcode",
});

【讨论】：