电子邮件边框样式赢得'；javascript中的表单验证不起作用？

我正在用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;

    }



}

函数验证（）
{
var email=document.getElementById（'name'）.value；
var img=document.getElementById（“图像”）；
变量模式=/^[a-zA-Z0-9\-\+（\.[a-zA-Z0-9\-\+）*@[a-Z0-9]+（\-[a-Z0-9]+）*（\.[a-Z0-9]+（\-[a-Z0-9]+）*。[a-z]{2,4}$/；
如果（！模式测试（电子邮件））{
var myDiv=document.getElementById（“错误”）；
email.style.border=“实心3px红色”；
myDiv.innerHTML='请输入有效的电子邮件'；
返回false；
}else if（img.value.trim（）=“”）{
var myDiv=document.getElementById（“错误”）；
img.style.border=“实心3px红色”；
myDiv.innerHTML='请选择图像'；
返回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>

用户名




图像


选择要上载的图像


将文件拖放到此处
上传
请填写用户名并选择图像

首先是：

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

您的错误如下：

email.style.border = ...

电子邮件是一个字符串，不是元素，它没有样式属性，因此尝试访问undefined的border属性时会引发错误

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

在

表单

标记中使用

按钮[type=“submit”]

，它将提交表单值并重新加载页面。使用

e.preventDefault

，以防止其默认操作

var email=document.getElementById（'name'）.value

->

email

变量有值，因此语句

email.style.border=“solid 3px red”将抛出错误，因为它不是元素


功能验证（e）{
e、 预防默认值（）；
var email=document.getElementById（'name'）；
var img=document.getElementById（“图像”）；
变量模式=/^[a-zA-Z0-9\-\+（\.[a-zA-Z0-9\-\+）*@[a-Z0-9]+（\-[a-Z0-9]+）*（\.[a-Z0-9]+（\-[a-Z0-9]+）*。[a-z]{2,4}$/；
如果（！pattern.test（email.value））{
var myDiv=document.getElementById（“错误”）；
email.style.border=“实心3px红色”；
myDiv.innerHTML='请输入有效的电子邮件'；
返回false；
}else if（img.value.trim（）=“”）{
var myDiv=document.getElementById（“错误”）；
img.style.border=“实心3px红色”；
myDiv.innerHTML='请选择图像'；
返回false；
}
}

用户名




图像


选择要上载的图像


将文件拖放到此处
上传
请填写用户名并选择图像


能否请您包含调用此JavaScript验证的相关HTML标记。是的，我已经做了一个说明，使用regex验证电子邮件相当困难，而且不会造成太多误报。通常我只是检查电子邮件地址是否包含
@
，然后从那里继续。有些有效的电子邮件地址中甚至没有
。此外，name对于表单控件来说不是一个好名称或id，因为它屏蔽了表单自己的name属性（即
表单。name
引用控件，而不是表单的name属性）。