Правильно имитировать атрибут «шаблон» с помощью javascript

Question

Я пытаюсь реплицировать атрибут html5-шаблона с помощью javascript, но получаю несогласованные результаты.

Узор [a-zA-Z\. \']+

В Chrome, набрав "ASD 123" не проходит тест.

Используя что-то вроде

el.value.match(new RegExp(el.pattern)) 

позволяет "ASD 123" до конца, очевидно, потому, что "ASD" является матч.

Я могу решить эту проблему, добавив ^ и $ в начало и конец моего шаблона, но вопрос в том, есть ли там какая-то функция, которая реализована точно так же, как атрибут шаблона? Есть ли другие сюрпризы, которые я должен ожидать?

Answer 1

Существуют ли другие сюрпризы я должен ожидать?

Да. Вы можете посмотреть вверх pattern attribute in HTML5 spec:

Если input элемента имеет атрибут pattern указанных, и значение атрибута, при компиляции как регулярное выражение JavaScript с global, ignoreCase и multiline флагов отключены (см ECMA262 Редакция 5, разделы 15.10.7.2 - 15.10.7.4), успешно компилируется, тогда результирующее регулярное выражение является регулярным выражением скомпилированного шаблона элемента.

Это хорошо, так как это означает, что регулярное выражение JS будет делать точно как HTML один.

Составленный паттерн регулярного выражения, когда сопоставляется строки, должны иметь свое начало якорь к началу строки и ее конец, прикрепленной к концу строки.

Примечание: Это означает, что язык регулярных выражений, используемый для этого атрибута, такой же, как и в JavaScript, за исключением того, что атрибут pattern сопоставляется со всем значением, а не только с любым подмножеством (в некоторой степени, как если бы он подразумевал ^(?: в начале рисунка и )$ в конце).

Как вы можете видеть, просто добавив ^ и $ недостаточно. Если, например, кто-то вошел в дизъюнкцию A|B, то ^A|B$ был бы неправильным - он должен быть ^(A|B)$.

Также вы можете заметить, что атрибут pattern не применяется к входам, которые установлены на multiple.

Есть ли какая-то функция там, которая реализована точно так же, как атрибут шаблона?

Вы можете посмотреть https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms для некоторых распространенных библиотек/плагинов polyfill, но я не тестировал их на соответствие стандартам.

Answer 2

Добавление ^ и $ более или менее реализует его как атрибут pattern. За самой последней версией спецификации W3C для pattern в HTML 5 (http://www.w3.org/html/wg/drafts/html/master/forms.html#the-pattern-attribute):

Это означает, что регулярный язык выражение, используемое для этого атрибута является такой же, как используется в JavaScript, за исключением того, что атрибут шаблона сопоставляется с целым значением, а не только с каким-либо подмножеством (несколько, как если бы он подразумевал a^(?: в начале рисунка и a) $ в конце).

(курсив добавлен)

Answer 3

Суть такой функции, вероятно, будет что-то похожее на

function validate(el) { 
    // Check hasAttribute to avoid a regex like ^(?:null)$ 
    return el.value && el.hasAttribute('pattern') 
    ? new RegExp('^(?:' + el.getAttribute('pattern') + ')$').test(el.value) 
    : null 
} 

(IE 8+ из hasAttribute)

Хотя надлежащее выполнение проверки будет также учитывать другие факторы, такие как наличие атрибута required. См. Data form validation и шаблоны формы HTML5, такие как Making HTML5 Form backwards compatible для более подробной информации.