Атрибутpattern определяетрегулярное выражение, которому должно соответствовать значение элемента формы. Если ненулевое значение не соответствует ограничениям, установленным вpattern, доступное только для чтения свойствоpatternMismatch объектаValidityState будет истинным.

Атрибутpattern является атрибутом для полей ввода с типомtext,tel,email,url,password, иsearch.

Thepattern attribute, when specified, is a regular expression which the input'svalue must match in order for the value to passconstraint validation. It must be a valid JavaScript regular expression, as used by theRegExp type, and as documented in ourguide on regular expressions; the'u' flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.

Some of the input types supporting the pattern attribute, notably theemail andurl input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, theValidityState object's read-onlytypeMismatch property will be true.

Usability

When including apattern, provide a description of the pattern in visible text near the control. Additionally, include atitle attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.

Constraint validation

If the input's value is not the empty string and the value does not match the entire regular expression, there is a from apatternMismatch.The pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a^(?: were implied at the start of the pattern and)$ at the end.

Examples

Given the following:

<p>  <label    >Enter your phone number in the format (123)456-7890 (<input      name="tel1"      type="tel"      pattern="[0-9]{3}"      placeholder="###"      aria-label="3-digit area code"      size="2" />)-    <input      name="tel2"      type="tel"      pattern="[0-9]{3}"      placeholder="###"      aria-label="3-digit prefix"      size="2" />    -    <input      name="tel3"      type="tel"      pattern="[0-9]{4}"      placeholder="####"      aria-label="4-digit number"      size="3" />  </label></p>

Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by thepattern attribute set on each.

If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. Whentrue, the element matches the:invalid CSS pseudo-classes.

input:invalid {  border: red solid 3px;}

Had we usedminlength andmaxlength attributes instead, we may have seenvalidityState.tooLong orvalidityState.tooShort being true.

Specifying a pattern

You can use thepattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (seeValidating against a regular expression for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

<form>  <div>    <label for="uname">Choose a username: </label>    <input      type="text"           name="name"      required      size="45"      pattern="[a-z]{4,8}"      title="4 to 8 lowercase letters" />    <span></span>    <p>Usernames must be lowercase and 4-8 characters in length.</p>  </div>  <div>    <button>Submit</button>  </div></form>

div {  margin-bottom: 10px;  position: relative;}p {  font-size: 80%;  color: #999;}input + span {  padding-right: 30px;}input:invalid + span:after {  position: absolute;  content: "✖";  padding-left: 5px;}input:valid + span:after {  position: absolute;  content: "✓";  padding-left: 5px;}

This renders like so:

Accessibility Concerns

When a control has apattern attribute, thetitle attribute, if used, must describe the pattern. Relying on thetitle attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the the control to match the requirements.

Whiletitles are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

Спецификации

Совместимость с браузерами

Смотрите также

• Constraint validation
• Forms: Data form validation
• Regular Expressions