vue 组长说我这样写的不好,脑子想不明白为啥?

segmentfault 2022-08-06 08:08:37 阅读数:497

vue不好脑子组长不明白

我们组长说我这样写的不对,让我想想怎么写更好,我这个脑子呀,想了半天没想明白。。。。因为这个是非必填项,所以我没有在rule来做,前辈们换你们的话会怎么写好?

onSaveComp() {
this.$refs.compForm.validate((valid) => {
if (valid) {
let params = {};
if (this.compForm.target != '' && !this.isURL(this.compForm.target)) {
this.$message.error('输入的跳转地址不正确!');
return false;
}
if (this.compForm.type == 'DATASOURCE') {
this.compForm.modes = this.compForm.modes.replace(/-/g, '').toUpperCase();
params = {
...this.compForm,
style: '',
};
} else {
params = {
appId: this.compForm.appId,
exts: '',
name: this.compForm.name,
nameEn: this.compForm.nameEn,
url: this.compForm.url,
type: 'IFRAME',
roleIds: this.compForm.roleIds,
status: this.compForm.status,
thumbnail: this.compForm.thumbnail,
target: this.compForm.target,
};
}
createComp(params).then(() => {
this.$message.success('创建成功');
parent.history.back();
// this.goBack();
});
}
});
},



采纳答案1:

“不对”是指写的位置不对?做法不对?代码不对?还是其他什么不对?

不清楚业务,也不清楚结构,所以只说说代码

isURL 有没有兼容 "" 的情况?如果有,那第 1 个条件就可省略。
另外,target 是否有可能是 undefined?如果有可能,要看 isURL 是否会处理,不会就需要加判断。不过我觉得 isURL 作为工作函数,目的就是减少代码量,应该充分考虑这些日常情况。

另外 if (valid) 贯穿了整个 Lambda,可以直接使用反向条件提前结束函数,减少缩进层次

captured-1.gif

下面 else 中对 params 的赋值也可以参考上面的 ...this.comForm,不用一个个去(前提是 comForm 中可能存在的多余属性不会产生副作用)

captured-2.gif



其他答案1:

“不对”是指写的位置不对?做法不对?代码不对?还是其他什么不对?

不清楚业务,也不清楚结构,所以只说说代码

isURL 有没有兼容 "" 的情况?如果有,那第 1 个条件就可省略。
另外,target 是否有可能是 undefined?如果有可能,要看 isURL 是否会处理,不会就需要加判断。不过我觉得 isURL 作为工作函数,目的就是减少代码量,应该充分考虑这些日常情况。

另外 if (valid) 贯穿了整个 Lambda,可以直接使用反向条件提前结束函数,减少缩进层次

captured-1.gif

下面 else 中对 params 的赋值也可以参考上面的 ...this.comForm,不用一个个去(前提是 comForm 中可能存在的多余属性不会产生副作用)

captured-2.gif


其他答案2:

其他答案3:

说不上不好,添加更多的验证就更好了

if(typeof this.comForm.target !== 'string'){
return false;
}
const target = this.comForm.target.trim()
if(target === ''){
return false;
}
if(!this.isURL(target)){
return false;
}

其他答案4:

this.compForm.target && !this.isURL(this.compForm.target)
或者
!this.isURL(this.compForm.target) + 在isURL方法里做判断


其他答案5:

可以通过动态调整rules中required属性来达到你所说的效果,required设置为false就OK了


其他答案6:

非必填的正则验证。这里是常用的URL验证,那么可以写成指令v-,或封装成方法,方便后面复用

PS:写在这里确实会影响代码美观


其他答案7:

应该是指让你按照element-ui的form最佳实践来吧,而不是验证后,再去验证。。。


其他答案8:

看见大家都好强啊,估计我是最懒的一个。我都是让后台配好json,一个接口表单规则就出来了。理由是用户可以自行配置表单。前后端分离最累的是前端,能用组件就用组件,减少自己打代码。

http://form-create.com/

image.png


其他答案9:

1、在el-form-item标签上写
<el-form-item prop="yearPriceRate"></el-form-item>
2、在rules中定义:
yearPriceRate: [

 {
validator: (rule, value, callback) => {
if (!value) {
return callback();
} else {
if (+value > 100) {
callback(new Error("比例不能超过100%"));
} else if (+value <= 0) {
callback(new Error("比例不能小于等于0"));
} else {
return callback();
}
}
},
trigger: "blur",
},
]

其他答案10:

表单的验证还是写在rule里,去掉必填属性,点击提交的时候可以调用表单的validateField方法只校验指定字段(prop)

// validateField
Function(props: array | string, callback: Function(errorMessage: string))
this.$refs.compForm.validateField(['name'], (errorMessage) => {
// 这样提交时只校验name字段了,其他字段不会校验
})
版权声明:本文为[segmentfault]所创,转载请带上原文链接,感谢。 https://segmentfault.com/q/1010000042270499