关于上一节课的作业

来源:5-7 ValidateForm 组件需求分析

慕粉3178367

2023-08-30

我这里需要判断min和max同时存在的情况,感觉有点臃肿了。不知道老师有没有优化空间?

// 这里是类型定义
interface RangeProp {
  length: number,
  message: string
}
interface RuleProp {
  type: 'required' | 'email' | 'range',
  message?: string,
  min?: RangeProp,
  max?: RangeProp
}
// 逻辑抽离出去一个方法
const vaidateRange = (min: RangeProp | undefined, max: RangeProp | undefined) => {
  let rangePassed = true
  if (min && !max) {
    inputRef.message = min.message
    rangePassed = !(inputRef.val.length < length)
  } else if (max && !min) {
    inputRef.message = max.message
    rangePassed = !(inputRef.val.length > length)
  } else if (max && min) {
    if (inputRef.val.length < min.length) {
      inputRef.message = min.message
      rangePassed = false
    }
    if (inputRef.val.length > max.length) {
      inputRef.message = max.message
      rangePassed = false
    }
  }
  return rangePassed
}
// 最后在case里面添加判断
case 'range':
  passed = vaidateRange(rule.min, rule.max)
  break
// 使用
{ 
	type: 'range', 
	min: { message: '密码不能小于6个字符', length: 6 }, 
	max: { message: '密码不能大于12个字符', length: 12 } 
}
写回答

1回答

张轩

2023-08-31

同学你好

看看我写的是不是简单点?下面链接看下,你这逻辑感觉有重复。

https://git.imooc.com/coding-449/zheye/src/develop/src/components/ValidateInput.vue#L79

0
1
慕粉3178367
明白了,我之前也尝试过这种解决方案,不过是判断正确的情况。所以会有问题,像您这种判断错误的情况确实可以实现。谢谢
2023-09-02
共1条回复

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

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

3142 学习 · 2313 问题

查看课程