如何实现Angular注册表单的自定义校验及错误提示？

一、HTML结构（适配错误提示容器） #

确保每个输入框下方对应指定的错误提示容器，示例结构如下：

<form id="registerForm">
  <div>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <div id="na" class="error-message"></div>
  </div>
  <div>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
    <div id="em" class="error-message"></div>
  </div>
  <div>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    <div id="pw" class="error-message"></div>
  </div>
  <button type="submit">注册</button>
</form>

二、TypeScript校验逻辑实现 #

通过监听表单提交事件，先执行校验拦截非法提交，具体代码如下：

// 获取表单及输入元素
const form = document.getElementById('registerForm') as HTMLFormElement;
const nameInput = document.getElementById('name') as HTMLInputElement;
const emailInput = document.getElementById('email') as HTMLInputElement;
const passwordInput = document.getElementById('password') as HTMLInputElement;

// 获取错误提示容器
const nameError = document.getElementById('na') as HTMLDivElement;
const emailError = document.getElementById('em') as HTMLDivElement;
const passwordError = document.getElementById('pw') as HTMLDivElement;

// 姓名校验：必填+仅字母
const validateName = (value: string): string => {
  if (!value.trim()) return '姓名为必填项';
  if (!/^[A-Za-z]+$/.test(value)) return '姓名仅可包含字母';
  return '';
};

// 邮箱校验：必填+合法格式
const validateEmail = (value: string): string => {
  if (!value.trim()) return '邮箱为必填项';
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return '请输入合法的邮箱格式';
  return '';
};

// 密码校验：必填+8位以上+包含大小写字母和数字
const validatePassword = (value: string): string => {
  if (!value.trim()) return '密码为必填项';
  if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(value)) {
    return '密码至少8位，需包含1个大写字母、1个小写字母和1个数字';
  }
  return '';
};

// 表单提交处理
form.addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止默认提交，避免非法数据进入数据库

  // 清除历史错误提示
  nameError.textContent = '';
  emailError.textContent = '';
  passwordError.textContent = '';

  // 获取输入值
  const nameVal = nameInput.value;
  const emailVal = emailInput.value;
  const passwordVal = passwordInput.value;

  // 执行校验
  const nameErr = validateName(nameVal);
  const emailErr = validateEmail(emailVal);
  const passwordErr = validatePassword(passwordVal);

  // 渲染错误提示到对应容器
  if (nameErr) nameError.textContent = nameErr;
  if (emailErr) emailError.textContent = emailErr;
  if (passwordErr) passwordError.textContent = passwordErr;

  // 所有校验通过后，执行数据库提交逻辑
  if (!nameErr && !emailErr && !passwordErr) {
    // 此处替换为你的数据库提交代码（如fetch/axios请求）
    console.log('校验通过，提交注册数据');
    // 如需原生表单提交，可取消注释：form.submit();
  }
});

三、错误提示样式优化（可选） #

添加CSS让错误提示更醒目：

.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

核心注意点 #

1. 必须调用e.preventDefault()阻止表单默认提交行为，否则校验不通过时数据仍会被提交到数据库
2. 校验前清除历史错误提示，避免残留旧提示干扰用户
3. 仅当所有校验项都通过时，才执行数据库提交操作

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