js 非常好用且优雅的步骤校验、提交校验、自定义校验写法

很多form表单和其它场景，在提交前或进入下一步前需要校验逻辑，这里总结了一个通用方法：

 

      const form = {
        name: '',
        age: 20,
        time: ['2100-01-01', '2100-01-01']
      }

      const validForm = () => {
        // 校验状态总结
        let valid = {
          status: true,
          message: ''
        }
        // 解构、重命名等操作
        const {
          name,
          age,
          time: [timeStart, timeEnd]
        } = form
        // 校验逻辑集合。
        const validList = [
          ['name字段不能为空!', () => name],
          ['age字段值不能大于19!', () => age <= 19],
          ['name字段长度大于4时,age字段不能小于等于10!', () => name.length > 4 && age > 10],
          [
            'age字段为19时,time字段的开始时间必须小于于当前时间,结束时间必须大于当前时间',
            () => {
              if (age === 19) {
                return +new Date(timeStart) < +new Date() && +new Date(timeEnd) > +new Date()
              } else {
                return true
              }
            }
          ]
        ]
        // 按数组顺序往下校验，遇到一个不成功就退出
        for (const list of validList) {
          if (!list[1]()) {
            valid.status = false
            valid.message = list[0]
            break
          }
        }
        if (!valid.status) alert(valid.message)
        return valid.status
      }

      // 提交函数
      const submit = () => {
        if (!validForm()) return false
        alert('提交成功')
      }

      submit() // 提示：name字段不能为空

      form.name = 'william'
      submit() // 提示：age字段值不能大于19

      form.age = 8
      submit() // 提示：name字段长度大于4时,age字段不能小于10

      form.age = 19
      submit() // 提示：age字段为19时,time字段的开始时间必须小于于当前时间,结束时间必须大于当前时间

      form.time = ['2018-01-01', '2100-01-01']
      submit() // 提交成功