表单验证函数未定义错误排查求助

核心错误原因 #

你的代码存在两个语法错误，直接导致浏览器无法正确解析所有验证函数：

1. validatePhoneNumber函数末尾缺少闭合的}，函数定义不完整
2. <script>标签未添加闭合的</script>，整个脚本块未正确结束

修复后的完整脚本代码 #

const NAME_MAX_LENGTH = 20;
const EMAIL_MAX_LENGTH = 50;
const PHONE_MAX_LENGTH = 15;
let pageIsValid = true;

/**
 * Submit form if valid
 */
function submitForm() {
  // 提交前重新校验所有字段，确保全局状态准确
  pageIsValid = true;
  validateFirstName();
  validateLastName();
  validateEmailAddress();
  validatePhoneNumber();

  if (pageIsValid) {
    document.getElementById('respMsgText').innerHTML = '';
    document.getElementById('respMsgAlert').classList.add('visually-hidden');
    document.formOne.submit();
  } else {
    document.getElementById('respMsgText').innerHTML = '表单验证未通过，请修正错误后提交。';
    document.getElementById('respMsgAlert').classList.remove('visually-hidden');
  }
}

/**
 * Clear validation for name
 */
function clearFirstNameValidation() {
  document.getElementById('firstNameValidation').innerHTML = '';
}

/**
 * Validate the name provided
 */
function validateFirstName() {
  let firstName = document.getElementById('firstName').value;
  if (firstName.length === 0) {
    document.getElementById('firstNameValidation').innerHTML = '名字为必填项！';
    pageIsValid = false;
  } else if (firstName.length > NAME_MAX_LENGTH) {
    document.getElementById('firstNameValidation').innerHTML = `名字长度不能超过${NAME_MAX_LENGTH}个字符！`;
    pageIsValid = false;
  }
}

/**
 * Clear validation for last name
 */
function clearLastNameValidation() {
  document.getElementById('lastNameValidation').innerHTML = '';
}

/**
 * Validate the last name provided
 */
function validateLastName() {
  let lastName = document.getElementById('lastName').value;
  if (lastName.length === 0) {
    document.getElementById('lastNameValidation').innerHTML = '姓氏为必填项！';
    pageIsValid = false;
  } else if (lastName.length > NAME_MAX_LENGTH) {
    document.getElementById('lastNameValidation').innerHTML = `姓氏长度不能超过${NAME_MAX_LENGTH}个字符！`;
    pageIsValid = false;
  }
}

/**
 * Clear validation for email
 */
function clearEmailAddressValidation() {
  document.getElementById('emailAddressValidation').innerHTML = '';
}

/**
 * Validate the email provided
 */
function validateEmailAddress() {
  let emailAddress = document.getElementById('emailAddress').value;
  const emailRegex = /^\S+@\S+\.\S+$/;
  if (emailAddress.length === 0) {
    document.getElementById('emailAddressValidation').innerHTML = '邮箱地址为必填项！';
    pageIsValid = false;
  } else if (emailAddress.length > EMAIL_MAX_LENGTH) {
    document.getElementById('emailAddressValidation').innerHTML = `邮箱地址长度不能超过${EMAIL_MAX_LENGTH}个字符！`;
    pageIsValid = false;
  } else if (!emailRegex.test(emailAddress)) {
    document.getElementById('emailAddressValidation').innerHTML = '请输入有效的邮箱地址！';
    pageIsValid = false;
  }
}

/**
 * Clear validation for phone number
 */
function clearPhoneNumberValidation() {
  document.getElementById('phoneNumberValidation').innerHTML = '';
}

/**
 * Validate the phone number provided
 */
function validatePhoneNumber() {
  let phoneNumber = document.getElementById('phoneNumber').value;
  const phoneRegex = /^\d{10}$/;
  if (phoneNumber.length === 0) {
    document.getElementById('phoneNumberValidation').innerHTML = '电话号码为必填项！';
    pageIsValid = false;
  } else if (phoneNumber.length > PHONE_MAX_LENGTH) {
    document.getElementById('phoneNumberValidation').innerHTML = `电话号码长度不能超过${PHONE_MAX_LENGTH}位！`;
    pageIsValid = false;
  } else if (!phoneRegex.test(phoneNumber)) {
    document.getElementById('phoneNumberValidation').innerHTML = '请输入有效的10位电话号码！';
    pageIsValid = false;
  }
}

额外优化说明 #

原代码中pageIsValid的逻辑存在缺陷：单个字段校验通过时会直接覆盖全局状态为true，忽略其他字段的错误。修复后调整为：提交前默认设为true，只要有一个字段验证不通过就改为false，确保全局状态能准确反映整个表单的验证结果。

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