电子邮件边框样式不适用于 javascript 中的表单验证？

Question

我正在用 javascript 进行表单验证，一切正常，但边框样式不适用于电子邮件验证，图像验证完美无缺，但我遇到的唯一问题是电子邮件部分。 这是我的代码：

function validate()
{
   var email = document.getElementById('name').value;
   var img = document.getElementById("image");
   var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;

    if (!pattern.test(email)) {
         var myDiv = document.getElementById("error");
         email.style.border = "solid 3px red";
         myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Enter an valid Email</font>';
         return false;

    }   else if (img.value.trim()=="") {
         var myDiv = document.getElementById("error");
         img.style.border = "solid 3px red";
         myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Select an image</font>';
         return false;

    }



}

编辑：这也是我所做的 HTML 代码。

<div class="container">
        <div class="add-form">
            <form method="post" enctype="multipart/form-data" id="FormID">
            <div class="well well-sm"><strong>Username</strong></div>
                <label for = "name" id = "LabelName"><font size = "5">

                <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1233/1233986.png" width = "50">
                 <br>
                 </label>
                <input class = "UsernameUpload form-control" id = "name" type="text" name="user_name"></font>
                <div id = "space"><br></div>
                <div class="well well-sm"><strong>Image</strong></div>

                <label for = "image" id = "fileLabel"
                ondragover = "overrideDefault(event);fileHover();"
                ondragenter = "overrideDefault(event);fileHover();"
                ondragleave = "overrideDefault(event);fileHoverEnd();"
                ondrop = "overrideDefault(event);fileHoverEnd();addFiles(event);">


                <font face = "fantasy" size = "5">
                <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1180/premium/1180674.png" width = "50">
                <br>

                 <span id = "fileLabelText">Select image to upload</font></span>
                 <br>
                 </label>
                 <div class = "upload-area" id = "uploadfile"><h1>Drag and Drop File Here</h1></div>

                <input multiple onchange = "addFiles(event)" id = "image" type="file"  onchange ="unlock()" name="profile" class="form-control2" accept="*/image">
                <button class = "btn btn-info uploadButton" type="submit" value = "submit" name="btn-add" onClick = "return validate()" action = "index.php"><font face = "calibri" size = "4">upload</font></button>
                <div id = "error"><font face = "fantasy">Please fill up the username and select an image</font></div>
                <progress id = "progressBar" value = "0" max = "100" style = "width:300px;"></progress> 
                <h3 id = "status"></h3>
                <p id = "loaded_n_total"></p>

            </form>
        </div>
        <hr style="border-bottom: 5px blue solid;">
    </div> 
    </div>

Answer 1

首先是：

var email = document.getElementById('name').value;

你的错误在这里：

email.style.border = ...

email是一个字符串，而不是一个元素，它没有样式属性，因此在尝试访问 undefined 的边框属性时会抛出错误。

控制台错误消息应该提醒您注意这一点。

Answer 2

button[type="submit"]用在form标签中，它将提交表单值并重新加载页面。 使用e.preventDefault ，以防止它的默认操作。

var email = document.getElementById('name').value; -> email变量有值，所以声明email.style.border = "solid 3px red"; 会抛出错误，因为它不是一个元素。

 function validate(e) { e.preventDefault(); var email = document.getElementById('name'); var img = document.getElementById("image"); var pattern = /^[a-zA-Z0-9\\-_]+(\\.[a-zA-Z0-9\\-_]+)*@[a-z0-9]+(\\-[a-z0-9]+)*(\\.[a-z0-9]+(\\-[a-z0-9]+)*)*\\.[az]{2,4}$/; if (!pattern.test(email.value)) { var myDiv = document.getElementById("error"); email.style.border = "solid 3px red"; myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Enter an valid Email</font>'; return false; } else if (img.value.trim() == "") { var myDiv = document.getElementById("error"); img.style.border = "solid 3px red"; myDiv.innerHTML = '<font face = "fantasy" size="4" color = "red">Please Select an image</font>'; return false; } }

 <div class="container"> <div class="add-form"> <form method="post" enctype="multipart/form-data" id="FormID"> <div class="well well-sm"><strong>Username</strong></div> <label for="name" id="LabelName"><font size = "5"> <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1233/1233986.png" width = "50"> <br> </label> <input class="UsernameUpload form-control" id="name" type="text" name="user_name" value="" /> <div id="space"><br></div> <div class="well well-sm"><strong>Image</strong></div> <label for="image" id="fileLabel" ondragover="overrideDefault(event);fileHover();" ondragenter="overrideDefault(event);fileHover();" ondragleave="overrideDefault(event);fileHoverEnd();" ondrop="overrideDefault(event);fileHoverEnd();addFiles(event);"> <font face = "fantasy" size = "5"> <img alt = "Fix audits" src = "https://image.flaticon.com/icons/png/512/1180/premium/1180674.png" width = "50"> <br> <span id = "fileLabelText">Select image to upload</font></span> <br> </label> <div class="upload-area" id="uploadfile"> <h1>Drag and Drop File Here</h1> </div> <input multiple onchange="addFiles(event)" id="image" type="file" onchange="unlock()" name="profile" class="form-control2" accept="*/image"> <button class="btn btn-info uploadButton" type="submit" value="submit" name="btn-add" onClick="return validate(event)" action="index.php"><font face = "calibri" size = "4">upload</font></button> <div id="error"> <font face="fantasy">Please fill up the username and select an image</font> </div> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> </div> <hr style="border-bottom: 5px blue solid;"> </div> </div>

注意- name为值的 id 不是@RobG指出的适当名称。 如果该字段包含email value ，则id="email"会更合适。