使用JavaScript校验表单email输入框 仅允许小写输入否则阻止提交

核心逻辑分两层：原生HTML属性做基础兜底，JavaScript做实时提示+提交拦截，完全满足「输入大写触发错误、禁止提交」的需求。

基础HTML结构 #

先写表单结构，自带pattern属性做原生校验兜底，提前写好错误提示的容器：

<form id="emailForm">
  <div style="margin: 16px 0;">
    <label for="emailInput">邮箱地址：</label>
    <input 
      type="email" 
      id="emailInput" 
      name="email"
      required
      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    >
    <span class="err-text" style="color: #f00; margin-left: 8px; display: none;"></span>
  </div>
  <button type="submit">提交表单</button>
</form>

这里的pattern规则本身就只匹配全小写的合法邮箱格式，浏览器会做基础的提交拦截，但提示样式和时机不够灵活，需要补充JS逻辑。

JavaScript校验逻辑 #

JS需要实现两个核心能力：用户输入时实时检测大写字符给出明确提示，表单提交时二次校验，不合法直接阻断提交行为。

// 绑定DOM节点
const form = document.getElementById('emailForm');
const emailInput = document.getElementById('emailInput');
const errText = document.querySelector('.err-text');

// 统一校验方法
const checkEmail = (val) => {
  // 优先检测是否存在大写字符
  if (/[A-Z]/.test(val)) {
    return { pass: false, tip: '输入错误：邮箱仅支持小写字符，请勿输入大写字母' }
  }
  // 校验合法邮箱格式
  const emailRule = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
  if (!emailRule.test(val.trim())) {
    return { pass: false, tip: '请输入格式正确的有效邮箱地址' }
  }
  return { pass: true, tip: '' }
}

// 输入实时校验
emailInput.addEventListener('input', () => {
  const res = checkEmail(emailInput.value);
  if (!res.pass) {
    errText.textContent = res.tip;
    errText.style.display = 'inline';
    emailInput.style.outline = '1px solid #f00';
  } else {
    errText.style.display = 'none';
    emailInput.style.outline = '';
  }
})

// 提交拦截
form.addEventListener('submit', (e) => {
  const res = checkEmail(emailInput.value);
  if (!res.pass) {
    e.preventDefault(); // 阻断表单默认提交行为
    errText.textContent = res.tip;
    errText.style.display = 'inline';
    emailInput.style.outline = '1px solid #f00';
    emailInput.focus();
    return;
  }
  // 校验通过后在这里写正常提交逻辑，比如接口请求
  console.log('校验通过，提交邮箱：', emailInput.value.trim())
})

注意事项 #

• 如果需求允许，可以在用户输入大写时自动转成小写，不用强制报错，只需要在输入框旁加小字提示「系统将自动把大写字符转换为小写」即可，实现方式就是在input事件里加一行emailInput.value = emailInput.value.toLowerCase()。
• 前端校验只能提升用户体验，必须在后端接口层增加同样的规则校验，避免用户绕过前端直接提交非法数据。

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