Question

我正在制作一个带有正则表达式验证的表单。我遇到的问题是，当我想验证电子邮件字段时，发现这一系列错误。

框中出现的错误消息是这些问题：

Uncaught TypeError: campo is null

validaCampos file:///f:/javascript recuperacion/ejercicioformular/js.js:92

validador file:///f:/javascript recuperacion/ejercicio formulario/js.js:36

file:///f:/javascript recuperacion/ejercicio formulario/js.js:3

onload file:///f:/javascript recuperacion/ejercicio formulario/js.js:3

EventHandlerNonNull* file:///f:/javascript recuperacion/ejercicio formulario/js.js:2

有问题的表单要做的是验证数据，以便我可以选择发送数据。如果我删除电子邮件字段并仅验证其他 4 个字段，如果它允许我发送它，则只会在该字段中发现错误，尽管以防万一我要传递整个代码，正如您在图像中看到的，它在不同的代码行中标记了几个错误

   window.onload = function(){
        document.getElementById('btnValidar').onclick = function(){validador()};
    
    }
        var arrayFallos =[];
    
        var xmlhttp = new XMLHttpRequest();
        
     function validador(){
            
            arrayFallos = []
    
            var campoNombre = document.getElementById('nombre');
            var expNombre = new RegExp('^[A-Z]{1}[A-Za-z áéúíó ñ]{2,14}$');//nombre que comprueba las vocales , que emppiece por mayuscula y que vaya de 2 a 14 caracteres
            validaCampos(expNombre,campoNombre);
           
    
            var campoEdad = document.getElementById('edad');
            var expEdad = new RegExp('^([1][8-9]|[2-5][0-9]|[6][0-5])$');//va desde los 18 hasta los 65
            validaCampos(expEdad, campoEdad);
        
    
            var campoDNI = document.getElementById('DNI');
            var expDNI = new RegExp('^[0-9]{8}[A-Z]{1}$');//valida un DNI español
            validaCampos(expDNI,campoDNI);
    
    
            var campotlf = document.getElementById('tlf');
            var exptlf = new RegExp('^[679]{1}[0-9]{8}$');//valida numeros de telefono movil
            validaCampos(exptlf,campotlf);
    
    
            var campoemail = document.getElementById('email');
            var expemail = new RegExp('^(.+)@(\\S+)$');
            validaCampos(expemail,campoemail);
    
        console.log("Array fallos en el siguiente log");
        console.log(arrayFallos);
    
        if(arrayFallos.length==0){
            alert("Formulario completo puede enviar");
            document.getElementById("Enviar").disabled=false;
            document.getElementById("Enviar").type='submit';
        }else{
            var fallos = "";
            for(var i=0;i<arrayFallos.length;i++){
                fallos += arrayFallos[i].name+"\n"; 
            }
            arrayFallos[0].focus();
            alert("Los campos: \n"+fallos+"\nNo cumplen los requisitos");
        }
function validaCampos(expresion, campo){

    console.log(campo);

    var idcampo = campo.id

    if(expresion.test(campo.value)){
        console.log("Si "+campo , idcampo);
        return true;
    }else{
        console.log("NO "+campo, idcampo, campo.value);
    
        arrayFallos.push(campo);

    switch(idcampo){

        case 'nombre':
            window.alert("Error en el campo "+idcampo+" : \n\n. valor no valido");
        break;
        case 'edad':
            window.alert("Error en el campo "+idcampo+" : \n\n valor no valido");
        break;
        case 'DNI':
            window.alert("Error en el campo "+idcampo+" : \n\n valor no valido");
        break;
        case 'tlf':
            window.alert("Error en el campo "+idcampo+"  \n\n valor no valido");
        break;
        case 'email':
            window.alert("Error en el campo "+idcampo+"  \n\n valor no valido");
        break;

    }
        return false;
    }
}
}

对于请愿，我添加了 Html

我添加了 html 部分

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type ="text/javascript" src="js.js"></script>
    <title>Ejercicio 2</title>
</head>
<body>
    <form id="form" action= "">
        Nombre: <input type = "text" id = "nombre" name = "nombre"></br></br>
        Edad: <input type = "text" id = "edad" name = "edad"></br></br>
        DNI: <input type="text" id="DNI" name="DNI"></br></br>
        Telefono: <input type="tel" id="tlf" name="tlf"></br></br>
        Email :<input type="email" id="emial" name="email"></br></br>
        
        <input type="button" value="Validar" name="validar" id="btnValidar">
        <input disabled type="button" value="Enviar" id="Enviar"><!-- La propiedad disabled establece o devuelve si un campo de texto está desactivado o no.
            Un elemento deshabilitado es inutilizable y no se puede hacer clic en él. Los elementos deshabilitados generalmente se representan en gris de forma predeterminada en los navegadores.-->
        <input type="reset" value="Borrar datos del formulario" name="btnBorrar" id="borrar">
    </form>
    
</body>
</html>

Answer 1

感谢用户@Fzs，我发现错误是一个简单的拼写错误，也是为了正确验证

<input type="email" id="emial" name="email"></br></br>

正确的是这个

<input type="email" id="email" name="email"></br></br>

验证电子邮件的正确正则表达式是这样的

<块引用>

[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)@[a-zA-Z0-9_]+([.][a-zA -Z0-9_]+)[.][a-zA-Z]{2,5}

如何使用正则表达式正确验证电子邮件？

1 个答案: