关于表单验证函数

来源:5-3 ValidateInput 第二部分 —抽象验证规则

SunShinne

2022-11-19

const validateInput = () => {
      if (props.rules) {
        const allPassed = props.rules.every(rule => {
          let passed = true
          inputRef.message = rule.message
          switch (rule.type) {
            case 'required':
              passed = (inputRef.val.trim() !== '')
              break
            case 'email':
              passed = emailReg.test(inputRef.val)
              break
            case 'custom':
              passed = rule.validator ? rule.validator() : true
              break
            default:
              break
          }
          return passed
        })
        inputRef.error = !allPassed
        return allPassed
      }
      return true
    }

老师这个函数会遍历传入的rule数组的所有type值,那会不会造成一个表单项被多个验证规则验证,比如有一个用户名和邮箱的表单,执行以上函数会不会让用户名也一定要满足邮箱的格式呢?

写回答

1回答

张轩

2022-11-20

同学你好

这就是我们使用 every 的原因,every 这个方法,只要有一个返回的是 false,那么就立马停止循环并且退出了,这样就不会造成多个 rule 被重复检索的问题了。

0
1
SunShinne
哦老师就是说对于表单的每一项都单独传入验证规则,而不是表单所有项共用一套规则是吗?
2022-11-20
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程