JS表单验证：如何校验name字段非空且输入内容不为数字？

现有代码的核心问题 #

• 逻辑运算符错误：你当前使用&&（逻辑与）判断「值为空 且 类型为数字」，两个条件不可能同时满足，自然触发不了数字相关的校验，你需要的是||（逻辑或），只要满足「为空」或者「包含数字」任意一个条件就触发报错。
• 数字校验逻辑错误：text类型输入框的value永远是字符串类型，typeof x的返回值永远是string，不可能等于number，判断字符串是否包含数字需要用正则表达式匹配。
• 表单选取规则错误：document.forms["contact_form"]是按表单的name属性取值，你的表单只设置了class="contact_form"，没有配置name属性，实际上是取不到对应表单对象的。

修正后的代码 #

第一步：修改表单代码，给form添加name属性（适配你原有的取值逻辑） #

<form name="contact_form" class="contact_form" method="put" action="confirmation.html">
    <label for="myName">Name:</label>
    <input type="text" name="myName" id="myName" required />
</form>

第二步：修改验证函数 #

function validateForm() {
  let x = document.forms["contact_form"]["myName"].value.trim(); // 加trim去除首尾空格，避免全空格通过校验
  // 正则匹配是否包含数字，/\d/ 表示匹配任意0-9的数字
  const hasNumber = /\d/.test(x);
  if (x === "" || hasNumber) {
    alert("Name must be filled out properly.");
    return false;
  }
  // 校验通过后续逻辑
  return true;
}

额外优化说明 #

如果你不想给表单加name属性，也可以用id选择器直接获取输入框的值，写法更简单：

let x = document.getElementById("myName").value.trim();

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