Regex |Значение атрибута шаблона не является допустимым регулярным выражением: Uncaught SyntaxError: Неверное регулярное выражение

Question

Я вставляю некоторую строку Regex в атрибут pattern элемента input через javascript (в зависимости от того, какая форма изменяется вне контекста), и она работает, как и ожидалось, но дело в том, что она регистрирует ошибку на консоли, когда фокусируюсь на вводе для вводав самый первый раз.

Я пытался избежать регулярного выражения, как вы можете видеть ниже, но затем при вводе HTML не удалось проверить соответствующее значение в соответствии с шаблоном, использованным ранее.

требуется код регулярного выражения

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

и вот как я определяю и внедряю его через JS

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

, и вот что я пробовал, и не удалось, покапытаюсь избежать его для атрибута шаблона HTML

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

Я действительно ищу способ достичь всего этого без каких-либо ошибок:

• Регулярное выражение будет использоваться в JS для match с входным значением и будет продолжаться только в том случае, если оно допустимо
• , оно также будет использоваться в HTML как атрибут шаблона , чтобы дать отзыв пользователя о проверке вводас надеждой без каких-либо ошибок, как этот;Pattern attribute value /(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: //(\(?([\d \-\)\–\+\/\(]+){6,}\)?([ .\-–\/]?)([\d]+))/g/: Invalid escape

Answer 1

Само регулярное выражение не очень хорошо проверяет телефонные номера, но, поскольку вы довольны шаблоном, см. Ниже, как его следует использовать в атрибуте шаблона JS и HTML5.

В JS вам необходимоиспользовать

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

В атрибуте HTML5 pattern якоря являются избыточными, и экранированные символы должны быть только теми, которые разрешены экранировать (т. Е. [\(\)] -> [()]и т. д.):

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>