A, tipo de formulario de validación
validación de formularios se suele dividir en dos tipos:
verificación de antecedentes formulario de presentación 1. Formar; 2.ajax sin actualizar la página de verificación
método de validación de formulario se divide en: la autenticación del navegador, la autenticación del servidor, el de dos factores de autenticación de validación de la tecnología del navegador y del lado del servidor y Ajax
Dos, H5 formar las características básicas de introducción
requerido: conjunto de formularios elemento requerido; patrón: elementos de formulario utilizando regular;
novalidate: se utiliza en la etiqueta de formulario, dijo en el conjunto de formularios requeridos, no se verifique que se envía el formulario (no es obligatorio para relleno)
formnovalidate: utilizar el botón en el formulario de entrada, cuando se envía el formulario no verificación obligatoria (requerido)
autocompletar: automáticamente mensajes; prohibición es automáticamente autocompletar pronta = "off"
para: id correspondiente a un valor correspondiente a la entrada
<label para = "">工号</ label>
<input type = "" name = "texto de usuario" marcador de posición = "请输入工号" patrón = "^ d {5}">
Tres, H5 API de validación de formularios
Principalmente tiene la siguiente API:
1.validity propiedades : el correspondiente conjunto de planos propiedad se establece en establecer y cumplir retorno verdadera
用户名: <input type = nombre de "texto" = "" id = "nombre de usuario"> <script type = "text / javascript"> var nombre de usuario = document.getElementById ( 'nombre de usuario' ); console.log (username.validity); </ script> 打印validez属性如下
valueMissing: verificación requerida, la etiqueta de entrada según se requiera, pero no llena en la forma de los verdaderos valores
Uso: en el formulario de entrada requerido atributo en true
<Input type = nombre de "texto" = "myText" requerido>
typeMismatch: verificar el cumplimiento de un determinado tipo, tal como un tipo de formulario set = "email", si no se introduce el valor en la forma de tipo de correo electrónico, o falsa
Uso: tipo de atributo especifica un control de formulario
<Input type = nombre de "e-mail" = "MyEmail">
patternMismatch: Verificar que el valor introducido está en línea con la expresión regular, no cumple con el falso retorno
Uso: Set patrón característico del control en el formulario, y dadas las reglas de concordancia apropiados
<Input type = "text" name = "IDcard" patrón = "[0-9] {16}">
tooLong: Verificar la forma de caracteres longitud maxLength máximo
Uso: Establecer las propiedades maxLength en los controles de formulario
<Input type = "text" name = "límite" maxLength = "100">
tooshort: minLength verificación caracteres forma de longitud mínimo
Uso: Establecer las propiedades MINLENGTH en los controles de formulario
<Input type = "text" name = "límite" minLength = "30">
rangeUnderflow: Verificar la entrada máxima min
Uso: Set min a las características de control de la forma, y da el mínimo permitido
<Input type = name = min "gama" "edad" = "18">
rangeOverflow: Verificar max entrada mínimo
Uso: Establecer las características de control forma max, y da el mínimo permitido
<Input type = name = min "gama" "edad" = "35">
stepMismatch: de entrada no se ajusta a paso Calcular las características de las reglas
Uso: conjunto de propiedades de los pasos para formar controles, especificar el valor del incremento
<Input type = "gama" name = min "Nivel" = "0" max = "100" paso = "5">
Los elementos de formulario para el valor de relleno puede que necesite establecer min, max, y característico paso, lo que limita el valor de entrada debe ser un múltiplo del valor mínimo y la característica de paso. Como el intervalo de 2 a 6, paso valor característico 2, porque un valor legítimo es incluso dentro de la gama, los otros valores no se validan. Si el valor de entrada no cumple con los requisitos, la propiedad stepMismatch devuelve verdadero, de lo contrario falso.
badInput: usuario proporciona elementos de entrada de un navegador no reconoce
CustomError: personalizada mensaje de error de validación setCustomValidity ()
mensaje de validación Custom caso de uso típico es si los valores de control de validación coinciden. Por ejemplo, dos valores confirmación de la contraseña y la contraseña no coincide con la trama de entrada. Mientras el mensaje de validación personalizada, el control estará en un estado inactivo, y CustomError devuelve verdadero. Para eliminar el error, simplemente llame setCustomValidity en el control ( "") puede ser.
<acción de formulario = "">
<input type = "text" id = "" value = "nombre de usuario" requerido patrón = "^ \ d {4}" marcador de posición = "请输入代码" oninput = "checkit (esto)">
<input type = "submit" value = "验证">
</ form>
<script> función checkit (obj) {
console.log (obj.validity); var it = obj.validity;
si (it.valueMissing === verdadera ) {
obj.setCustomValidity ( "不能为空" );
} Demás {
si (él.
);
} Demás {
obj.setCustomValidity ( "" );
}
}
}
</ Script>
Tres, H5 viene verificar embellecimiento
1, en la forma de selectores y pseudo-clases, validación de formularios nos permite mostrar más bella
: requeridos y opcionales:; campos obligatorios y opcionales
: In-rango y: fuera de rango, dentro de la gama y no dentro del alcance de
: Válido y: inválido; en línea con la validación de formularios, validación de formularios y no cumplen con el
: De sólo lectura e: lectura-escritura; sólo lectura y escritura
<Style type = "text / css"> .container { max - ancho: 400px; margen: auto 20px; } INPUT, SELECT, TextArea {width: 240px; margen: 10px 0; frontera: 1px solid # 999 ; el relleno :. 1 em 5em;} etiqueta {color: # 999; marginalmente izquierda: 10px;} / * opcional y los ajustes necesarios de diferentes estilos * / ENTRADA: obligatoria, TextArea: necesaria { / * requerido patrón * / frontera - derecha: 3px rojo sólido; } ENTRADA: opcional, SELECT: opcional { / * opcional estilo * / frontera -right: 3px naranja sólido ; } Entrada: requerida + etiqueta :: tras { contenido: "(必填)" } de entrada: opcional + etiqueta :: tras { contenido: "(选填)" } de entrada: enfoque, seleccione: enfoque, área de texto: {foco esquema: 0 ;} de entrada: required: enfoque, área de texto: required: {foco cuadro -Shadow: 0 0 3px 1 píxel de color rojo; } De entrada: opcional: enfoque, área de texto: opcional: {foco cuadro -Shadow: 0 0 3px 1 píxel de color naranja ; } De entrada [tipo = "submit" ] { fondo - los colores: naranja; padding: 2px 0 ; Color: #fff; } De entrada [tipo = "submit" ]: hover { fondo - los colores: naranja; } </ Style> </ head> <body> <div class = "contenedor"> <form action = "#"> <input type = "text" requerido> <label>名称</ label> <input type =" correo electrónico "required> <label>邮箱</ label> <input type = "tel"> <label>手机</ label> <input type = "URL"> <label>网址</ label> <select name =" # "> <valor de la opción =" 1" >选项一< <nombre de área de texto = cols "#" = "30" rows = "10" marcador de posición = "留言(必填)" requerido> </ textarea> <input type = "submit" value = "提交表单"> </ form> </ div> </ body>
Retire la forma del núcleo WebKit estilo por defecto, con webkit-apariencia: ninguno
Se borrará la búsqueda icono de entrada caja posterior en el estilo que desee;
ENTRADA [type = "Buscar"] :: - Cancelar en WebKit-Search-botón { // pueden no ser compatibles con el lado del teléfono
-webkit- Apariencia: ninguno;
altura: 15px;
Ancho: 15px;
fondo - Color: Rojo;
}
Haga clic en la flecha para sacar la parte superior e inferior número de tipos de caja de entrada
de entrada [type = número] :: - webkit-exterior-spin-botón {/ * número y abajo de flechas etiqueta de tipo de entrada eliminado * /
-webkit-Apariencia: none;
margin: 0;
}
2, cuando el valor de nuestra entrada no satisface las restricciones ,, navegador emitirá un mensaje de error, a continuación, cada uno muestra el mensaje de error del navegador no son los mismos, entonces tenemos que unificar su estilo
El principio es evitar que el mensaje de la burbuja de errores por omisión, a continuación, crear una nueva burbuja
<style> .container { margen: 10px; } .Oneline { altura: 40px; } Etiqueta .oneline { anchura: 60px; display: inline - bloque; } .Oneline .sinput { anchura: 220px; } De entrada [tipo = "submit"] {width: 80px; altura: 30px; line-height: 30px; marginalmente izquierda: 80px; } .Error -mensaje {color: red; font-size: 12px; texto- guión: 65px;} </ style> </ head> <body> <div class = "contenedor"> <form action = "#" id = "formas"> <div class ="para =>用户"nombre"名: <label> / <id = "nombre" name = clase de entrada "nombre" = "sInput" requerido = ""> </ div> <div class = "oneline"> <label para = "email">邮箱: </ label> <input id = "email" name = "email" class = "sInput" type = "email" requerido> </ div> <div class = "oneline"> <tipo de entrada = "submit" value = "提交" id = "thesubmit"> </ div> </ form> </ div> <script>función replaceInvalidityUi (forma) { // las ideas: 1. La primera parada es burbujeante, 2 para eliminar el mensaje de error, agregue 3 mensaje de error .. form.addEventListener ( "no válido", la función (evento) { // aquí directamente se unen para formar un evento, no es necesario ir a cada entrada de la unión event.preventDefault (); }, a la verdadera ); form.addEventListener ( "la Submit", la función (evento) { SI ! ( El presente .checkValidity ()) { el event.preventDefault (); } }, a verdadero ); // el método insertAdjacentHTML () del texto especificado análisis de elemento de elemento, y el resultado se inserta en la posición especificada del nodo en el árbol DOM. No volver a hacer el elemento que está utilizando, por lo que no se rompa elementos existentes dentro del elemento. Esto evita la secuencia de pasos adicionales para que sea más rápido que el uso de la operación innerHTML. element.insertAdjacentHTML (posición, texto); // posición // un DOMString, que muestra la posición de inserción del elemento con respecto al contenido, y debe ser uno de la cadena siguiente: //'Beforebegin': la parte delantera del elemento en sí. // 'afterBegin': elemento insertado en el interior antes de que el primer nodo hijo. // 'beforeEnd': después del último nodo hijo en el interior del elemento. // 'AfterEnd': la parte posterior del propio elemento. // texto // a HTML o XML se analiza en elementos, y se inserta en DOMString DOM árbol var submitBtn = document.getElementById ( "thesubmit" ); submitBtn.addEventListener ( "Click", la función (evento) { var inValidityField : form.querySelectorAll = ( "válido" ), errorMessage (. "errorMessage" = form.querySelectorAll ), los padres; //Aquí directamente a través de la información de error antes del nombre de la clase de mensajes de error para encontrar y eliminar, ya que el nombre de la clase es el mensaje de error de errores mensaje original para ( var i = 0; I <errorMessage.length; I ++ ) { errorMessage [I] .parentNode.removeChild (errorMessage [I]); } para ( var i = 0; I <inValidityField.length; I ++ ) { padre = inValidityField [I] .parentNode; parent.insertAdjacentHTML ( "beforeEnd", " <div class = 'error-Mensaje'> "+ inValidityField [I] .validationMessage +" </ div> " ); } SI (inValidityField.length>0 ) { inValidityField [0 ] .focus (); } }) } Forma = document.getElementById ( "formas" ); replaceInvalidityUi (forma); </ script> </ body>
