前端策略模式：react hooks 表单验证

react hooks 表单验证—策略模式

1.前置知识概述

• 策略模式的定义

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换，策略模式的目的就是将算法的使用与算法的实现分离开来，避免使用多重条件判断。
策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，Context 接受客户的请求，随后把请求委托给某一个策略类。

2.背景

• 在日常的需求开发中避免不了各种表单的校验，非空，长度，最大最小值等等，可能很多同学为了编写方便会通过多个if…else 来判断不同的校验逻辑。
• 比如现在提一个简单的需求，需要用户输入姓名、年龄、日期，姓名不能为空并且长度不能超过10，年龄不能为空，日期可以为空但不能超过当前时间。如果校验失败需要toast提示，（注：姓名如果校验失败需要将label标红）
• 在上述这样简单的场景下，方便起见可能就会这样处理，但是一般的校验都会伴随着各种响应，当逻辑复杂时，各种条件分支，校验和业务逻辑混杂在一起，就会非常难以维护，并且不同页面可能会有相同的校验逻辑无法进行抽离复用造成很多重复代码。

  const submit = () => {
   
    const {
   
      age,
      name,
      date
    } = formData;

    if (!name) {
   
      console.log('将label变为红色');
      return  toast('姓名不能为空');
    }

    if (name.length > 10) {
   
      console.log('将label变为红色');
      return  toast('姓名长度不能超过10');
    }
  
    if (!age) {
   
      return toast('年龄不能为空');
    }

    if (date) {
   
      const dateVal = new Date(date);
      const dateMax = new Date();

      if (dateVal > dateMax) {
   
        return toast('不能大于当前日期');
      }
    }
  }

3.校验器的功能

• 开始编码之前需要清楚的是，我们预期它有什么功能，知道需要什么才能去设计去开发。很多同学写程序没有思路就在于没有想好自己想要的功能，或者使用方式。

• 校验器的作用
  1.封装校验逻辑，相同场景可复用，并且职责单一，用来判断属性值是否合法。

• 需要实现的功能
  1.支持对属性添加单个规则，或者多个对规则
  2.支持对检测到的非法值执行相应的回调

• 使用方式：

// 对属性只加多个校验规则 对name的值进行校验 校验是否为空 长度是否超过10
validator.add(formDate.name, [
  {
   
    type: TYPES.isEmpty,
    rules: {
   
      errorMsg: '姓名不能为空',
      errCallBack: (errMsg) => {
   console.log(errMsg, '校验失败的回调 处理name的label变红色')}
    }
  },{
   
    type: TYPES.maxLength,
    rules: {
   
      errorMsg: '姓名长度不能超过10',
      maxlength: 10
    }
  }
]);

// 对属性值加单个校验规则 校验age是否为空
validator.add(formDate.age, [
  {
   
    type: TYPES.isEmpty,
    rules: {
   
      errorMsg: '年龄不能为空'
    }
  }
]);

// 开始校验
const errorMsg = validator.start();

// 判断是否通过校验
if