如何使用JavaScript实现表单验证，校验用户输入邮箱是否匹配指定邮箱

首先修改你的HTML代码，给表单加个id方便后续选中：

<form id="emailForm" action='' method='POST' enctype="multipart/form-data">
    <div class='item'>
          <p><b><span style="color: red;">Email Address</span></b><span class='required'>*</span></p>
            <input type="email" name="email" placeholder="ba******o@***.com" required=''/>
       </div>
<div class='question'>
          <center><p>Privacy Policy<span class='required'>*</span></p></center>
          <div class='question-answer checkbox-item'>
            <div>
              <center><label class='check' for='check_1'><span>By submitting this form you agree to the terms of service <a href='https://www.google.com/p/privacy-policy.html' target="_blank">privacy policy.</a></span></label></center>
            </div>
          </div>
        </div>
        <div class='btn-block'>
         <center> <button href='/' type='submit' id="submitForm">Submit</button></center>
      </div>
</form>

在页面任意位置插入以下JavaScript代码即可实现需求：

// 获取表单元素
const form = document.getElementById('emailForm')
// 预设正确邮箱
const CORRECT_EMAIL = 'badmansmo@gmail.com'

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 读取用户输入的邮箱，自动去除前后空白字符
  const inputVal = form.querySelector('input[name="email"]').value.trim()
  
  // 校验邮箱是否匹配
  if (inputVal !== CORRECT_EMAIL) {
    alert('邮箱输入错误，请输入正确的邮箱地址')
    // 阻止表单提交
    e.preventDefault()
    return false
  }
  // 校验通过则表单正常提交
})

补充说明 #

• 如果需要忽略邮箱输入的大小写差异，可以将比对逻辑修改为 inputVal.toLowerCase() === CORRECT_EMAIL.toLowerCase()
• 前端校验仅作为用户体验优化手段，核心校验逻辑后端必须二次实现，避免用户通过修改前端代码绕过校验规则。

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