无心之举打造常用表单验证函数

2023-09-11 08:22:51

我们经常遇到表单验证的开发需求，网上也有各种各样的验证插件可以使用。但有时我们想实现简单的验证，不需要引入第三方库，这时就可以自己写一个简单的验证函数。随着验证需求的多样化，函数也会变得越来越大，最后就成了一个完整的验证框架。

1. 基本原理
表单验证函数的基本原理很简单，它通过检查表单元素的值是否符合一定的规则来判断是否通过验证。这些规则可以是简单的类型检查，也可以是复杂的正则表达式。

2. 实现步骤

定义一个函数，函数名可以叫做validateForm()。
在函数中，首先获取表单元素的值，可以通过document.getElementById()或document.querySelector()方法。
然后根据不同的表单元素类型，设置不同的验证规则。例如，对于文本输入框，可以设置不能为空、必须是数字、必须是邮箱地址等规则。
对于每个表单元素，使用if语句或switch语句来检查其值是否符合相应的验证规则。
如果某个表单元素的值不符合验证规则，则在页面上显示错误信息，并返回false。
如果所有表单元素的值都符合验证规则，则返回true。

3. 使用示例

<form id="myForm">
  <input type="text" id="name" placeholder="姓名">
  <input type="email" id="email" placeholder="邮箱">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

function validateForm() {
  // 获取表单元素
  const name = document.getElementById('name');
  const email = document.getElementById('email');
  const password = document.getElementById('password');

  // 设置验证规则
  const rules = {
    name: {
      required: true,
      minLength: 2,
      maxLength: 10
    },
    email: {
      required: true,
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    },
    password: {
      required: true,
      minLength: 8,
      maxLength: 16
    }
  };

  // 检查表单元素的值是否符合验证规则
  for (const field in rules) {
    const element = document.getElementById(field);
    const value = element.value;
    const rule = rules[field];

    if (rule.required && value === '') {
      alert(`${field}不能为空`);
      return false;
    }

    if (rule.minLength && value.length < rule.minLength) {
      alert(`${field}不能少于${rule.minLength}个字符`);
      return false;
    }

    if (rule.maxLength && value.length > rule.maxLength) {
      alert(`${field}不能超过${rule.maxLength}个字符`);
      return false;
    }

    if (rule.pattern && !value.match(rule.pattern)) {
      alert(`${field}格式不正确`);
      return false;
    }
  }

  return true;
}

// 添加提交事件监听器
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();

  if (validateForm()) {
    // 表单验证通过，提交表单
    alert('表单提交成功');
  }
});