Transcripciones
1. Introducción a la clase: valorización de las formas: Bienvenidos, bienvenidos, bienvenidos a otra clase. Yo estoy súper, súper emocionado. Mi nombre es Clyde. Yo voy a ser tu instructor y esto es parte de toda una serie alrededor de las formas. Hemos recorrido un largo camino, pero esto es súper interesante porque vamos a estar hablando validación del lado
del cliente y simplemente dar un paso atrás y pensar por qué la validación es importante. Si no tienes validación en un formulario, ¿qué va a pasar? Eso es correcto. El usuario va a llenar un formulario. El usuario va a presionar el botón enviar, la hija del formulario va al servidor. Y en el servidor vas a tener alguna validación necesitábamos de asumir que la vena del servidor encuentra un error que va a tener que emitir una respuesta de vuelta al navegador diciéndole que el usuario no es era y todo el proceso tiene que repetirse. Eso es muy ineficiente. Y es exactamente por eso que tenemos validación del lado del cliente. Pero lo que tal vez no sepas es que hay dos tipos de validación del lado del cliente. Tenemos invalidación de pernos y por Bolton no sólo significan ambos por el navegador. Por ejemplo, una entrada de tipo de correo electrónico tiene ciertos hex y requisitos que deben cumplirse para el navegador permita al usuario enviar antes. Entonces eso es validación incorporada. El segundo tipo de validación del lado del cliente es la validación de JavaScript. Sí, tenemos que codificar algo de JavaScript, pero no te preocupes, te mostraré cómo hacerlo. Y vamos a estar usando la API de validación de restricciones. Va a ser fascinante. Entonces esta clase realmente es para todos los niveles de ustedes experimentaron que apenas están empezando. No te preocupes, es para ti. Podrás seguir adelante y aprenderás algo nuevo. Por lo tanto suficiente blubber, blubber. Vamos a meternos en ello. Nos vemos en la primera conferencia.
2. Dos tipos de validación de la valorización del cliente: Súper, súper excitante, ¿no? Porque ahora vamos a estar hablando de forma, Fundación. Y no va a ser tan complicado de una sección. Es decir, ya sabes mucho de ello ya hemos cubierto muchas, muchas incidencias de nosotros realizando validación front end, pero solo quiero hablar un poco más al respecto con más detalle. Por lo que como saben, antes de enviar datos al servidor, debe asegurarse de que todo el formulario requerido controle o full out en el formato correcto. Y a esto se le llama qué, 100 por ciento. Eso se llama validación del lado del cliente. Y la validación del lado del cliente ayuda a garantizar que los datos presentados coincidan con los requisitos establecidos en los diversos controles de formulario. Y durante todo este curso, hemos discutido los conceptos básicos y hemos utilizado muchos ejemplos de realizar la validación de formularios del lado del cliente. Teníamos atributos de mezquindad. Ponemos el atributo requerido en diversos controles de formulario. En algunos de los controles numéricos de forma teníamos los atributos Min, max attribute, etcétera, etcétera. Realmente hemos hecho mucho, un montón de ejemplos en este curso. Algo que debes recordar sin embargo, como parte del cliente, validación es solo una comprobación inicial y es una característica importante para una buena experiencia de usuario. ¿ Por qué? Bueno, piénsalo. Si puedes atrapar datos no válidos en el lado del cliente, entonces el usuario puede arreglarlos de inmediato. Lo que quiero decir con esto es que si no tienes ninguna validación del lado del cliente, ¿qué va a pasar? Eso es correcto. la hija se le va a parecer al servidor, entonces el servidor va a realizar sus comprobaciones y sólo va a ser rechazado a Dane, entonces tiene que venir todo el camino de vuelta por el cable al cliente y sólo entonces el cliente puede arreglarlo. En otras palabras, estarías causando retrasos innecesarios al tener un viaje de ida y vuelta
al servidor y luego de vuelta al lado del cliente para decirle al usuario que arregle a la hija. Por lo que la validación del lado del cliente es una comprobación inicial y mejora la experiencia del usuario que validación del lado del cliente de
burro demasiado segura no debe considerarse una medida de seguridad exhaustiva. Tu aplicación siempre debe realizar comprobaciones de seguridad en cualquier formulario, algunos metadatos en el lado del servidor así como en el lado del cliente. Debido a que la validación del lado del cliente es demasiado fácil de apagar, demasiado fácil de eludir por los hackers. Los usuarios maliciosos todavía pueden ver fácilmente los datos malos a través de su servidor. Siempre debes tener validación del lado del cliente, pero no puedes confiar exhaustivamente en ella. ¿ Tiene sentido? Está bien. Está bien. Bueno, lo otro que quiero mencionar es que tenemos validación del lado del cliente, y son dos tipos diferentes de validación del lado del cliente. ¿ Cuáles son estos diferentes tipos? Bueno, tenemos validación nativa, ¿verdad? También conocido como validación de formularios incorporada. Y entonces también tenemos ese derecho, validación de JavaScript. Cuáles son las diferencias posteriores la validación es proporcionada por el navegador, eso es proporcionado por la especificación HTML. Y la validación nativa no requiere mucho, si hay alguno, JavaScript, porque no estás teniendo que escribir JavaScript personalizado o código personalizado. Bolt en la validación de forma suele tener mejor rendimiento que JavaScript. Pero por supuesto, el inconveniente es que no es tan personalizable como JavaScript, lo que me lleva a la validación de JavaScript. ¿Qué es eso? Eso es solo validación que tienes que escribir en JavaScript. El principal beneficio es que es completamente personalizable, pero por supuesto necesitas crearlo todo. Necesitas saber cómo escribir JavaScript o necesitas usar una biblioteca. Entonces ahí vamos. Solo está el resumen de alto nivel de validación de formularios. Y específicamente mirando los dos tipos diferentes de validación del lado del cliente.
3. Construido en la validación: Bienvenido de nuevo, Bienvenido de nuevo. Estoy súper, súper emocionado, como recordarán en la conferencia anterior, discutimos que hay dos tipos de validación del lado del cliente. ¿ Te acuerdas de lo que eran? El primero fue la validación de formularios incorporada y el segundo tipo de validación de JavaScript que vamos a estar viendo JavaScript en breve. Pero antes de que lo hagamos, solo quiero discutir la validación de perno en forma con un poco más de detalle. Entonces entrémonos en ello. Una de las características más importantes o las más significativas de HTML5 Form Controls es la capacidad de validar, usar una hija sin depender de JavaScript. ¿ Y cómo se hace esto? Bueno, se hace mediante el uso de atributos de validación en diversos elementos de forma. Hemos visto muchos ejemplos de esto en el curso. Pero para recapitular, parte del atributo requerido especifica con un campo completo necesita ser llenado antes de que el formulario pueda ser enviado al servidor. También tenemos enlace MAN. Y lo siguiente, día bastante intuitivamente especificar la longitud mínima y máxima de las cadenas de datos textuales. Tenemos minimax. ¿ De qué se trata eso? Haciendo? Intuitivamente, especifica los valores mínimo y máximo de los tipos de entrada numéricos, como el tipo de número, por ejemplo. Y luego tenemos este atributo de tipo. Este tipo de atributo fue increíble, ¿no? Porque eso especifica si la hija necesita ser un número, una dirección de
correo electrónico, o algún otro tipo específico. Y podemos llegar a ser más complejos con la validación incorporada del lado del cliente. Podemos utilizar los atributos de la patente. Vas a ver un ejemplo en breve, pero esto especifica una expresión regular que define un patrón. El inter hija necesita seguir. A simpáticos sólo unos pocos de ellos que hemos mirado. Hemos mirado más de estos atributos son importantes porque si la hija ingresada en un campo de formulario sigue todas las reglas especificadas por estos atributos van a ser consideradas válidas y el navegador permitirá al usuario enviar el formulario al servidor. Es hacer santos. Entonces cuando un elemento es válido, van a suceder las siguientes cosas. En primer lugar, el elemento va a coincidir con la pseudo-clase CSA vetada, que le permite aplicar un estilo específico a los elementos válidos. Hemos visto muchos ejemplos de nosotros usando esto en el curso. Y lo segundo que va a suceder cuando un elemento es válido es que el navegador enviará el formulario cuando el usuario intente enviar a la hija. Por supuesto, siempre y cuando no haya nada que les impida hacerlo. Al igual que cuando utilizabas, por ejemplo, cuando un elemento es válido. Todo Clyde, ¿qué sucede cuando un elemento es inválido? Y nota mi lado, obvio, pero mucho que recapitular. Se va a solidificar todo con aprendido. De igual manera al estado válido, cuando un elemento es inválido, van a suceder
dos cosas. En primer lugar, el elemento va a coincidir con la pseudo clase CSS inválida. Y a veces también va a coincidir con otras pseudo-clases de UI. Por ejemplo, fuera de rango. Y todo esto depende del tipo de IRA, la belleza de tener esta pseudo-clase inválida, por supuesto, es que se puede aplicar un estilo específico, dos elementos que están en el alimentado. El segundo que va a suceder es que si el usuario intenta hija, el navegador va a bloquear el formulario para que no se envíe y el navegador mostrará un mensaje de error nativo. Muy, muy útil. Antes de pasar, sólo quiero que sepan que son varias épocas que evitarán que se presente el formulario. Y vamos a estar viendo algunos de estos más cortos, sobre todo cuando nos fijamos en el uso de JavaScript. Pero de todos modos, ponemos diferentes tipos de ER es como una mala entrada al valor de desajuste de tipo corto, faltando rango de desajuste empinado, subflujo, etcétera, etcétera. Hay todo un montón de diferentes áreas asociadas a diferentes tipos de insumos. Y cuando ocurran esos errores, el navegador no enviará el formulario o no. Entonces eso es lo que sucede cuando un elemento coincide con el estado inválido. Pero uno de los más comunes. Y lo hemos visto en los cursos. ¿ Qué? Así es, Es el atributo requerido. Y cuando tengamos este atributo requerido en el elemento formulario, va a coincidir con la pseudo-clase requerida. ¿ Qué significa esto? Bueno, significa que es que el control de formulario como un valor que está vacío y el mensaje
interno se va a mostrar cuando el usuario intente enviar el formulario. Y por supuesto sabemos que la pseudo-clase inválida también va a coincidir. Ya basta hablando, quiero saltar al editor de texto. Codificemos en una entrada de tácticas a su objetivo. Requirieron pseudo-clase, el inválido y la pseudo-clase válida. Ya verás lo fácil que es. Y podemos continuar con esta conferencia. Entonces hagámoslo rápidamente ahora.
4. Ejemplo rápido: clases de pseudo válidas, inválidas y requeridas: Como siempre, empecemos con un archivo vacío. Vamos a tener una sección de cabeza en la sección de estilo. Pero por ahora, saquemos de nuestro formulario muy rápido, ¿verdad? Entonces dentro del cuerpo, vamos a tener una forma. No necesitamos un atributo de acción. Todavía no nos preocupa enviarlo a un servidor. Vamos a tener un atributo de etiqueta aquí. Y solo dale un valor de atributo completo de elegir. ¿ Preferirías un plátano o un tiempo alegre? No, sé que es aleatorio. Yo sólo quiero darles un ejemplo. Y entonces por supuesto el para tener una entrada con un atributo de tipo se establece en texto. Lo tengo. Y entonces podemos darle un atributo de nombre de nuestros iguales. Y le estoy dando un atributo de nombre de nuestro gusto, porque si no
lo hacemos, no se presentará al servidor. Recuerde, para que los datos se envíen al servidor, necesitamos pares de valor de nombre. Entonces el nombre que estamos dando las sillas son como, Sabemos que el valor id tiene que coincidir con el valor de cuatro atributos de elegir. Lo último que quiero hacer es agregar un botón de tipo enviado. Simplemente podemos tenerlo, guardarlo, refrescar el navegador. Y ahí vamos. Literalmente tenemos nuestros insumos. Como mencioné en la conferencia, una de las características de validación HTML5 más simples son los atributos requeridos. Y para hacer obligatoria una entrada, solo
necesitamos agregar este atributo al elemento, ¿verdad? Porque en este momento el usuario puede enviar este formulario. Me gusta se anexa a la URL, pero no hay ningún valor. Si queremos que se requiera,
todo lo que tenemos que hacer es agregar el atributo requerido a este elemento de entrada. Es un atributo booleano. No tenemos que asignarle un valor. O está ahí o no lo está. Ahora si el usuario intenta enviar, el navegador evitará que el usuario lo haga. Y lo que es realmente genial es que cuando se establece este atributo, el elemento va a coincidir con la pseudo-clase UI requerida y coincidir con esto si hay o no un valor. Y recuerda la forma vino Enviar, va a mostrar un mensaje de error cuando falta el valor, cuando el valor está vacío, y mientras los valores vacíos, la entrada también se va a considerar inválida, coincidiendo con la pseudo-clase de UI inválida. Entonces en este momento, cuando un usuario intenta enviar, note cómo se
enfocan los niños del cuadro de entrada y obtenemos este mensaje de error que nos muestra el navegador. Déjenme demostrar que algunas de estas pseudo clases están funcionando. En primer lugar, lo que podemos hacer es que podemos apuntar al elemento de entrada donde su estado no es válido. Y esto debería ser muy sencillo aquí, dos píxeles, borde rojo sólido, y este es el punto de partida predeterminado. El valor predeterminado cuando tenemos un atributo requerido en un elemento
es que va a coincidir con el estado no válido porque su atributo de valor está vacío, ¿verdad? Pero una vez que el usuario empieza a escribir, dicen que quieren un plátano, ya no
es rojo. Aka no es inválido y el usuario cancela con el formulario. Pero claro, una vez que se presenta, vuelve a ese estado inválido. ¿ Cuáles son algunas otras cosas que puedo mostrarte? Bueno, ¿por qué no apuntamos a la entrada, verdad? Nosotros, su estado es inválido. Pero recuerda, dije que también va a igualar el estado requerido. Entonces, ¿cómo nos apuntamos a esto? Y podemos darle a esto un estilo de imagen de fondo fresco. Podemos darle un gradiente lineal. Digamos sólo rosa y verde claro. Guarda eso. Entonces ahí vamos. Sabemos ahora que está coincidiendo con el estado requerido y su coincidencia con el estado inválido al mismo tiempo. ¿ Se puede ver cómo fluye el rosa de arriba a abajo? Si no quieres eso, por ejemplo, con este método de gradiente lineal, solo
podemos decir aquí a la derecha. Y claro que va a ir de izquierda a derecha. Ahora el rosa inició el gradiente de elevación Julie convirtiéndose en verde de izquierda a derecha. Y es solo un poco de tu información. Y luego finalmente, también podemos apuntar a la entrada, pero esta vez cuando es estado es válido y lista solo darle un borde de dos píxeles, verde sólido. Muy bien, guardamos esto cuando el usuario empieza a escribir Banana. ¿ Podemos ver, o se puede ver que hay una frontera verde? Por supuesto, es difícil de ver porque también tenemos un contorno, ese contorno negro. Entonces, ¿por qué no quitamos el contorno, lo ponemos en ninguno. El usuario empieza a escribir plátano, y ahí vamos. Sabemos ahora que es válido. Tienes que, tienes que estar disfrutando de lo que es tan interesante. Y es tan divertido una vez que hace clic, como si simplemente se volviera muy intuitivo, muy fácil empezar a peinar tus formularios de una manera muy, muy divertida. Bird de todos modos, estas son las pseudo-clases de validación integradas simples, pero son más. Y en particular este que quiero discutir con ustedes ahora. Entonces volvamos a la conferencia.
5. El atributo de los patrones: Te vas, te dije que no era tan malo, ¿verdad? Pero ahora quiero meterme en una validación integrada un poco más compleja. Ahora quiero ver los atributos theta1. Y este atributo de patrón es otra característica de validación muy útil. ¿ Y qué espera? Eso es correcto, espera una expresión regular como su valor. ¿ Qué es una expresión regular? Expresiones regulares o expresiones regulares, es solo un patrón que se puede usar para hacer coincidir una combinaciones de caracteres en cadenas de texto. ¿ Qué son exactamente los aparejos? Bueno, es un tema muy complicado y está más allá del alcance de este curso para mí conseguirlo. Basta con tener en cuenta que cada proveedor de navegadores tiene su propio motor de expresiones regulares, la pieza de software de expresión wiggle que es capaz de procesar expresiones regulares. Y todo lo que la expresión regular está tratando de hacer
es que está tratando de hacer coincidir un patrón con una cadena dada. Entonces Clyde, ¿qué es este motor de expresión regular pol? Bueno, sí depende de qué navegador estés usando. Entonces cuando estamos viendo Chrome, Chrome utiliza el motor V8 cuando ejecuta JavaScript. Y los desarrolladores pusieron tanto esfuerzo en eso, como que
ignoraron la construcción de su propio código personalizado para expresiones regulares. Bueno, eso fue hasta hace unos años. Por lo que ahora Google Chrome utiliza el propio motor de expresiones regulares llamado aretes. Otra cosa que quiero mencionarles es que no todos los tipos de entrada con cierto patrón necesitan tener los atributos de patente especificados. Por ejemplo, hemos visto que el tipo de pesos de entrada está configurado en correo electrónico. En ese caso, no tenemos que escribir theta1 RegEx personalizado. Podemos si queremos, pero no tenemos que hacerlo. ¿ Por qué no tenemos que hacerlo? Debido a que el navegador no conoce Baja cuando usamos entrada de tipo e-mail, browser ya utiliza un correo electrónico bien formado theta1. Entonces, de todos modos, solo quería mencionar que antes de seguir adelante, volvamos a meternos en ello. Como mencioné, los Rick x son bastante complejos, así que no pretendas enseñarlos exhaustivamente en este curso. Pero sólo quiero darles algunos ejemplos. Ten una carga para darte una idea básica de cómo funcionan. De acuerdo, entonces, ¿cuáles son algunos patrones que podemos especificar? Bueno, sí, sólo voy a tres ejemplos muy sencillos. Si sólo tenemos el personaje x, Vamos a hacer coincidir con un personaje. Eso es x debe ser no x, x, sólo x. Si especificamos patrón x, y, eso va a coincidir x seguido de Y.
Y entonces por supuesto, recuperar su propia sintaxis. Podemos utilizar en línea para especificar todo. Entonces podemos decir x o y. y eso va a coincidir con un personaje, es decir x o y. y son muchas, muchas más posibilidades y ejemplos que están cubiertos todavía, pero lo anterior son solo unos ejemplos sencillos para conseguirte comenzó. Y mientras estamos en este tema, ¿por qué volvemos a ese ejemplo que hicimos antes? Y por qué no ponemos una mascota propia un atributo ahí solo para ver cómo funciona con nuestras pseudo-clases inválidas y vetadas. Echemos un vistazo ahora. Estamos de vuelta en nuestro ejemplo original. Y aquí le preguntamos al usuario si preferirían un plátano o un alegre. Por lo que no quiero que el usuario pueda escribir nada y enviar eso ahora mismo. Pueden presentar eso. Entonces, ¿cómo podemos hacer eso? Bueno, en cuanto empieces a pensar en un patrón, ding, ding, ding, podemos pensar en expresiones regulares. Entonces aquí fuimos a limitar la escritura del usuario. Cereza. Honor orban, los escritores son las únicas cosas que queremos que el usuario pueda hacer. Entonces, ¿por qué no hacemos eso? Y vamos a deshacernos del gradiente. Yo solo quiero quitar algo de ruido. Sólo tengamos aquí el inválido y una pseudo-clase válida. ¿ Cómo podemos hacerlo? Bueno, en primer lugar, déjame hacer esto un poco más grande. Lo primero que podemos hacer, por supuesto, es agregar estos atributos de patente a nuestra entrada de texto tipo. Todo es un texto y sabemos que el valor de este atributo de patrón es una expresión regular. Para que pudiéramos hacer esto. Podríamos decir, bueno, la expresión regular tiene que ser plátano, cereza. Podríamos hacer esto saboreado, conseguimos nuestro navegador. Podemos teclear aquí nada. Y podemos ver que aún le ha aplicado el estilo inválido, ¿verdad? Se quita, el contorno. Guárdalo, empieza a escribir hierba. Todavía tenemos la clase inválida. Sí, es de máxima animo. Todavía tenemos la pérdida inválida. ¿ Por qué es eso? Ah, es porque lo siento. Puse un espacio todavía. Solo eliminemos el espacio. No queremos un espacio. Guárdalo. Si tecleamos cereza, ahí vamos. Es verde. Si el usuario tipa plátano, es verde y se le permite presentar. Pero hay un problema con esto en el sentido de que el usuario podría hacer una B mayúscula, pero no en ella no va a funcionar. Entonces qué aparejos, tienes que ser muy explícito. Y lo que podríamos definir aquí al principio antes de simplemente definir un pequeño b es un conjunto de caracteres y un estado de carácter se acaba de definir en RegEx con los corchetes. Es básicamente una alternativa, esa línea recta, está bien, así que podríamos decir, bueno qué personajes se permiten, ya sea una pequeña b o una gran B. Y entonces por supuesto no queremos otra B. Y luego podemos hacer lo mismo con el C. Así definimos un personaje. El usuario puede escribir ya sea un c pequeño para el C. grande Ahora si guardamos esto y el usuario teclea cereza con un C mayúscula, va a ser válido. ¿ Qué tan impresionante es esto? Es fácil, ¿verdad? Este no es un código difícil en absoluto. Acabamos de incluir el atributo de patente. Ahora hemos implementado nuestra propia validación incorporada en el lado del cliente. Quién las cosas son divertidas, ¿no? ¿Tan bien hecho? He tenido mucha, mucha diversión en esta conferencia mirando a Bolt en validación. ¿ Recuerdas los dos tipos de validación en bolt y JavaScript? Hemos mirado lo más común en ambos tipos de anotaciones en esta conferencia. Pero ahora, ¿qué empezamos a saltar a un poco de JavaScript uno, la validación fuera de script funciona. Nos vemos en la próxima conferencia.
6. Validez de JavaScript: Me entusiasma esta conferencia porque en esta conferencia vamos a estar alejándonos validación incorporada en
HTML5 a la validación de JavaScript. Y por validación de JavaScript, solo
me refiero a usar javascript para validar tu formulario. Y déjame ser claro, debes usar JavaScript si
quieres tomar el control sobre el aspecto y la sensación de los mensajes de error
nativos o para lidiar con navegadores heredados que no admiten la validación de formularios incorporada de HTML. Y si no sabes qué es JavaScript o cómo funciona, dónde viene. Entonces por favor echa un vistazo a mis círculos completos de abuelita JavaScript. Pero no te preocupes, va a ser bastante sencillo en esta conferencia. Entonces aunque no sepas cómo funciona JavaScript, deberías poder seguir adelante, ¿de acuerdo? De acuerdo, entonces, ¿cómo funciona esto? Bueno con los formularios, es común usar JavaScript con la API de validación de restricciones. Pero no te preocupes, esto se proporciona para molestar navegador. La mayoría de los navegadores hoy en día admiten la API de validación de restricciones. Se puede ver como un asiento de métodos y propiedades que nos da automáticamente el navegador. Y hay muchas API web diferentes disponibles para nosotros por el navegador,
como la API de Fetch cuando estamos lidiando con la edad. ¿ Y la API de WebSockets? ¿ Y el DOM? Por lo que esta API de validación de restricciones es solo una de muchas, o IPO. ¿ Cómo podemos usar esta API de validación de restricciones? ¿ Vamos a limitar en su uso en un elemento de forma interfaces Dom. Entonces lo que quiero decir con esto es que sólo podemos usar la API de restricción en las siguientes interfaces. Y cada interfaz representa un elemento diferente. Por ejemplo, la interfaz del elemento de botón HTML, por
supuesto representa el elemento de patente y así sucesivamente y así sucesivamente. Es bastante intuitivo. Entonces lo que es realmente genial, mis queridos alumnos es que cuando estamos tratando con estos elementos, con el elemento de entrada, por ejemplo, tenemos acceso a la API de validación de restricciones automáticamente. No tenemos que hacer nada también. De acuerdo, caso de planeador, así que tenemos acceso a la API de validación de restricciones. Pero, ¿qué significa en sentido práctico? ¿ Qué nos da? Bueno, nos da ciertas propiedades y métodos automáticamente. Por ejemplo, podemos acceder a la propiedad de mensaje de validación. ¿ Qué hace eso? Bueno, es una propiedad de sólo lectura que devuelve una validez. Es decir, va a devolver el mensaje de error que describe las restricciones de validación que el control no satisface. Si el valor del elemento satisface todas sus restricciones, está bien, es válido, entonces esto solo va a devolver una cadena vacía. También tenemos este objeto de validez. Éste es uno realmente útil. Y esto devuelve un objeto de estado de validez que contiene varias propiedades que describen el estado de validez del elemento real. A qué tipo de propiedades podemos acceder, donde podemos acceder a la propiedad de discordancia de patrones que devuelve true si el valor no
coincide con el atributo de patrón especificado y va a coincidir con false si sí coincide. Y recuerda los derechos ya que el valor no coincide con el atributo de patrón, también
vamos a coincidir con la pseudo-clase CSS inválida. Por lo que muchos de estos van a estar trabajando en tándem. Así que permítanme decir que de nuevo, este desajuste de patrón devolverá verdadero si el valor no coincide con el atributo de patrón especificado, vamos a obtener esta era de desajuste de patrones y se evitará que
la forma sea presentado al servidor. Pero al mismo tiempo debido a que los patrones no se emparejan, sabemos que la pseudo clase CSS inválida también está en juego. Es bastante interesante. Y otra propiedad de este objeto de validez es demasiado larga. Propiedad que devuelve true si el valor es más largo que la longitud máxima especificada por el atributo max length. Nuevamente, si es cierto, los elementos también van a coincidir con la pseudo clase CSS inválida. Muy similar a demasiado corto. Eso va a devolver verdadero si el valor es más corto que la longitud mínima especificada por el atributo men length y range overflow, range underflow day. Muy similar. Van a devolver true si el valor es mayor que el valor máximo especificado por el atributo max. O por supuesto, si estamos tratando con rango y el fluido va a devolver verdadero si el valor es menor que el mínimo especificado por el atributo men. Pero lo que es interesante y cómo esos mensajes de error de desbordamiento de
rango y subflujo de rango es que vamos a tener algunas pseudo-clases que se emparejan en ti adivina cuáles usarán las pseudo-clases inválidas que van a aplicar. Pero ahora también tenemos la pseudo-clase fuera de rango que van a aplicar. Bastante interesante, ¿verdad? Otra propiedad de este objeto de validez es esta propiedad de tipo no coincide o mensaje de error. Esto va a devolver verdadero si el valor no está en la sintaxis requerida. Por ejemplo, si tenemos una entrada con un atributo de tipo para sentarse, a correo electrónico o URL, y el usuario no escribe en el formato correcto si esto es válido, si devuelve true, sabemos que la pseudo clase CSS inválida también es va a aplicar. Y entonces tenemos esta propiedad válida que devuelve true si el elemento cumple con todas sus restricciones de validación y por lo tanto se considera válido. Entonces cuando esos válidos es cierto, sabemos que las pseudo clases CSS válidas. Vamos a aplicar. Y por último pero no menos importante, lo que sucede cuando tenemos este atributo requerido en un elemento lo hará en ese caso, tenemos este valor faltante propiedad, y cuello va a devolver verdadero si el elemento tiene un requerido atributo de que no se ha especificado ningún valor. Crew, la conozco, sé que esto es una tonelada, ¿verdad? Es muy, muy útil. Pero ya me conoces, Acciones hablan más fuerte que las palabras. Entonces, ¿por qué no voy rápidamente a la consola. Echemos un vistazo a un ejemplo rápido. Déjame acceder a este objeto de estado de validez y mostrarte sus propiedades. Esperemos que entonces se vuelva más intuitivo para ti. Echemos un vistazo. Entonces aquí estamos un ejemplo muy, muy sencillo. Acabo de envolver y de entrada pesos, tipo de ciudad toma en forma. Y por supuesto tenemos un patrón de tipos de MET, que es el predeterminado por cierto. Entonces ni siquiera necesitamos eso. Y por supuesto en este momento el usuario puede escribir cualquier cosa y enviar cualquier cosa. No hay restricciones de validación. Pero quiero mostrarles cómo funciona esta API de validación de restricciones. Recuerda que solo se aplica a ciertas interfaces. Y una de esas interfaces a las que se aplica fue la interfaz de elemento de entrada HTML, que nos da acceso a esta API en el elemento de entrada directamente. Entonces, ¿cómo funciona? Bueno, recuerda los dos tipos de validación del lado del cliente. Teníamos la validación incorporada, que es solo HTML5. Pero también tenemos el segundo tipo y eso es usar JavaScript. Y para poder usar JavaScript, necesitamos escribir todo lo que las etiquetas de script. De aquí. ¿ Qué hacemos? Bueno, necesitamos agarrar ese elemento de entrada. No quiero con el fin de acceder a la API de validación de restricciones. Entonces, ¿cómo agarramos ese insumo? Simplemente lo definimos en una variable, todos los textos. Y empecemos accediendo a nuestro objeto de documento. En aquí, podemos obtener elementos por nombre de etiqueta. El nombre de la etiqueta que queremos conseguir es importante, ¿verdad? Y esto devuelve una colección si has hecho mi núcleo DOM. Por lo que accedemos al primer elemento de la colección, que es ese elemento de entrada en sí. Y lo que es realmente genial. Lo que es realmente genial es que prácticamente lo hemos hecho. Ya sabes qué, en lugar de llamar a un texto, déjame llamarlo entrada de texto porque eso es lo que es. Y lo que podemos hacer ahora es que podemos acceder directamente a esta API de validación de restricciones. No tenemos que hacer nada más. Eso es realmente, realmente genial. Para que podamos agarrar nuestra entrada de texto. ¿ Y cuáles son algunos de los inmuebles de los que hablé? Bueno, el que es muy importante para nosotros es los objetos de validez son importantes para nosotros. Y para poder verlo, ¿por qué no solo registramos la pantalla en consola. Eso es todo lo que tenemos que hacer. Vaya a la especificación del navegador, este documento. Vayamos a la consola. Y aquí está esta validez los objetos del estado. ¿ Qué tan impresionante es este estudiantes de Medea? Sí, Muy, derechos muy cool. Y estas son algunas de las propiedades de los mensajes internos que se muestran dentro de este objeto de estado de capacidad, ¿verdad? Hablé de algunos de estos desajuste de tipo
demasiado largo, demasiado corto. Es la propiedad válida se establece en true ahora
porque no tiene los atributos requeridos en él. ¿ Por qué le pusimos el atributo requerido? Vamos a entrar en nuestras entradas alojadas atributo requerido en aquí. Ahora tenemos de nuevo este objeto multiestatal, pero ahora es válido. La propiedad se establece en false. Ya no es cierto. Y por supuesto también tenemos este valor propiedad faltante. Y recuerda que devuelve verdadero si el elemento tiene un atributo requerido que ningún valor. Tanta diversión, ¿no? Y esto es todo lo que quiero mostrarles por ahora. Yo sólo quería mostrarles cómo ver físicamente estas valideidades. Objetos, dibujarlo. Ahora seguimos discutiendo sólo las propiedades de las restricciones. Además, API es sólo otra que quiero mencionarte y Lina quiere pasar a alguna importante hazlo. Por lo que este salto de nuevo a la región.
7. Validez en JavaScript: objetos: Está bien. Te dije que no es tan difícil, ¿verdad? Y espero que se esté volviendo más intuitivo. Sigamos adelante. Porque estas no son las únicas propiedades disponibles para nosotros por la API de validación de restricciones. Tenemos otros. Por ejemplo, también
tenemos esto, validaremos adecuadamente. Y esto validará propiedad básicamente nos está diciendo si el elemento en cuestión, si el control de formularios en cuestión será validado cuando se presente el formulario. En otras palabras, es sólo una propiedad que nos está diciendo si se puede validar o no una entrada. Es cierto si se puede validar y falso si no lo es, ¿
Cuándo sería el suministro una vez que los validadores de lana van a ser falsos como si el elemento de entrada está deshabilitado. Recuerda que los miramos antes. Cuando está desactivada, no se va a validar viento sometido al servidor, ¿tiene sentido? Por lo que realmente hemos mirado en gran medida ciertas propiedades en la API de validación de restricciones. Y quiero seguir adelante ahora. Yo quiero mirar no propiedades, pero quiero ver algunos métodos disponibles para nosotros. Los métodos, por cierto, son como una función. Es algo que se hace. Es una palabra de hacer. Es como un verbo, mientras que las propiedades son más como un brazo. El primer método que quiero discutir es este método de validez de pollo devuelve verdadero si el valor del elemento no tiene problemas de validez. Y por supuesto que va a devolver falso. De lo contrario, si el elemento no es válido, este método también va a disparar un evento no válido en el elemento en sí. También tenemos otros métodos. También tenemos este método sit de validez personalizada. Y el argumento que toma es sólo el mensaje. Permite especificar un mensaje de error personalizado al elemento. ¿ Qué tan impresionante es esto? Y como es tan impresionante, quiero discutirlo solo un poco más sobre ¿por qué lo discutió más? Porque el uso de este método, el método de validez personalizada Sexto es uno de los casos de uso más comunes de la API de validación de restricciones. Como mencioné, solo te permite usar JavaScript para definir un fallo de validación y un mensaje de error personalizado. Porque seamos realistas, mensajes de error
automatizados del navegador tienen sus inconvenientes. No son muy fáciles de entender. A veces no te dicen suficiente información. Es mucho más agradable sentarse los nuestros. Y sí, lo adivinaste. Vamos a subirnos al editor de texto y veamos un ejemplo de uso del método de validez personalizada SETT. No puedo esperar a ver ahora.
8. Método de setCustomValidity - ejemplo: Está bien. Está bien. Está bien. Ahora quiero hablar de este método sit de validez personalizada. Es un método tan importante. Entonces quiero echar un vistazo a algunos ejemplos. Y este fue el ejemplo que miramos anteriormente. Acabamos de tener un tipo de entrada de texto. Es todo lo que teníamos. Y qué acabamos de ver cómo funciona esta validez personalizada sit en esto. Por lo que ahora mismo vamos a quitar requerido. Por lo que no hay restricción ni validación incorporada. Y ahora lo que quiero hacer es que quiero acceder a este método. Por lo que accedemos a nuestra entrada de texto aquí. Podemos salir directamente de la API de validación de restricciones. No tenemos que hacer nada especial. Pero esta vez quiero acceder admitido. El método se llama sit validez personalizada. Y quiero que notes algo cuando empiece a hacer esto, bien, voy a escribir nuestro error diciendo que esta es una era que nunca se detiene. Y si guardamos esto y obtuvimos nuestro formulario, si ahora el usuario intenta enviar, vamos a obtener un error. Porque esto básicamente es decirle al navegador que esto toma campo de entrada ahora está en estado de error y net. Queremos mostrar un mensaje de error y por supuesto que nunca se detiene, ¿verdad? El usuario no es capaz de enviar nunca este formulario. Por lo que este es un aspecto importante del uso de este método. Cuando lo uses, va a hacer esta entrada o cualquier elemento que estés usando o poniéndola, va a hacerla inválida. Y te lo puedo demostrar aquí dentro. ¿ Por qué no le damos estilo a la pseudo-clase inválida? Agarremos nuestro insumo. estilo al estado inválido y solo podemos darle un borde rojo, borde, un píxel, rojo sólido. Y ahora puedes ver que el estado predeterminado
no es válido porque hemos establecido este mensaje de error de validez personalizada, básicamente le decimos al navegador que esto ahora no es válido. Entonces el cliente, ¿cómo hacemos que no sea inválido? Will, si sientas el valor para terminar cadena vacía, vuelve a ser válido. Entonces, si ahora accedemos nuevamente a nuestra variable de entrada de texto, que es ese elemento de entrada en sí, podemos acceder nuevamente al método de validez personalizada de la ciudad, pero esta vez simplemente configurarlo en una cadena vacía. Si hacemos esto, guarde, ahora
es válido. Ya no tenemos ese error. El usuario no puede escribir y enviar. Está bien, Clyde, lo tengo, lo tengo. Pero, ¿cómo usamos realmente esto en un sentido práctico? Bueno, ¿por qué miramos un ejemplo ahora mismo, vamos a cambiar esta entrada de tipo, toma una entrada de tipo e-mail. Y si hay una era en el formato de ese correo electrónico, ¿por qué no mostramos nuestro propio mensaje de error personalizado? Qué impresionante esto va a ser tan divertido. Cp puede darle una oportunidad. Así que pausa el video, mira si puedes darle una oportunidad, y luego vamos a cortarlo juntos. ¿ Le diste una oportunidad? Eso espero. Pero si no, no te preocupes, hagámoslo ahora juntos. Lo primero que quiero hacer es querer quitar esta entrada de tipo texto, ¿de acuerdo? Y queremos sustituir estos insumos por entrada de tipo correo electrónico. Eso es lo que queremos hacer. Podemos darle un nombre de varón. Podemos darle una identificación de varón. Y porque le estamos dando una identificación de macho mientras y especificamos etiqueta aquí de macho. Y podemos decir, por favor dame una dirección de correo válida, ¿verdad? Muy, muy sencillo. Entonces ahora tenemos un e-mail, pero si el usuario intenta enviar solo texto aleatorio, recibimos este mensaje de error por parte del navegador, pero tal vez queremos nuestro propio mensaje de error personalizado. No nos gusta el del navegador. ¿ Cómo lo hacemos? Bueno, vamos ahora a codificar algo de JavaScript. Ya no es una entrada de texto es solo la variable final como una entrada de correo electrónico. Simplemente eliminemos todo lo demás, eliminación de ruido. Entonces aquí estamos. Tenemos nuestro elemento de entrada de correo electrónico. Lo que podemos hacer ahora es agregar un oyente de eventos. Podemos agarrar nuestra entrada de correo electrónico. Existe el método add event listener. El evento que queremos escuchar es un evento de entrada. Entonces cada vez que el usuario tipos de caracteres, cuando eso sucede, ¿qué queremos hacer? Bueno, queremos ejecutar una función de devolución de llamada. Perdón, tengo demasiados corchetes. Necesitan un corchete aquí afuera. Ahí vamos. ¿ Y qué queremos que suceda en nuestra función de devolución de llamada? Bueno, queremos decir si es correcto, en esta entrada de correo electrónico, el desajuste de tipo se establece en verdadero, entonces sabemos que hay un problema, ¿verdad? Porque en segundo plano cuando especificamos el tipo de correo electrónico, sabemos que hay una expresión regular construida por el navegador en este caso. Y sabemos en net no cumplir que la propiedad de tipo discordancia. Y recuerda con sus propiedades ubicadas, Así es. Se encuentra en el objeto del estado de validez. Nunca decimos a la verdad. Sabemos que hay un error. Y por lo tanto queremos mostrar nuestro propio mensaje de error personalizado. Si es falso, podemos simplemente sentar ese método de validez personalizado a una cadena vacía y por lo tanto el navegador lo dejará enviar al servidor. Entonces si en esta entrada de correo electrónico, accedemos a su objeto de estado de validez ahí. Recuerde que había una propiedad de tipo discordancia. Si la deuda se establece en true, entonces queremos lo que rastrean, queremos acceder a ese método de validez personalizado sit. No te preocupes. Salgamos. Accedemos a nuestra entrada de correo electrónico. Y aquí tenemos la validez del CID Cliente. Y sólo podemos decir, estoy esperando una dirección de correo electrónico real, por favor. De acuerdo, entonces ahí vamos. Literalmente lo hemos hecho. Y si conoces JavaScript, una vez que si MIT, también
tenemos una declaración else, derecha, porque si el tipo de validez de correo electrónico no está ajustado en falso, entonces queremos que se ejecute este otro. ¿ Y qué queremos que suceda aquí? Will por supuesto, queremos establecer este mensaje de validez personalizada conjunto a una industria. Y por eso te mostré el ejemplo anterior, ¿no? Donde tuvimos que silicio en cuerda para que fuera válido. Entonces ahora si el usuario escribe texto aleatorio, hacemos clic en Enviar, hay nuestro propio mensaje de error personalizado. Qué impresionante. Pero claro, si los tipos de usuario de dirección de correo válida y voy a dar clic en Enviar, todos
estamos bien para ir. ¿ Eso tiene sentido? No quiero que te pierdas con todo el detalle. Todo lo que hicimos fue agregar nuestro propio oyente de eventos en esa entrada de correo electrónico. El evento que escuchamos es un evento de entrada cada vez que se dispara, ejecutamos esta declaración if else, en realidad
puedo demostrarles lo que está sucediendo. A lo mejor esto ayudará si pones poco claro. Pero lo que podemos hacer es cada vez que se dispara ese evento de entrada, ¿qué registramos la consola en la consola? Esta validez de entrada de correo electrónico, estado objeto. Está bien, vamos a la consola a cerrar sesión eso. Vayamos al navegador. Abre la consola. Correcto, Vamos a escribir la letra a. aquí. Tenemos el estado de validez. Si abrimos eso, tenemos esta propiedad de tipo discordancia. Y un desajuste de tipo actualmente se establece en true. Y está configurado en true porque hemos dado este tipo de entrada de correo electrónico y como es un tipo de correo electrónico, hay una expresión regular tiene que estar en formato adecuado. Una vez que no es correcto formato a a. Si abrimos esto ahora, ese tipo de discordancia se establece en false y porque es falso, sí
queremos que el usuario pueda enviar el formulario. Ahí vamos. El usuario puede hacer, señor, Qué impresionante. Espero que tenga sentido. Espero que hayas puesto atención porque en la próxima conferencia, quiero darte un reto y quiero ver si puedes averiguar cómo hacerlo. Súper emocionado y nos vemos en la próxima conferencia.
9. Introducción a la reto: setCustomValidity: Bienvenido a este reto muy cool, donde quiero que intentes y uses esta API de validación de restricciones o por ISAF. Y seré honesto contigo, no espero que lo hagas correcto, pero solo dale una oportunidad, intenta llegar lo más lejos que puedas. ¿ Qué quiero que hagas? ¿ Cuál es el reto? Bueno, déjame acercar ligeramente. Solo quiero crear un campo de entrada de texto con un usuario tiene que ingresar el nombre de usuario, pero el nombre de usuario tiene que tener al menos una letra minúscula y mayúscula. Si el usuario sólo intenta enviarlo como está sin escribir nada, quiero un mensaje de error personalizado,
tonto, creo que no atado a nada. Si el usuario comienza a escribir sólo letras minúsculas e intenta enviar, obtenemos otro mensaje de error personalizado son impresionantes. Pero claro, cuando el usuario ahora tiene una letra mayúscula ahí dentro y haga clic en Enviar, el navegador nos permite pasar por un ejemplo muy sencillo. ¿ Sabes qué? Déjame sólo darte una pista. Y entonces una pista va a ser la expresión regular que se utilizan, aka el valor del atributo de patente. Déjame mostrarte cómo se ve. Entonces ahí tienes. Quiero que uses ese valor en los atributos del patrón. Déjame que te lo explique rápidamente. En primer lugar, tenemos los corchetes, los dos corchetes, que son dos conjuntos de grupos. De acuerdo, Empezamos cada grupo con un signo de interrogación, signo igual. Esto se acaba de conocer y RegEx como un lookahead positivo. Todo lo que estoy tratando de lograr aquí, como estoy tratando de decir, podemos teclear minúscula y mayúscula o podemos escribir mayúscula y minúscula, el orden no necesariamente importa. Lo siguiente que notarás es que tenemos esta parada completa. Parada completa coincide con cualquier personaje individual. Después pones un astérix. El asterisco coincide con el carácter anterior 0 o más veces. Y luego tenemos los corchetes, que ya hemos visto en este curso muchas veces, con los personajes a2. Básicamente, es sólo permitir un rango de caracteres en minúsculas entre un. y dicho. Estoy tratando de decir en ese primer grupo es que el usuario puede escribir tantos caracteres como iban entre
a y z y ahora rematar todo este patrón. Por un cuantificador. Tengo esas llaves rizadas, que básicamente es decirle a la RegEx que coincida con los grupos anteriores al menos una vez y como máximo 50 veces. Eso es todo lo que eso significa. Entonces esa es mi RegEx que es aparente. Solía sentir libre para simplemente copiar eso, pegarlo, y luego tratar de averiguar cómo hice esta solución. Te daré una pista sobre ese tipo de entrada. Voy a estar escuchando el evento inválido. Recuerda mencioné que ese tipo de propiedad de desajuste disparará un evento no válido cuando lo que sea inter no coincide con el campo de patrón. Entonces por eso estoy escuchando un evento inválido. Cuando eso se dispara un evento válido, claro, quiero comprobar si el valor no es nada. Porque cuando no es nada, solo quiero ese mensaje de error tonto, pero no has escrito nada. Marimba, intenta enviar ahora, quiero ese mensaje de error. Entonces tenemos que comprobar si el valor real es una cadena vacía. Si no es una cadena vacía, pero seguimos llegando ahí entonces era válida. Sabemos entonces que no ha proporcionado al menos una letra mayúscula y una minúscula. Por ejemplo, sabemos que esto va a suceder y tenemos que decirles que
necesitan una mayúscula y otra que en mucho para llevar, darle un ir, ver hasta dónde puedes llegar, y te veré en el video de la solución.
10. Solución de desafíos: setCustomValidity: ¿ Le diste una oportunidad? Eso espero. Eso espero, pero no te preocupes, no pudo resolverlo del todo. Es un poco complicado y hay un matiz muy complicado cuando se trabaja con la API de validación de restricciones. Entonces les voy a mostrar cómo lo resolvemos. Antes de que lo hagamos, tiene nuestro HTML. Tenemos una etiqueta, que es sólo pedir el nombre de usuario. Y por supuesto tenemos nuestro tipo de entrada de texto. Tenemos nuestro atributo adquirido en el día. Y son el patrón, la expresión regex de la que hablamos en el video de introducción. Muy, muy sencillo. Y si vamos al navegador, así es como se ve. Pero ahora mismo el usuario puede, obviamente se impedirá a EU enviar el formulario. Tenemos un mensaje de error predeterminado el cual queremos
cambiar y el uso y simplemente teclear cualquier cosa. Ah, claro que estima el aparejo. Caso más pequeño, mayúscula, entonces el usuario puede enviar. Pero queremos nuestros propios mensajes de error personalizados. ¿Cómo funciona? Bueno, como saben, tenemos que envolver todo en etiquetas de guión. El primero que queremos hacer es que queremos acceder a esta API de validación de restricciones. Para eso tenemos que trabajar con alguna interfaz. El que vamos a trabajar aquí es este elemento de entrada. Entonces vamos a agarrarlo. Definamos una variable llamada entradas de nombre. Y podemos acceder a nuestro selector de consulta de documentos, y queremos consultar seleccionar nuestros elementos de entrada. Eso realmente, realmente es así de simple. Ese es el primer paso completado. Ahora, lo que quiero hacer es que quiero acceder a esta variable, aka el elemento de entrada. Y queremos agregar nuestro propio oyente de eventos. Y te di una pista a nueve. Yo quiero escuchar a los inválidos. Y el evento inválido se va a despedir cada vez el valor del insumo no cumpla con esos derechos de patente. Además, vamos a obtener este evento no válido cuando se les requiera valor especificado. Pero por supuesto que no hay valor asociado a ese insumo. Entonces cuando se despide este evento, ¿
qué queremos que suceda? Bueno, queremos ejecutar, voy a función de devolución de llamada. Abordemos el primer tema. Y el primer número es si no se entra nada en la caja de entrada, bueno, en ese caso, sabemos que voy a nombrar entrada va a tener un valor. Y ese valor va a ser una cadena vacía, ¿verdad? Va a ser nada. Y si eso ocurre, si esto es cierto, entonces queremos definir nuestro propio mensaje de error personalizado. Ya sabemos hacer esto. Podemos acceder a todos los elementos. Y ahora usamos la API de validación de restricciones, porque podemos acceder directamente al mensaje de validez personalizada del asiento. Podemos decir simplemente tonta Bali. No has enseñado nada. Ratas y podemos salvar esto. Vamos al navegador y probamos la transmisión del navegador. Y ahí vamos, tenemos nuestro propio mensaje de error personalizado. Pero notarás si ahora el usuario escribe caracteres e intenta enviar, seguimos recibiendo este mensaje de error. Porque recuerda dije una vez que usamos el método de validez personalizada sig, le
decimos al navegador que ese elemento
no es válido independientemente de si en realidad ya no es inválido. Y ese es el ligero matiz del que te hablaba antes. Pero de todos modos, lo vamos a resolver en breve. Ya hemos tratado el primer tema. Nosotros, obtenemos un evento inválido y la entrada de nombre no tiene un valor. Por lo que hemos lidiado con ese escenario. Ahora vamos a lidiar con el escenario de los Knicks. Entonces cuando llegamos a este bloque else, sabemos que a, tenemos un evento inválido, y B, sabemos que el usuario ha escrito algunos caracteres. Por lo tanto, de nuevo, vamos a establecer nuestro propio método de validez del cliente asiento mensaje de error personalizado. Y aquí podemos decir que los nombres de usuario necesitan contener al menos una letra mayúscula y una minúscula. Inténtalo de nuevo. Entonces, vamos a guardar esto. Vamos al navegador y probemos esto pudrido. El usuario empieza a escribir clics, enviar, obtenemos nuestro propio intermedio personalizado. Muy, muy cool. Pero notarás ahora tenemos un problema porque si el usuario escribe una letra mayúscula, así que tenemos una mayúscula y minúscula. Si el usuario envía, vamos a estar de esta manera perpetua de estado. Siempre estamos teniendo una época. Recuerda, es porque hemos utilizado el método de validez personalizada de la SEC, que le dice al navegador que este cuadro de entrada siempre va a ser inválido. ¿ Cómo lo detenemos? Recordamos tenemos que establecer la validez personalizada miss. Un mensaje a una cadena vacía, y cuando se trata de una cadena vacía, será válida. ¿ Recuerdas eso? Pero no lo podemos ver. Ya sabes, si miramos nuestro código, no
podemos establecer el mensaje de validez personalizada establecido en una cadena vacía aquí porque esto es cuando estamos tratando con una era válida interna. Entonces lo que tenemos que hacer en realidad, y este es el ligero matiz o el silencio alrededor, ¿no? Tenemos que acceder a nuestra entrada de nombre, agregar otro oyente de eventos. Y este evento los oyentes sólo van a estar escuchando la entrada, ¿verdad? Cada vez que se escribe un personaje, quiero escuchar el CV y queremos acceder a nuestra entrada de nombre. Y esta vez quiero sentarme a la validez personalizada a una cadena vacía. Todo lo que quiero hacer y para demostrar que esto funciona, vamos al navegador. El usuario escribe nada. Es un mensaje de error, empieza a escribir. Hagamos una Cumbre de Síndicos D mayúscula. Se nos permite hacerlo si el usuario solo escribe minúsculas y hace clic en Enviar, obtenemos un mensaje de error personalizado. Pero, ¿notaron que hay una idea de problema, estudiantes? ¿Lo notaste? Fue muy, muy leve, pero puede que lo hayas recogido y sabemos que el primer paso funciona. Entonces Lee creía que no escribía nada, pero si ahora los tipos de personaje de usuario, una mirada a que estamos recibiendo el mensaje de error que muestra el navegador. No obtenemos nuestro mensaje de error personalizado. De hecho, sólo vamos a obtener nuestro mensaje de cliente cuando el usuario golpea Enviar. Porque sólo cuando los remitentes emitidos se emite este mensaje de error no válido y sólo entonces se aplican nuestros mensajes de error personalizados. No queremos que eso suceda. Entonces, cada vez que se presiona a un personaje, ¿verdad? Es decir, cada vez que se dispara un evento de entrada, queremos disparar a otro método, nuestra API de validación de restricciones, donde se desea ejecutar el minuto de validez de chick, porque si eso es falso, el evento inválido va a ser despedido y nuestro código se ejecutará. Entonces si hacemos eso en cada iteración, eso debería resolver nuestro problema. Actualicemos el navegador. De acuerdo, Podemos enviar tonta creer no atado a nada, pero si ahora el usuario tipos de personaje, un libro, qué impresionante es que obtenemos nuestro propio mensaje de error personalizado. Y por supuesto, eso va a pasar hasta que podamos volver a golpear Submit. Va a pasar hasta que tengamos un capital. Ahí vamos. Y si ahora nos sometemos, lo permitimos. El usuario sólo puede hacer una mayúscula D. Vamos a hacer sólo mayúsculas. No está funcionando, no está funcionando. Pero tan pronto como el usuario vaya a minúsculas, ahora
podemos enviar. Ya sé, sé que esto puede ser bastante confuso, pero vamos a saltar al código realmente es bastante intuitivo una vez que entiendas lo que está pasando. Si utilizamos el método de validez personalizada SETT y escribimos nuestro propio mensaje personalizado, básicamente en un estado perpetuo de una época, le
estamos diciendo al navegador que la entrada es estado
inválido y se debe mostrar nuestro mensaje de error personalizado. Por eso no podíamos simplemente confiar en nuestro único bloque de código aquí escuchando el evento inválido, tuvimos que crear otro tipo de evento que
escuchamos net es cada vez que los tipos de caracteres de usuario. Empecemos por ahí. Sabemos que hacemos dos cosas cuando se dispara ese evento de entrada. Déjenme decirlo de otra manera. Cada vez que el usuario tipos de caracteres, hacemos dos cosas. Uno, empezamos diciendo: Hey, busquemos el valor de los métodos de validez personalizados a una cadena vacía. decir, empecemos diciendo que estamos en un estado válido. Sé que suena extraño, pero escúchame. Lo siguiente que hacemos es despedir este método de validez de pollito. Y recuerda en la conferencia discutimos esto. Si todo está bien en esa entrada, verdadero se devuelve y no pasa nada más. Por lo que, por lo tanto, el navegador enviará el formulario. Pero si hay un error, entonces sabemos que este método de validez de cheques va a disparar un evento válido. Y en ese caso, nuestro siguiente bloque de código completo capturará todo el proceso. Y es por eso que o bien muestra el mensaje de error al usuario tonto, creo que no escribió nada cuando es una cadena vacía. Alternativamente, en la declaración else, si el usuario ha escrito caracteres, pero todavía estamos recibiendo esta era inválida. Tenemos otro mensaje. Los nombres de usuario deben contener al menos una letra mayúscula y una minúscula. Inténtalo de nuevo, y luego empezamos de nuevo. Así dicen que el usuario escribe una minúscula y mayúscula. En ese caso, net tipos de usuario que mayúsculas, este primer bloque de código se va a aplicar porque es un evento de entrada, lo
vas a establecer a válido. Y entonces el método de validez de cheques va a devolver verdadero. Y por eso se nos permite presentar el formulario. Sé que puede ser bastante complejo, pero realmente pasa por ello de nuevo, pasa por esta conferencia un par de veces, asegúrate de entender que realmente te ayudará a bajar la pista. Y una vez que lo consigues en realidad, realmente no es cierto. Entonces, de todos modos, espero que te hayas divertido mucho en esta conferencia. Sé que sí, pero sigamos. Nos vemos en la próxima conferencia.
11. Outro de la clase: Esta fue una clase divertida, no lo era. Acabamos de enterarnos de la validación del lado del cliente. Los dos tipos son la validación incorporada y la validación de JavaScript. Utilizamos un método sit custom validity con el fin de escribir nuestros propios mensajes de error. Qué divertido. Y se puede empezar a ver lo importante que es la validación, ¿no? Y no es tan difícil de implementar. Solo tenemos que darle un poco de pensamiento y solo tienes que saber un poco de HTML y JavaScript y tal vez un poco de RIG dolores si quieres conseguir un poco más cocinar juntos. Pero de todos modos, hemos recorrido un largo camino. Y recuerda, sigo diciendo que las validaciones del lado del cliente sólo una pieza al rompecabezas. También tienes que realizar la validación del lado del servidor. Y eso me lleva a otro tema entero. ¿ Y así es como configuras un servidor? Perseo forma hija. Entonces en la próxima clase, quiero empezar a hablar de servicio, de una llamada. Espera, y espero verte pronto. Adios.
CM Code_Zone, !false | funny, because its true
