Как проверить ввод формы с помощью проверки ввода HTML5

я попытался найти полный список шаблонов для проверки ввода с помощью проверки формы HTML5 для различных типов, в частности url, email, tel и такие, но я не мог найти любой. В настоящее время встроенные версии этих входных проверок далеки от совершенства (и tel даже не проверяет, является ли вещь, которую вы вводите, номером телефона). Поэтому мне было интересно, какие шаблоны я могу использовать для проверки того, что пользователь вводит правильный формат в входы?

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

type="email"

это поле разрешает электронные письма с неправильными доменами После@, а также позволяет адресам начинаться или заканчиваться тире или периодом, что также запрещено. Итак,.example-@x разрешено.

type="url"

этот вход в основном позволяет любой вход, который начинается с http:// (Chrome) и затем следует что-либо, кроме нескольких специальных символов, таких как те, которые имеют функцию в URL-адресах ( ,@,#, ~ и т. д.). В FF все, что проверено, - это если оно начинается с http:, а затем все, кроме : (даже просто http: разрешено в FF). IE делает то же самое, что и FF, за исключением того, что он не запрещает http::.

например: http://. разрешена во всех трех. И так же http://,.

type="tel"

в настоящее время нет встроенный проверка номеров телефонов в любом из основных браузеров (он функционирует на 100% так же, как type="text", кроме указания мобильных браузеров, какую клавиатуру отображать.

Итак, поскольку браузеры не показывают последовательного поведения в каждом из этих случаев, и поскольку поведение, которое они показывают, очень простое со многими ложными срабатываниями, что я могу сделать, чтобы проверить мои HTML-формы (все еще используя проверку ввода HTML5)?

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

8
form-verification forms html html5 regex

1 ответов

эти шаблоны не обязательно просты, но вот что я думаю, работает лучше всего в каждой ситуации. Имейте в виду, что (совсем недавно) Интернационализированные Доменные Имена (IDNs) доступно слишком. При этом в URL-адресах разрешено непроверяемое количество символов (все еще существует множество символов, которые не разрешены в доменных именах, но список разрешенных символов настолько велик и будет меняться так часто для разных доменов верхнего уровня, что это не так практично идти в ногу с ними). Если вы хотите поддерживать интернационализированные доменные имена, следует использовать второй шаблон URL, в противном случае используйте первый.

TL; DR:

вот демо чтобы увидеть следующие шаблоны в действии. Прокрутите вниз для объяснения, рассуждения и анализа этих узоры.

URLs

https?:\/\/(?![^\/]{253}[^\/])((?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}|((1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5]))\.){3}(1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5])))(\/.*)?
https?:\/\/(?!.{253}.+$)((?!-.*|.*-\.)([^ !-,\.\/:-@\[-`{-~]{1,63}\.)+([^ !-\/:-@\[-`{-~]{2,15}|xn--[a-zA-Z0-9]{4,30})|(([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9])\.){3}([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9]))(\/.*)?

письма

(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}

номера телефонов

((\+|00)?[1-9]{2}|0)[1-9]( ?[0-9]){8}
((\+|00)?[1-9]{2}|0)[1-9]([0-9]){8}

имена в западном стиле

([A-ZΆ-ΫÀ-ÖØ-Þ][A-ZΆ-ΫÀ-ÖØ-Þa-zά-ώß-öø-ÿ]{1,19} ?){1,10}

URLs, без поддержки IDN

https?:\/\/(?![^\/]{253}[^\/])((?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}|((1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5]))\.){3}(1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5])))(\/.*)?

объяснение:

  • DNSes
    • URL-адреса всегда должны начинаться с http: / / или https://, так как нам не нужны ссылки на другие протоколы.
    • доменные имена не должны начинаться или заканчиваться -
    • доменные имена могут быть не более 63 символов каждый (таким образом, не более 63 символов между каждой точкой), и общая длина (включая точки) не может превышать 253 (или 255? будьте осторожны и ставьте на 253.) персонажи [1].
    • не-IDNs может поддерживать только буквы латинского алфавита, цифры от 0 до 9 и a тире.
    • домены верхнего уровня не-IDNs содержат только буквы латинского алфавита [2].
    • я установил произвольное ограничение в 15 букв, так как в настоящее время нет доменов, превышающих 13 символов (".international"), которые, скорее всего, не изменится в ближайшее время.
  • IPs
    • особые случаи, такие как 0.0.0.0, 127.0.0.1, etc. не проверяются на
    • IPs, которые имеют дополненные нули в них не допускаются (например 01.1.1.1) [4].
    • IP-номера могут идти только от 0 до 255. 256 не допускается.

обратите внимание, что по умолчанию http:.* шаблон, встроенный в современные браузеры, всегда будет применяться, поэтому даже если вы удалите https?:// в начале этого шаблона он по-прежнему будет применяться. Использовать type="text" чтобы избежать этого.

URLs, с IDN поддержка

https?:\/\/(?!.{253}.+$)((?!-.*|.*-\.)([^ !-,\.\/:-@\[-`{-~]{1,63}\.)+([^ !-\/:-@\[-`{-~]{2,15}|xn--[a-zA-Z0-9]{4,30})|(([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9])\.){3}([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9]))(\/.*)?

объяснение:

поскольку в IDNs разрешено огромное количество символов, практически невозможно перечислить все возможные комбинации в атрибуте HTML (вы получите огромный шаблон, поэтому в этом случае гораздо лучше проверить его каким-либо другим методом, чем регулярное выражение) [5].

  • запрещенные символы в доменных именах являются: !"#$%&'()*+, ./ :;<=>?@ [\]^_`` {|}~ С исключение периода в качестве разделителя домена.
    • они соответствуют в диапазонах [!-,] [\.\/] [:-@] [\[-``] [{-~].
  • все остальные символы разрешены в этом поле ввода
  • TLDs разрешено иметь те же буквы в них, до произвольного предела 15 символов (например, с URL-адресами без IDN).
  • кроме того, дву могут иметь формат xn--* С * будучи закодированным фактический TLD. Эта кодировка использует 2 латинские буквы или арабские цифры на исходный символ, поэтому произвольный предел здесь удваивается до 30.

адрес электронной почты

(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}

объяснение:

поскольку адреса электронной почты требуют намного больше, чем этот шаблон, чтобы быть 100% надежным, это будет охватывать почти полные 100% из них. 100% полный шаблон существует, но содержит PCRE (PHP) - только lookaheads регулярных выражений, поэтому он не будет работать в HTML-формах.

  • адреса электронной почты может содержать только буквы латинского алфавита, цифры 0-9, и символы !#$%&'*+\/=?^_``{|}~.- [6].
  • акценты не поддерживаются повсеместно [7], а если необходимо, напишите комментарий, и я мог бы написать версию, которая соответствует RFC 6530 стандартные.
  • локальная часть (до @ только длина 63 символа, а общий адрес может быть только 254 символа [8].
  • адреса не могут начинаться или заканчиваться на - или ., и никакие две точки не могут появиться последовательно [8].
  • домен не может быть IP-адресом [9].
    • кроме этого, я включил только не-IDN часть шаблона. IDNs тоже разрешены, поэтому они приведут к false отрицания.

номера телефонов

((\+|00)?[1-9]{2}|0)[1-9]( ?[0-9]){8}
((\+|00)?[1-9]{2}|0)[1-9]([0-9]){8}

объяснение:

  • номера телефонов должны начинаться с одного из следующих, где [CTRY] стоит код страны, а X означает первую ненулевую цифру (например,6 в мобильные числа),
    • 00[CTRY]X
    • +[CTRY]X
    • 0X
    • [CTRY]X (это официально не правильный синтаксис, но Chrome Autofill, похоже, нравится по какой-то причине.)
  • пробелы разрешены между цифрами (см. Второй шаблон для версии без пробелов), за исключением ненулевого X, как определено выше.
  • номера телефонов должны быть ровно 9 цифр длиной, кроме части перед первым ненулевой X, как определено выше.

это регулярное выражение предназначено только для 10-значных телефонных номеров. Поскольку длина телефонного номера может варьироваться между странами, лучше использовать менее строгую версию этой модели или модифицировать ее для работы в нужных странах. Итак, этот шаблон следует использовать как некий шаблон.

Extra: имена в западном стиле

([A-ZΆ-ΫÀ-ÖØ-Þ][A-ZΆ-ΫÀ-ÖØ-Þa-zά-ώß-öø-ÿ]{1,19} ?){1,10}

Да, я знаю, я очень Западно-ориентированный, но это может быть полезно тоже, так как это может быть трудно сделать тоже, и в случае, если вы делаете сайт для западных людей тоже, это всегда будет работать (азиатские имена имеют представление именно в этом формате тоже).

  • все имена должны начинаться с заглавной буквы
  • заглавные буквы могут встречаться в середине имен (например, John McDoe)
  • имена должны быть не менее 2 букв
  • я установил произвольный максимум 10 имен (эти люди, вероятно, не будет возражать), каждая из которых может быть не более 20 букв (длина "Werbenjagermanjensen", который оказывается № 1).
  • допускаются латинские и греческие буквы, включая все акцентированные латинские и греческие буквы (список) и исландские буквы (ÐÞ ðþ):
    • A-Z соответствует всем прописным латинским буквам:ABCDEFGHIJKLMNOPQRSTUVWXYZ
    • Ά-Ϋ соответствует всем заглавным греческим буквам, включая акцентированные: Ά·ΈΉΊΌΎΏΐ ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ ΪΫ.
    • À-ÖØ-Þ соответствует всем латинским буквам с ударением в верхнем регистре, а Ð и Þ:ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞ. Между ними также есть персонаж × (между Ö и Ø), который оставлен таким образом.
    • a-z соответствует всем строчным латинским буквам:abcdefghijklmnopqrstuvwxyz
    • ά-ώ соответствует всем строчным греческим буквам, включая акцентированные:άέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώ
    • ß-öø-ÿ соответствует всем строчным латинским буквам с ударением и ß, ð и þ: ßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ. Между ними также есть персонаж ÷ (между ö и ø), который оставлен таким образом.

ссылки

  1. https://en.wikipedia.org/wiki/Domain_Name_System#Domain_name_syntax→ https://tools.ietf.org/html/rfc1034#section-3.1
  2. https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains / https://www.icann.org/resources/pages/tlds-2012-02-25-en
  3. https://en.wikipedia.org/wiki/Domain_name#Technical_requirements_and_process / каковы разрешенные символы в поддомене
  4. основываясь на том, что ни браузеры, ни Строка cmd Windows позволяет использовать расширенный формат.
  5. каковы разрешенные символы в поддомене → http://www.domainnameshop.com/faq.cgi?id=8&session=106ee5e67d523298
  6. https://en.wikipedia.org/wiki/Email_address#Local_part / какие символы разрешены в электронном письме адрес?
  7. https://en.wikipedia.org/wiki/Email_address#Internationalization
  8. https://en.wikipedia.org/wiki/Email_address#Syntax→ http://tools.ietf.org/html/rfc5321#section-4.5.3.1
  9. отправка электронной почты с использованием IP-адреса вместо доменного имени
33