Cuando muchos amigos forman verificación, usan jQuery o JS manualmente, o usan el enchufe jQuery para verificar. ¡Porque todos piensan que HTML5 viene con la autenticación no es muy bueno! De hecho, ahora HTML5 viene con la verificación de formulación de formulaciones, que ahora es bastante poderosa. ¡Echemos un vistazo a un formulario para verificarlo en una forma escrita por puro HTML5! ¡Experiencia!
¿Qué opinas de este efecto?
¡La esencia de este efecto son tres fotos!
.myForm Seleccionar: requerido, .myform Entrada: requerido, .myform textAREA: requerido {fondos: #fff (http://sandbox.runjs.cn/rs/rs/216/0y 89gzo2/star.jpg) No-Repeat 99 % Center;}. /Right.png) Centro sin repetición del 99%; : //sandbox.runjs.cn/uploads/rs/216/0y89gzo2/error.png) sin-repeat 99% Center;
Luego realizó un evento de monitoreo:
OnInValid = this.setCustomValidity ('Ingrese el número correcto');
Cuando la contraseña de verificación sea consistente, use un JS
Función checkPassword () {var pass1 = document.getElementById (contraseña);
¡Esto completa el efecto!
Si piensas, ¡esta burbuja construida también es fea! Como se muestra a continuación: ¡Quiero cambiarlo!
¡Antes de la versión de Google 29, podemos usar pseudo -elementos para modificar las burbujas!
: -Webkit-validation-bubble {min-width: 152px; / Top: 4px; izquierda: 0px;} :: -webkit-validation-bubble-flow-clipper {text-align: center;} :: olor: #444;}: -webkit-validation-bubble-message {border: 1px Solid #F7CE39;
¡Pero, este método fue abandonado más tarde! ¡Encontrará que no hay respuesta para modificar la burbuja! Entonces, ¿cómo modificar el estilo de burbuja? ¡Es un poco problemático aquí! ¡La idea es probablemente que primero detenemos las burbujas predeterminadas y luego creamos una nueva burbuja!
Prevenir burbujas predeterminadas<Form> <put requerido> <botón> Enviar </botón> </form> <script> document.quryselector (entrada) .adDeventListener (incret, function) {event.prev entdefault ();});Crea una nueva interfaz de usuario
El código es más o menos como sigue:
Función reemplazar ValidationUi (formulario) {// Pedir burbujas de burbujas. }); // el formulario del contenedor. Type = Subt]); invalidfields.length; /li>;} Ages.innerhtml = Listhtml; });} // Reemplace todas las verificaciones uivar forms = document.quryselectiverall (forme);Resumir
El anterior es el HTML5 con el HTML5 viene para verificar la optimización de la experiencia y la función de modificación de la burbujas. . ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!