JavaScript表单验证中使用getElementById获取姓名存储变量不生效

• document.getElementById('full-name')返回的是完整的<input>DOM节点对象，并非用户在输入框中填写的文本内容。将这个DOM对象直接传入正则校验时，JS会自动把对象转为[object HTMLInputElement]字符串做匹配，自然永远无法命中有效验证分支。
• 全局作用域下声明的变量名name与浏览器全局对象window.name（原生窗口属性）重名，会触发作用域冲突，导致实际取到的变量值和预期不符，是控制台输出异常的核心原因。
• 代码在页面初始化阶段就将DOM引用存入变量，没有在用户点击提交的时机实时读取输入内容，哪怕后续用户填写了表单，变量存储的也始终是DOM元素，不会更新为最新的用户输入文本。

1. 更换变量命名，避开与全局原生属性的冲突
2. 在点击事件的执行逻辑中，通过.value属性实时读取输入框的用户输入内容
3. 对输入内容做首尾空格裁剪，减少无意义的匹配误判

// 清晰命名，避开name的全局命名冲突
const fullNameInput = document.getElementById('full-name');

document.getElementById('purchase').addEventListener('click', function(){
  // 点击触发时实时读取用户输入的文本
  const inputName = fullNameInput.value.trim();
  console.log(inputName);
  const nameCheckReg = /^[a-zA-Z]+ [a-zA-Z]+$/;
  if(!nameCheckReg.test(inputName)){
      document.getElementById('error').innerText += '\nPlease provide a valid name';
  } else {
     console.log('valid name given');
  }    
});

• 所有表单类控件（input、textarea、select）的用户输入内容，必须通过元素.value的方式读取，直接取元素本身得到的是DOM节点对象，不是用户填写的文本
• 全局作用域下尽量不要声明name、top、location、parent这类与浏览器原生window属性重名的变量，避免触发非预期的属性覆盖bug
• 如果控制台输出的DOM引用为null，说明脚本执行时对应的HTML元素还未渲染完成，可以将script标签放到页面所有DOM元素的末尾，或把初始化逻辑包裹在DOMContentLoaded事件中，等页面加载完成后再执行元素获取逻辑。

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