Ejemplo de Dom ValidityState.patternMismatch

Esta página no está completa.

El de solo lectura patternMismatch propiedad de un ValidityState objeto indica si el valor de un , después de haber sido editado por el usuario, no se ajusta a las restricciones establecidas por el elemento pattern attribute.

Si el campo admite el pattern attribute – lo que significa el es de typetexto, tel, Email, url, contraseña, o buscar – y el valor del patrón se establece en una expresión regular válida, si el valor no se ajusta a las restricciones establecidas por el pattern valor, el patternMismatch la propiedad será true.

Ejemplos de

Dado lo siguiente:

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

Aquí tenemos 3 secciones para un número de teléfono de América del Norte con una etiqueta implícita que abarca los tres componentes del número de teléfono, esperando 3 dígitos, 3 dígitos y 4 dígitos respectivamente, según lo definido por el pattern attribute en cada uno.

Si los valores son demasiado largos o demasiado cortos, o contienen caracteres que no son dígitos, patternMismatch estarán true. Cuando true, el elemento coincide con el :invalid Pseudoclases CSS.

input:invalidborder: red solid 3px;

Tenga en cuenta, en este caso, obtenemos un patternMismatch No un validityState.tooLong o validityState.tooShort si los valores son demasiado largos o demasiado cortos porque es el patrón el que dicta la longitud del valor. Habíamos usado minlength y maxlength attributes en cambio, es posible que hayamos visto validityState.tooLong o validityState.tooShort ser true.

Nota la email tipo de entrada requiere, como mínimo, una coincidencia de [email protected] y el url tipo requiere, como mínimo, una coincidencia ax :, sin patrón attribute regalo. Cuando no es válido, el validityState.typeMismatch estarán true, si no hay patrón attribute (o si el patrón attribute no es válido para ese tipo de entrada).

Especificaciones

Compatibilidad del navegador

Ver también

• Validación de restricciones
• Formularios: validación de formularios de datos
• Expresiones regulares