如何用JavaScript实现一个支持自定义规则的表单验证库？

在前后端分离的项目里，表单验证如果只靠后端返回错误会显得交互迟钝。用JavaScript封装一个支持自定义规则的验证库，可以让我们在输入框失焦或提交时立即给出提示，并且不同项目只需复用同一套逻辑。

设计验证库的核心结构

一个基础的验证库需要解决三个问题：如何存放规则、如何对某个字段执行规则、如何收集错误信息。我们可以把规则放在一个对象里，通过字段名去匹配。

规则的定义方式

每条规则是一个返回布尔值或错误信息的函数，接收字段值作为参数。这样使用者就能随意扩展，比如手机号、密码强度等。

// 定义基础规则
const rules = {
  required: function(value) {
    return value !== undefined && value !== null && value.trim() !== '';
  },
  minLength: function(value, len) {
    return value.length >= len;
  }
};

// 自定义规则注册
function addRule(name, fn) {
  rules[name] = fn;
}
addRule('isEmail', function(value) {
  return /^[^s@]+@[^s@]+.[^s@]+$/.test(value);
});

字段与规则的绑定

我们用一个配置数组描述哪个字段用哪些规则，以及出错时的文案。

const fieldConfig = [
  { name: 'username', rules: [ { rule: 'required', msg: '用户名不能为空' } ] },
  { name: 'email', rules: [ { rule: 'required', msg: '邮箱不能为空' }, { rule: 'isEmail', msg: '邮箱格式不正确' } ] }
];

执行验证并输出结果

验证函数遍历配置，依次调用对应规则函数。如果规则接收额外参数，可以用数组形式写rule值。

function validate(data) {
  const errors = {};
  fieldConfig.forEach(function(item) {
    const val = data[item.name];
    item.rules.forEach(function(r) {
      const ruleName = Array.isArray(r.rule) ? r.rule[0] : r.rule;
      const args = Array.isArray(r.rule) ? r.rule.slice(1) : [];
      const fn = rules[ruleName];
      if (fn && !fn(val, ...args)) {
        errors[item.name] = r.msg;
      }
    });
  });
  return errors;
}

// 使用示例
const result = validate({ username: '', email: 'test@ipipp.com' });
console.log(result);

在页面中接入提示

拿到errors对象后，可以把对应信息写到<span>标签里。注意这里说的<span>是HTML标签名称，在正文描述中需要转义。

小结

以上代码展示了一个最小可用的验证库形态。实际开发中你还可以加入异步规则、联动校验等。核心思路就是rules对象可扩展，fieldConfig描述绑定关系，validate()函数统一调度。这样的结构清晰且容易维护。

JavaScript表单验证自定义规则修改时间：2026-07-29 10:09:28