Estoy un poco confundido en este momento con mi validación de carácter especial.
HTML:
<label> Password: <br /><input type="password" id="password" placeholder="Enter password" pattern="(?=.*[az])(?=.*[AZ])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})" /><br /> <span class="notif" id="pass"></span><br /> <div id="message"> <p id="letter" class="invalid">Lowercase letter</p> <p id="capital" class="invalid">Uppercase letter</p> <p id="number" class="invalid">Number</p> <p id="special" class="invalid">Special Character</p> <p id="length" class="invalid">Minimum 8 characters</p> </div> </label>CSS:
#message { display: none; background: #ffffff; color: #000; padding: 0; margin-top: 0; margin-left: 5px; } #message p { padding: 1px 2px; font-size: 12px; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: green; } .valid:before { position: relative; left: -3px; content: '✔'; } /* Add a red text color and an "x" when the requirements are wrong */ .invalid { color: red; } .invalid:before { position: relative; left: -5px; content: '✖'; } Este es mi JS para la validación de caracteres especiales. Todavía estoy confundido acerca de cómo hacer que funcione. Cada vez que escribo un special character , solo se resaltan las lowercase .
JS:
// Validate special characters var specialCharacters = /[^A-Za-z0-9]/g; if (myInput.value.match(specialCharacters)) { letter.classList.remove('invalid'); letter.classList.add('valid'); } else { letter.classList.remove('valid'); letter.classList.add('invalid'); } Sé que mi problema se encuentra en algún lugar de var specialCharacters = /[^A-Za-z0-9]/g; pero que puede ser
Puedes seguir esto:
var strongRegex = new RegExp("^(?=.*[az])(?=.*[AZ])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");¿Qué significa?
^ The password string will start this way (?=.*[az]) The string must contain at least 1 lowercase alphabetical character (?=.*[AZ]) The string must contain at least 1 uppercase alphabetical character (?=.*[0-9]) The string must contain at least 1 numeric character (?=.*[!@#$%^&*]) The string must contain at least one special character, but we are escaping reserved RegEx characters to avoid conflict (?=.{8,}) The string must be eight characters or longerPuede editar la expresión, por ejemplo, si desea cambiar la longitud mínima a 10, cambie (?=.{8,}) a (?=.{10,})
You can check the condition by strongRegex.exec(myInput)Espero que esto le haya dado la respuesta.
Aquí /[^A-Za-z0-9]/g explica paso a paso el texto fuerte:
/ para Buscar un carácter de palabra.^ Busque cualquier carácter que NO esté entre corchetes.A-Za-z0-9 significa la letra mayúscula A a Z y minúsculaa a z , y 0 a 9 si cualquier carácter o número y el/g Realiza una coincidencia global (busca todas las coincidencias en lugar de detenerse después de la primera)Puede obtener más información sobre esta operación de tipo similar o expresión regular aquí Referencia de expresiones regulares de JavaScript
Puede utilizar esta expresión para la validación de su contraseña.
var specialCharacters = /^(?=.*\d)(?=.*[az])(?=.*[AZ])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/Esta expresión buscará una mayúscula, una minúscula, un carácter especial y la longitud de la contraseña debe ser de 8 a 15 caracteres.
var specialCharacters = /^(?=.*\d)(?=.*[az])(?=.*[AZ])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/; if (myInput.value.match(specialCharacters)) { letter.classList.remove('invalid'); letter.classList.add('valid'); } else { letter.classList.remove('valid'); letter.classList.add('invalid'); }