HTML5 utiliza la restricción para verificar la API para verificar la instancia del código de los datos de entrada del formulario

HTML5 tiene una gran optimización de formularios, ya sea semántica, componentes pequeños o verificación de formato de datos. Supongo que definitivamente usará la compatibilidad del navegador como una excusa para usar estas nuevas características, pero esta nunca debería ser la razón por la que se estanca. realizado. Cuando realmente intentas usar las nuevas características de estos formularios, te prometo que te enamores de él. Si el único defecto es que el estilo de la solicitud es predeterminado por el navegador, no puede cambiarlo, está bien, si cree que el nivel estético del diseñador del fabricante del navegador (creo que su nivel de diseño es más alto que la mayoría Gente común que la mayoría de las personas comunes, bien, si no considera la compatibilidad de estilo), ¡solo date prisa y la escuela!

HTML5 proporciona una gran cantidad de soporte nativo para la verificación del formato de datos, como ::

 <input type = 'correo electrónico'/>

Al hacer clic en el botón de envío, si el formato que ingresa no cumple con el correo electrónico, hará que no pueda enviarlo, y el navegador le pedirá que haga un mensaje de error.

Por ejemplo, bajo Chrome:

1. Solo cuando lo envíe, activará la verificación del navegador

2. Diferente información rápida del navegador es diferente

3. Cuando la entrada múltiple no cumple con los requisitos, solo se solicitará un error.

No piense que cuando el tipo de entrada es igual a Tel, si ingresa el formato de número de teléfono, el navegador bloqueará el mensaje de error al enviar. Teclado digital, y no juega un papel en la verificación de datos.

Puede usar el atributo de patrón para establecer la verificación de formato personalizado para el navegador sin proporcionar formato de datos de verificación nativo. El valor del atributo de patrón es una expresión regular (cadena):

 <input type = 'Tel' Pattern = '[0-9] {11}' if (this.value.length> 3) {// La condición del juicio está completamente personalizada Input.SetCustomValidity ('Incorrect Format');} else { Input.SetCustomValidity ('' ')}});

Cada entrada del teclado, el código determinará si el formato es correcto y luego llamará a SetCustomValidity para establecer el valor del valueMessage. No piense que cada navegador clave solicitará su resultado si el resultado es correcto.

Si no lo ha pensado, definitivamente preguntará, desde entonces, ¿por qué tiene que vincular los eventos de teclado para la entrada y debe juzgar por cada entrada? Envíe el incidente directamente para el formulario.

Como usuario, por supuesto, después de enterarse de que he ingresado al formato incorrecto, el cuadro de texto se vuelve rojo (o hay otros consejos). Y cada vez que ingreso a un personaje, si es correcto, el cuadro de texto volverá a la normalidad. Podemos usar la clase pseudo CSS para implementar esta función:

 Entrada: requerido {Color de fondo: #ffe14d;} /* Esta pseudo-clase se juzga a través de la propiedad ValuEmessage* / input: inválido {border: 2px sólido rojo;}.

La pseudocategoría requerida arriba proporciona un color de fondo amarillo para la entrada imprescindible pero vacía, mientras que la clase pseudo no válida a continuación agregará un lado rojo de 2px a todas las entradas no resecidas. Podemos agregar la clase de entrada a nuestro cuadro de entrada ahora.

Las condiciones de juicio de estas pseudo -categorías juzgan si puede enviar el formulario de la forma. -La estilo de estilo.

Otra desventaja es que cuando se requiere una entrada, cuando la inicialización, porque está vacía, la pseudocategoría no válida funcionará en ella.

Podemos agregar el dispositivo de selección principal. Puede establecer un evento de envío.

Form.AdDeventListener ('Invalid', function () {this.classname = 'Invalid'}, verdadero) porque Invaild es un incidente, no el evento de Forma, por lo que establecemos el tercer parámetro para usar los métodos de eventos verdaderos para usar. De esta manera, se hizo.

Bueno, es hora de resumir el conocimiento que hemos aprendido y crear la mejor práctica:

 <! {border: 2px sólido rojo;} </style> </head> <body> <formi id = form> <label> correo electrónico: <input type = correo electrónico requerido id = correo electrónico> </label> <label> idcard: < Entrada requerida ID = IDCARD> </etiqueta> <input type = envío id = envío> </form> <script> var correaje = document.getElementById ('correo electrónico'); ); } Else {this.setCustomValidity ('' ')}});

La captura de pantalla después de ejecutar es la siguiente:

Lo anterior es todo el contenido de este artículo.