表单验证报错：函数被判定非函数，需实现空值与格式校验

核心错误原因 #

你遇到的"函数不是函数"报错，本质是JS代码在DOM元素加载完成前执行，导致document.getElementById("myForm")返回null，此时尝试给null.onsubmit赋值会触发类似"无法读取null的属性'onsubmit'"的错误，被你误解为函数异常。此外原代码还有两处逻辑缺陷：

• validateUserFname的正则仅包含零宽断言，未匹配实际字符，导致任何非空名字都会验证失败；
• 未处理姓氏（lname）的空值验证，也未按需求在控制台输出用户ID的错误提示。

修正后的完整代码 #

HTML代码

<form id="myForm" action="">
  <label for="uid">User Id:</label>
  <input type="text" id="uid" name="uid"><br>
  <label for="fname"> First Name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <label for="birthday"> Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br>
  <input type="submit" id="accept" value="Accept">
</form>

<div id="validateID"></div>
<div id="validateName"></div>

JS代码

// 验证用户ID：8-12位，必须包含大小写字母和数字
const validateUserId = (userId) => /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,12}$/.test(userId);

// 验证名字/姓氏非空
const validateUserName = (name) => name.trim() !== '';

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById("myForm");

  form.onsubmit = (e) => {
    e.preventDefault();
    const uid = e.target.elements.uid.value.trim();
    const fname = e.target.elements.fname.value.trim();
    const lname = e.target.elements.lname.value.trim();
    const validateIDEl = document.getElementById("validateID");
    const validateNameEl = document.getElementById("validateName");

    // 用户ID验证：不符合规则时控制台输出提示
    if (validateUserId(uid)) {
      validateIDEl.textContent = "Valid User ID";
    } else {
      validateIDEl.textContent = "Invalid UserID";
      console.error("Invalid User ID: 需包含大小写字母和数字，长度8-12位");
    }

    // 名字/姓氏空值验证
    if (validateUserName(fname) && validateUserName(lname)) {
      validateNameEl.textContent = "Valid Name/Last Name";
    } else {
      validateNameEl.textContent = "无效的名字/姓氏";
      console.error("无效的名字/姓氏：名字或姓氏不能为空");
    }
  };
});

关键修改说明 #

1. 解决DOM加载时序问题：用DOMContentLoaded事件包裹代码，确保DOM元素完全加载后再获取表单，避免null报错。
2. 修正验证逻辑：
   • 重写名字验证函数为validateUserName，直接判断输入非空，符合你"名字/姓氏为空时提示"的需求；
   • 保留用户ID的正则验证逻辑，确保规则生效。
3. 按需求输出提示：用户ID不符合规则时通过console.error输出控制台提示；名字/姓氏为空时显示指定提示文本，同时同步控制台输出。
4. 规范ID命名：移除验证容器ID中的空格，改为驼峰命名，避免潜在的选择器兼容问题。

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