Estoy haciendo un formulario de registro.
En eso, tengo un campo de nombre de usuario que no debería permitir los caracteres -, space, ", ' pero no puedo hacer que eso suceda.
Intenté: - Método de corte, método de subcadena, expresiones regulares, método de eliminación y división y técnica de unión.
Así que código:
function username(event) { text = document.getElementById('usname').value; key = event.key; if (key == ' ' || key == '"' || key == "'" || key == '-') { setTimeout(() => { let final = text.slice(0, -1); document.getElementById('usname').value = final'; },0.005) } }Este fue mi mejor enfoque, pero eliminó dos caracteres a la vez y si hacemos spam y luego escribimos un carácter, obtenemos un espacio en el texto que no es válido.
Puede usar la expresión regular [Regex]
Esta expresión regular solo aceptará letras y números , y eliminará caracteres especiales y espacios.
function username(event) { text = document.getElementById('usname').value; document.getElementById('usname').value = text.replace(/[^a-zA-Z0-9\w]/g, ""); } <input type="text" onkeyup="username()" id="usname" />EDITAR
[^a-zA-Z0-9\w] es lo mismo que [^\w] o simplemente \W. Todo lo permitirá , por lo que [^a-zA-Z0-9] o [\W ] sería mejor. – MikeM
Tienes razón amigo, así mucho mejor.
function username(event) { text = document.getElementById('usname').value; document.getElementById('usname').value = text.replace(/[\W_]/g, ""); } <input type="text" onkeyup="username()" id="usname" />EDITAR
No quiero que se eliminen otros símbolos, solo quiero estos: el guión (-), el espacio, las comillas simples y dobles ('",). – Shaurya Shrimal
Agregue los símbolos que desea eliminar en regex /[-'" ]/g
function username(event) { text = document.getElementById('usname').value; document.getElementById('usname').value = text.replace(/[-'" ]/g, ""); } <input type="text" onkeyup="username()" id="usname" />En primer lugar, para brindar la mejor experiencia de usuario al usuario, debe informar al usuario con un texto de sugerencia debajo del cuadro de entrada que indique que estos caracteres no están permitidos.
Se recomienda tener una validación en el cuadro de entrada, que advertirá al usuario resaltando el cuadro de entrada en rojo cuando el usuario ingrese caracteres no válidos y no permita enviar, en lugar de eliminar los caracteres de su entrada sin su conocimiento.
Para la validación de formularios, use una biblioteca como validador para detectar caracteres no válidos. Ejemplo para validar un nombre de usuario que debe tener solo caracteres alfanuméricos:
validator.isAlphanumeric('fooBar123'); //=> true