JavaScript点击submit触发validateForm表单验证及提示功能修复咨询

存在的问题 #

• HTML中邮箱输入框缺少id="email"属性，JS中无法获取到该表单元素，直接导致校验逻辑报错中断
• 代码中使用了U.$()工具方法获取元素，若没有引入对应的工具库会直接获取元素失败
• 没有给form表单绑定submit事件，validateForm函数根本不会被触发，校验逻辑无法执行
• 手机号校验正则缺少首尾定位符，只要内容中包含符合规则的子串就会判定为通过，校验逻辑有误
• 留言textarea的校验规则和姓名一致，仅允许2-20位字母类字符，不符合留言的实际使用场景
• addErrorMessage、addCorrectMessage函数中更新已存在提示文本时，错误使用了span.firstChild.value，文本节点的内容属性为nodeValue，导致提示文本无法更新
• 状态切换时没有同时移除对立状态的提示，会出现错误提示和正确对勾同时显示的问题
• 使用previousSibling获取label节点时，会把HTML标签之间的空白识别为文本节点，导致节点定位错误，无法正确修改label的样式类

修复方案 #

1. 修改HTML代码 #

补全邮箱输入框的id，给form加id方便绑定事件：

<form id="contactForm">
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">Required</span>Name</p>
    <input type="text" id="name">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required" >Required</span>Number</p>
    <input type="text" id="number">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">Required</span>Mail address</p>
    <input type="email" id="email">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">Required</span>Message</p>
    <textarea id="text"></textarea>
  </div>
  <input type="submit" value="submit">
  <p id="log"></p>
</form>

2. 修改JS代码 #

• 补全工具方法U.$，避免依赖缺失
• 修复正则规则，调整留言校验逻辑
• 修正文本节点内容修改逻辑，替换previousSibling为更稳定的类选择器定位
• 状态切换时先移除对立状态的提示
• 绑定表单submit事件触发校验

// 补全工具方法
const U = {
  $: id => document.getElementById(id)
}

function validateForm(e) {
  if (typeof e == 'undefined') e = window.event;
  var name = U.$('name');
  var number = U.$('number');
  var email = U.$('email');
  var text = U.$('text');
  var error = false;

  // 姓名校验
  if (/^[A-Z \.\-']{2,20}$/i.test(name.value)) {
    removeErrorMessage('name');
    addCorrectMessage('name', '✔');
  } else {
    removeCorrectMessage('name');
    addErrorMessage('name', '请输入您的姓名');
    error = true;
  }

  // 手机号校验 增加首尾定位符
  if (/^\d{3}[ \-\.]?\d{3}[ \-\.]?\d{4}$/.test(number.value)) {
    removeErrorMessage('number');
    addCorrectMessage('number', '✔');
  } else {
    removeCorrectMessage('number');
    addErrorMessage('number', '请输入正确的手机号');
    error = true;
  }

  // 邮箱校验
  if (/^[\w.-]+@[\w.-]+\.[A-Za-z]{2,6}$/.test(email.value)) {
    removeErrorMessage('email');
    addCorrectMessage('email', '✔');
  } else {
    removeCorrectMessage('email');
    addErrorMessage('email', '请输入正确的邮箱地址');
    error = true;
  }

  // 留言校验 调整规则为10-200字任意字符
  if (/^.{10,200}$/.test(text.value)) {
    removeErrorMessage('text');
    addCorrectMessage('text', '✔');
  } else {
    removeCorrectMessage('text');
    addErrorMessage('text', '请输入10-200字的留言内容');
    error = true;
  }

  if (error) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
    return false;
  }
}

function addErrorMessage(id, msg) {
  'use strict';
  var elem = document.getElementById(id);
  var newId = id + 'Error';
  var span = document.getElementById(newId);
  if (span) {
    span.firstChild.nodeValue = msg;
  } else { 
    span = document.createElement('span');
    span.id = newId;
    span.className = 'error';
    span.appendChild(document.createTextNode(msg));
    elem.parentNode.appendChild(span);
    // 用类选择器定位label，避免空白节点影响
    elem.parentNode.querySelector('.Form-Item-Label').classList.add('error');
  } 
} 

function addCorrectMessage(id, msg) {
  'use strict';
  var elem = document.getElementById(id);
  var newId = id + 'Correct';
  var span = document.getElementById(newId);
  if (span) {
    span.firstChild.nodeValue = msg; 
  } else { 
    span = document.createElement('span');
    span.id = newId;
    span.className = 'Correct';
    span.appendChild(document.createTextNode(msg));
    elem.parentNode.appendChild(span);
    elem.parentNode.querySelector('.Form-Item-Label').classList.add('Correct');
  } 
} 

function removeErrorMessage(id) {
  'use strict';
  var span = document.getElementById(id + 'Error');
  if (span) {
    var label = span.parentNode.querySelector('.Form-Item-Label');
    label.classList.remove('error');
    span.parentNode.removeChild(span);
  } 
} 

function removeCorrectMessage(id) {
  'use strict';
  var span = document.getElementById(id + 'Correct');
  if (span) {
    var label = span.parentNode.querySelector('.Form-Item-Label');
    label.classList.remove('Correct');
    span.parentNode.removeChild(span);
  } 
} 

// 页面加载完成后绑定表单提交事件
window.onload = function() {
  document.getElementById('contactForm').addEventListener('submit', validateForm)
}

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