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
  // 校验逻辑集合。[校验错误的提示信息，返回true的函数]
  const validList = [
    ['name字段不能为空!', () => name],
    ['age字段值不能大于19!', () => age <= 19],
    ['name字段长度大于4时,age字段不能小于10!', () => name.length <= 4 || (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 = 'abcde'
submit() // 提示：age字段值不能大于19

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

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

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