如何在输入框旁显示表单验证错误信息，替代alert弹窗且不使用jQuery

第一步：修改HTML代码 #

移除所有输入框上的行内onkeypress事件，在每个需要验证的输入框/选择器后新增错误提示容器，示例片段如下：

<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
  <p>Your Name: <span id="job1"></span></p>

  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25">
  <span id="fname-err" class="error-tip"></span>


  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="required">
  <span id="lname-err" class="error-tip"></span>

  <label for="start">Date of birth:</label>
  <input type="date" id="start" required="required" name="date of birth" value="2021-10-04" />
  <br>
  <br>
  <label for="gender"> Select you gender</label>
  <br>
  <br>
  <select name="gender" id="gender" required="required">
    <option value="" selected>Please Select</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <span id="gender-err" class="error-tip"></span>
  <br>
  <label for="streetname">Street Address</label>
  <input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />
  <span id="streetname-err" class="error-tip"></span>
  <label for="suburb">Suburb/Town</label>
  <input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">
  <span id="suburb-err" class="error-tip"></span>
  <label for="state">Choose a state:</label>
  <br>
  <select name="state" id="state" required="required">
    <option value="">Please Select</option>
    <option value="VIC">VIC</option>
    <option value="NSW">NSW</option>
    <option value="QLD">QLD</option>
    <option value="NT">NT</option>
    <option value="WA">WA</option>
    <option value="SA">SA</option>
    <option value="TAS">TAS</option>
    <option value="ACT">ACT</option>
  </select>
  <span id="state-err" class="error-tip"></span>
  <br>
  <br>
  <label for="postcode">Postcode</label>
  <input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">
  <span id="postcode-err" class="error-tip"></span>
  <label for="email">Email Address</label>
  <input type="text" id="email" name="emailadd" placeholder="Your email address.." required="required">
  <span id="email-err" class="error-tip"></span>
  <label for="phone">Phone Number</label>
  <input type="text" id="phone" name="phonenumb" placeholder="e.g. 0451124561" minlength="8" maxlength="12" required="required">
  <span id="phone-err" class="error-tip"></span>
  <br>
  <input type="submit" value="Apply">
  <br>
  <br>
  <input type="submit" id="cancelpurchase" value="Cancel Application">
</form>

第二步：添加错误提示样式 #

.error-tip {
  color: #f5222d;
  font-size: 12px;
  margin-left: 6px;
  display: none;
}

第三步：修改JS验证逻辑 #

// 清空所有错误提示
function clearAllErrors() {
  const errEls = document.querySelectorAll('.error-tip');
  errEls.forEach(el => {
    el.textContent = '';
    el.style.display = 'none';
  })
}

// 显示对应字段错误
function showFieldError(fieldId, msg) {
  const errEl = document.getElementById(`${fieldId}-err`);
  if(errEl) {
    errEl.textContent = msg;
    errEl.style.display = 'inline';
  }
}

// 替代行内按键过滤逻辑
['fname', 'lname'].forEach(id => {
  document.getElementById(id).addEventListener('keypress', function(e) {
    const code = e.charCode;
    return (code > 64 && code < 91) || (code > 96 && code < 123) || code ===32;
  })
})

// 绑定表单提交事件
document.getElementById('regform').addEventListener('submit', function(e) {
  const pass = validate();
  if(!pass) e.preventDefault();
})

// 修改后的验证函数
function validate() {
  clearAllErrors();
  var result = true;

  var fname = document.getElementById("fname").value;
  if (!fname.match(/^[a-zA-Z]+$/)) {
    showFieldError('fname', '请正确输入名字');
    result = false;
  }
  var lname = document.getElementById("lname").value;
  if (!lname.match(/^[a-zA-Z]+$/)) {
    showFieldError('lname', '请正确输入姓氏');
    result = false;
  }
  var email = document.getElementById("email").value;
  if (!email.match(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/)) {
    showFieldError('email', '请正确输入邮箱地址');
    result = false;
  }
  var streetname = document.getElementById("streetname").value;
  if (!streetname.match(/^[a-zA-Z0-9\s]+$/)) {
    showFieldError('streetname', '请正确输入街道地址');
    result = false;
  }
  var suburb = document.getElementById("suburb").value;
  if (!suburb.match(/^[a-zA-Z\-]+$/)) {
    showFieldError('suburb', '请正确输入郊区/城镇名称');
    result = false;
  }
  var phone = document.getElementById("phone").value;
  if (!phone.match(/[0-9]{9}/)) {
    showFieldError('phone', '请正确输入手机号码');
    result = false;
  }

  var gender = document.getElementById("gender").value;
  var start = document.getElementById("start").value;
  // 注意原代码里skill、other、otherbox元素不存在，自行补充对应HTML即可
  // var skill = document.getElementById("skill").value;
  // var other = document.getElementById("other").value;
  // var otherbox = document.getElementById("otherbox").value;

  var postcode = document.getElementById("postcode").value;
  var state = document.getElementById("state").options[
    document.getElementById("state").selectedIndex
  ].text;

  var regex;
  switch (state) {
    case "Please Select":
      showFieldError('state', '请选择所在州');
      return false;
    case "VIC":
      regex = new RegExp(/(3|8)\d+/);
      break;
    case "NSW":
      regex = new RegExp(/(1|2)\d+/);
      break;
    case "QLD":
      regex = new RegExp(/(4|9)\d+/);
      break;
    case "NT":
      regex = new RegExp(/0\d+/);
      break;
    case "WA":
      regex = new RegExp(/6\d+/);
      break;
    case "SA":
      regex = new RegExp(/5\d+/);
      break;
    case "TAS":
      regex = new RegExp(/7\d+/);
      break;
    case "ACT":
      regex = new RegExp(/0\d+/);
      break;
  }
  if (!postcode.match(regex)) {
    showFieldError('postcode', '州和邮编不匹配');
    result = false;
  }

  if (result) {
    storeBooking(
      fname,
      lname,
      start,
      email,
      gender,
      phone,
      streetname,
      suburb,
      state,
      postcode,
      // other,
      // otherbox
    );
  }
  return result;
}

内容的提问来源于stack exchange，提问作者user17058623