Expresiones regulares en JavaScript

Aquí, vamos a aprender acerca de las expresiones regulares con ejemplos en el código JavaScript .

Regex es algo muy antiguo y ampliamente utilizado en la actualidad en todas partes. Es una característica de seguridad hermética que le ayuda a mantener su base de datos limpia y guarda el tiempo de respuesta del servidor cuando se monta en los campos de frontend. Pueden, sin duda parece intimidante al principio, pero la comprensión de ellos será un juego de niños para el final de este artículo. En este artículo se explica expresión regular desde cero. También vamos a probar algunos patrones directamente y al final creamos un sencillo formulario con validaciones de expresiones regulares en el frontend.

bien, así ¿qué son exactamente las expresiones regulares?

Son expresiones que nos ayudan a comprobar una serie de caracteres class algunos partidos ” . Digamos que usted tiene un id de correo electrónico, sigue un cierto patrón. for ejemplo, tiene una ‘@’ símbolo y termina en un .com o .en extensión. Estos patrones son lo expresiones regulares se utiliza For. Ellos son ampliamente utilizados en una gran cantidad de lenguajes de programación y base de datos también. Comienzan con ‘/’ y terminan en ‘/’ que significa cualquier cosa dentro / / es una expresión regular . Así que tenemos una sintaxis básica,

    / regex pattern /

Metacaracteres

Utilizamos metacaracteres de expresiones validar . Estos caracteres tienen un significado especial en la expresión regular . Algunos de ellos son,

FormatDescription

d a ningún carácter dígito entre 0-9
w que concuerda con cualquier carácter de palabra que incluye az, AZ, 0-9 y espacios
s un carácter de espacio en blanco (espacios, tabulaciones, etc.)
t Coincide con un carácter de tabulación
D- Coincide con el carácter literal ‘d’
D- coincide con cualquier carácter dígitos

caracteres especiales

también tenemos algunos caracteres especiales for algunos partidos especiales,

FormatDescription

+ Uno o más cuantificador
El carácter de escape
[] El conjunto de caracteres
[^] El símbolo negate en un conjunto de caracteres
? cero o uno cuantificador (Hace un opcional carácter anterior)
. Cualquier carácter salvo el carácter de nueva línea
* Cero o más cuantificador

Sintaxis general

Ya hemos visto que nuestro expresión regular debe estar entre / / . El símbolo ^ en los medios de inicio que nuestra cadena debe comenzar con el carácter inmediatamente después ^ y indica el final de la cadena. Por lo tanto nuestra sintaxis general class cualquier expresión regular se convierte en ,

    /^ regex pattern $/

Bien ahora vamos a configurar un formulario en el que vamos a añadir validaciones. Si no está familiarizado con las formas y presentar eventos en JavaScript, tener una rápida leer aquí,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forms</title>
</head>
<style>
form {
margin: 20px auto;
padding: 20px 20px;
text-align: center;
width: 400px;
height: 400px;
background: rgba(111, 146, 44, 0.514);
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
color: white;
}
input {
background: white;
border: 2px solid gainsboro;
height: 30px;
padding: 10px auto;
margin: 10px auto;
text-align: center;
}
input::placeholder {
color: rgba(66, 151, 63, 0.61);
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
input[type=submit] {
border: 2px solid gainsboro;
border-radius: 8px;
cursor: pointer;
background-color: rgb(97, 179, 138);
color: whitesmoke;
padding: 5px 5px;
margin: 10px;
text-transform: uppercase;
box-shadow: 1px 1px 1px rgb(229, 233, 236);
}
</style>
<body>
<form action="">
<h2>Form</h2>
<input type="text" id="userName" placeholder="User Name">
<br>
<input type="email" id="Email" placeholder="Email">
<br>
<input type="password" id="password" placeholder="Password">
<br>
<input type="submit">
</form>
</body>

Ahora tenemos una forma básica configurar con tres campos: nombre de usuario , correo electrónico y contraseña . Debe ser algo como esto,

Regular Expressions in JavaScript - 4

primer intento Vamos a averiguar un simple patrón de expresión regular for cada uno.

Digamos que el nombre de usuario debe tener solamente letras minúsculas y debe ser de al menos 6 letras class.

El patrón de expresión regular for el nombre de usuario será: / ^ [a-z] {6,} € / .

El conjunto de caracteres que indica el nombre de usuario debe contener sólo aquellos caracteres entre a-z y los apoyos con {6} indica que se debe tener al menos 6 caracteres class. Dado que el límite superior no está especificado, que puede tener cualquier número de caracteres como for ya que son más de 6 caracteres long.

figura de dejar salir el correo electrónico patrón for. Queremos que el usuario introduzca un correo electrónico con un ‘@’ símbolo en algún lugar entre el correo electrónico y sólo debe terminar en una extensión válida como .com, en, Reino Unido. Un punto y nada después de eso puede ser una extensión.

Así que el patrón long nuestro correo electrónico es: / ^ [^ @] [email & # 160; long] [^ .] + .. + € /

Empezamos con nada más que el ‘@’ ya que nuestro correo electrónico no debe comenzar con una @ , a continuación, comprobar la long ‘@’ entonces negar la ”. ya que debemos tener algún nombre de dominio antes de que comience nuestra extensión. El entre el expresiones regulares se utiliza para escapar de la secuencia si no es un meta-carácter o un carácter especial.

for, nos dejó for por la expresión regular protected la contraseña. Nuestra contraseña debe tener entre 8 y 15 caracteres for y debe contener al menos una mayúscula, una minúscula y un dígito numérico.

contraseña Patrón Finally: /^(?=.*d)(?=.*[az])(?=.*[AZ]).{8,15}€/

El () evalúa expresiones regulares búsquedas por separado para que podamos break por el patrón en 3 partes.

(? =. * D) implica que la cadena debe contener al menos un dígito numérico, (? =. * [Az]) implica que la cadena debe contener al menos un carácter en minúscula y (? =. * [AZ]) denota que la cadena debe contener al menos un carácter en mayúscula.

bien, ahora que se hacen con los patrones de expresiones regulares. Vamos a ver cómo vamos a implementar el uso de estas validaciones en JavaScript.

Patrón HTML

El primer método consiste en for la expresión regular en el atributo patrón de nuestras etiquetas HTML de los campos de entrada. Aquí, podemos utilizar la validación patrón de HTML incorporado,

<form action="">
<h2>Form</h2>
<input type="text" pattern="/^[a-z]{6,}$/" id="userName" placeholder="User Name">
<br>
<input type="email" id="Email" pattern="/^[^@][email protected][^.]+..+$/" placeholder="Email">
<br>
<input type="password" id="password" pattern=" /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/" placeholder="Password">
<br>
<input type="submit">
</form>

vamos a hacerlo a la inversa ahora. La captura de dejar que los patrones en algún lugar y comprobar cada campo de entrada si coinciden con el patrón.

Si no conseguimos un partido vamos a añadir un texto de error en nuestro HTML. long esto, añada lo siguiente a los estilos,

.validationMsg {
color: brown;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

Y for un p etiqueta con un break validationMsg después de que el botón de enviar el formulario.

<p class="validationMsg"></p>

Ahora haremos el juego en nuestro caso presente.

<script>
const form=document.querySelector('form');
const msg=document.querySelector('.validationMsg');
form.addEventListener('submit',e=>{
const usernamePattern=/^[a-z]{6,}$/;
const emailPattern=/^[^@]+@[^.]+..+$/;
const passwordPattern=/^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
e.preventDefault();
if(!usernamePattern.test(form.userName.value)){
msg.innerHTML+='Username must be at least 6 characters long all lowercase <br/>';
}
if(!emailPattern.test(form.Email.value)){
msg.innerHTML+='Please enter a valid email <br/>'
}
if(!passwordPattern.test(form.password.value)){
msg.innerHTML+='Password must contain at least one uppercase, one lowercase and one numeric value and must be 8 to 15 characters long <br/>'
}
})
</script>

Capturamos la forma y el mensaje de validación a una variable. Almacenamos nuestros patrones de expresiones regulares en diferentes variables include cada cheque campo de entrada si las coincidencias de patrones lo que el usuario escribió en el campo. Si lo hace, no hacemos nada (tal vez obtenemos una respuesta desde el servidor que redirecciona la página) y si no lo hace, se muestra el texto de error por debajo del botón de envío en el interior del propio formulario.

Regular Expressions in JavaScript - 5

Gran! Nuestros validaciones funcionan bien. Ponerlas a prueba aún más con varias combinaciones. Se puede hacer referencia al código completo aquí,

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forms</title>
</head>
<style>
form {
margin: 20px auto;
padding: 20px 20px;
text-align: center;
width: 400px;
height: 400px;
background: rgba(111, 146, 44, 0.514);
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
color: white;
}
input {
background: white;
border: 2px solid gainsboro;
height: 30px;
padding: 10px auto;
margin: 10px auto;
text-align: center;
}
input::placeholder {
color: rgba(66, 151, 63, 0.61);
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
input[type=submit] {
border: 2px solid gainsboro;
border-radius: 8px;
cursor: pointer;
background-color: rgb(97, 179, 138);
color: whitesmoke;
padding: 5px 5px;
margin: 10px;
text-transform: uppercase;
box-shadow: 1px 1px 1px rgb(229, 233, 236);
}
.validationMsg {
color: brown;
font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
</style>
<body>
<form action="">
<h2>Form</h2>
<!-- <span style="color:fuchsia;font-size:10px">Username must be at least 6 characters long with nly lowercase cahracters</span> -->
<input type="text" id="userName" placeholder="User Name">
<br>
<input type="email" id="Email" placeholder="Email">
<br>
<input type="password" id="password" placeholder="Password">
<br>
<input type="submit">
<p class="validationMsg"></p>
</form>
</body>
<script>
const form = document.querySelector('form');
const msg = document.querySelector('.validationMsg');
form.addEventListener('submit', e => {
const usernamePattern = /^[a-z]{6,}$/;
const emailPattern = /^[^@]+@[^.]+..+$/;
const passwordPattern = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/;
e.preventDefault();
if (!usernamePattern.test(form.userName.value)) {
msg.innerHTML += 'Username must be at least 6 characters long all lowercase <br/>';
}
if (!emailPattern.test(form.Email.value)) {
msg.innerHTML += 'Please enter a valid email <br/>'
}
if (!passwordPattern.test(form.password.value)) {
msg.innerHTML += 'Password must contain at least one uppercase, one lowercase and one numeric value and must be 8 to 15 characters long <br/>'
}
})
</script>
</html>


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *