Para más detalles

Antes de la profunda discusión de la verificación del formulario, pensemos en el verdadero significado de la verificación de la forma de la forma. En lo que respecta a su núcleo, la verificación de formulario es un sistema que detecta datos de control no válidos para los usuarios finales y marca estos errores. En otras palabras, la verificación de formulario es realizar una serie de inspecciones antes de enviar el servidor y notificar a los usuarios para que corrija sus errores.

Pero, ¿cuál es la verificación de la forma real?

Es una optimización.

La razón por la cual la verificación del formulario es una optimización es porque no es suficiente garantizar que los datos de formulario enviados al servidor solo a través del mecanismo de verificación de formulario sean correctos y efectivos. Por otro lado, la verificación del formulario de diseño es hacer que las aplicaciones web arrojen un error más rápido. En otras palabras, es mejor utilizar el mecanismo de procesamiento construido en el navegador para informar la página web del usuario que contiene un valor de control de forma inválido. En el pasado, los datos se dieron la vuelta en Internet solo para permitir que el servidor notifique al usuario que había ingresado los datos incorrectos. Si el navegador es completamente capaz de ser capturado antes de dejar al cliente, entonces debemos usar esta ventaja.

Sin embargo, la verificación del formulario del navegador no es suficiente para lidiar con todos los errores.

Dicho esto, HTML5 todavía presenta ocho métodos para verificar la corrección de datos del control de formulario. Echemos un vistazo en orden, pero presentemos el objeto ValueSestate para la retroalimentación para verificar el estado.

En un navegador que admite la verificación del formulario HTML5, puede acceder al objeto ValentityState a través del control de formulario:

 value var = document.myform.myinput.validity;

Esta línea de código obtuvo un objeto ValentityState llamado MyInput. El objeto contiene la referencia al estado de verificación de ocho y los resultados de la verificación final.

El método de llamada es el siguiente:

 Valcheck.válido

Después de la ejecución, obtendremos un valor booleano que indica si el control del formulario ha pasado todas las limitaciones de verificación. Puede tratar las características del valor como el resultado de la verificación final: si se pasan las ocho restricciones, las características del valor son verdaderas, de lo contrario, siempre y cuando haya una restricción que falle, el logotipo del valor es todo S.

Como se mencionó anteriormente, hay ocho posibles restricciones de verificación en cualquier elemento de forma. Cada condición tiene un nombre característico correspondiente en el objeto ValidityState, a la que se puede acceder de manera apropiada. Analicemos uno por uno para ver cómo están asociados con el control del formulario y cómo verificarlos en función del objeto ValentityState:

Propósito: Asegúrese de que se haya completado el valor en el control del formulario.

Uso: en el control del formulario, establezca las características requeridas en verdadero.

Ejemplo:

 <input type = text name = myText requerido>

Instrucciones detalladas: si el control del formulario establece la función requerida, el control siempre no será válido antes de que el usuario complete o complete el valor por la llamada de código. Por ejemplo, el cuadro de entrada de texto vacío no puede pasar la verificación requerida, a menos que ingrese cualquier texto en él. Cuando el valor de entrada está vacío, Valuemissing devuelve verdadero.

Objetivo: garantizar la coincidencia de los valores de control y los tipos esperados (como Numbe, correo electrónico, URL, etc.).

Uso: especifique el valor característico de tipo del control de formulario.

Ejemplo:

 <Entrada tipo = nombre de correo electrónico = myEmail>

Instrucciones detalladas: el tipo de control de formulario especial no solo se usa para personalizar el teclado del teléfono móvil. El símbolo en la dirección de correo electrónico, o el valor de entrada del control de tipo número no son números efectivos, entonces el navegador marcará este control para indicar que el tipo no coincide. No importa qué errores, typemismatch volverá a verdadero.

Propósito: Verifique si la entrada es válida de acuerdo con las reglas de formato establecidas en el control del formulario.

Uso: establezca las características del patrón en el control del formulario, y el pozo proporciona reglas de coincidencia apropiadas.

Ejemplo:

 <input type = text name = CreditCardNumber Pattern = [0-9] {16} Target = '_lank'> Mecanismo de verificación de expresión regular. Cuando las características del patrón se establecen en el control, siempre que el valor del control de entrada no cumpla con las reglas de modo, el PatternMismatch devolverá el valor verdadero. Desde dos aspectos de los usuarios guiares y las referencias técnicas, debe establecer las características del título en el control de formulario que contiene las características del patrón para explicar las reglas.
 4. Toolongg
 Propósito: Evite el valor de entrada que contiene demasiados caracteres.
 Uso: establezca las características MaxLength en el control del formulario.
 Ejemplo:
 <Input type = text name = LimitedDText maxLength = 140>
 Descripción detallada: si la longitud del valor de entrada excede MaxLength, la función Toolong devolverá verdadera. Aunque el control del formulario generalmente se limita a la longitud máxima cuando el usuario es entrada, en algunos casos, como la configuración del programa, aún excederá el valor máximo.
 5. Rangeunderflow
 Propósito: Limite el valor mínimo del control numérico.
 Uso: establezca la función MIN para el control del formulario y proporcione el valor mínimo permitido.
 Ejemplo:
 <input type = range name = ageCheck min = 18>
 Instrucciones detalladas: en el control del formulario que debe verificarse, es probable que el valor sea temporalmente más bajo que el límite inferior de la configuración. En este momento, la característica RangeUnderflow de ValidityState volverá a verdaderas.
 6. RangeOverflow
 Propósito: Limite el valor máximo del control numérico.
 Uso: establezca las características máximas para el control de la forma y proporcione el valor máximo.
 Ejemplo:
 <input type = range name = kidageCheck max = 12>
 Descripción detallada: Similar a Rangeundlow, si el valor de un control de formulario es mayor que el máximo, las características devolverán verdaderas.
 7. Stepmismatch
 Propósito: asegúrese de que el valor de entrada cumpla con Min, Max y Step.
 Uso: establezca las características del paso para el control de formulario, especifique el aumento del valor.
 Ejemplo:
 <input type = range name = confidenceLevel min = 0 max = 100 step = 5>
 Descripción detallada: Esta restricción se utiliza para garantizar que el valor cumpla con los requisitos de Min, Max y Step. En otras palabras, el valor actual debe ser la suma del múltiplo del valor mínimo y el valor de la característica de paso. Por ejemplo, de 0 a 100, el valor de la característica de paso es 5, en este momento no habrá 17, de lo contrario el stepmismatch devolverá el valor verdadero.
 8. CustomError
 Objetivo: Entrega el código de aplicación establece claramente y calcula errores.
 Uso: Llamar setCustomValidity (mensaje) para colocar las piezas de control de formulario en el estado CustomError.
 Ejemplo:
 PasswordConfirmativeField.SetCustomValidity (los valores de contraseña no coinciden.);
 Instrucciones detalladas: cuando el mecanismo de verificación del navegador no es aplicable, se debe mostrar la información de error de verificación personalizada. Cuando el valor de entrada no cumple con las reglas semánticas, el código de aplicación debe establecer estos mensajes de verificación personalizados.
 El caso típico del mensaje de verificación personalizado es verificar si los valores en el control de control son consistentes. Por ejemplo, las contraseñas y las contraseñas confirman que los valores de los dos perdedores no coinciden. Mientras se personalice el mensaje de verificación, el control estará en un estado no válido, y CustomError devolverá verdadero. Para eliminar el error, simplemente llame a SetCustomValidity () en el control.
 Bueno, lo anterior son los 8 métodos básicos verificados solo por la tabla en HTML5. También espero que todos apoyen a VEVB Wulin.com.