电子邮件边框样式不适用于 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]+)*)*\.[a-z]{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" 会更合适。