javascript - 正则表达式 |模式属性值不是有效的正则表达式 : Uncaught SyntaxError: Invalid regular expression

Question

我通过 javascript 将一些 Regex 字符串注入(inject)到输入元素的 pattern 属性中(取决于上下文中的某些形式更改)并且它按预期工作但问题是，当我专注于输入时它会向控制台记录错误第一次。

我已尝试转义正则表达式，如下所示，但 HTML 输入无法根据之前使用的模式验证相应的值。

需要正则表达式代码

(\(?([\d\-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))

这就是我通过 JS 定义和注入(inject)它的方式

/([\d\-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+ )/g

这是我尝试过但在尝试转义时失败 HTML 模式属性

([\d\-)–+/(]+){6,}\)?([.-–/]?)([\d]+)

我真的在寻找一种方法来实现所有这些而不会出现任何错误:

• 正则表达式将在 JS 中用于匹配输入值，只有在有效时才继续
• 它还将在 HTML 中用作 pattern 属性，以向用户提供有关输入验证的反馈，希望不会出现此类错误； 模式属性值/(\(?([\d\-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g 不是有效的正则表达式:未捕获的语法错误:无效的正则表达式://(\(?([\d\-\)\–\+\/\(]+){6, }\)?([ .\-–\/]?)([\d]+))/g/: 转义无效

Answer 1

正则表达式本身并不能很好地验证电话号码，但由于您对模式感到满意，请参阅下文如何在 JS 和 HTML5 模式属性中使用它。

在JS中，你需要使用

var rx = /^\(?[\d +\/()–-]{6,}\)?[ .\/–-]?\d+$/;
// Test
console.log(rx.test("02162 - 54 91 44 79"));

在 HTML5 pattern 属性中， anchor 是多余的，转义字符应该只是允许转义的字符(即 [\(\)] -> [()]等):

input:valid {
  color: black;
  border: 5px solid #dadadada;
  border-radius: 7px;
}
input:invalid {
  color: navy;
  outline: none;
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;
}

<form name="form1"> 
 <input pattern="\(?[\d +\/()–-]{6,}\)?[ .\/–-]?\d+" title="Please enter a valid phone number!" value="(02162) 54 91 44 79" />
 <input type="Submit"/> 
</form>