关于上一节课的作业
来源: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
012023-09-02
相似问题