代替if else 的表单验证方法!
大家在做一些表单验证的时候,有许多必填项,前端需要验证.
这时候用if和else去判断话是很普遍的验证方法了.但是,如果需要验证的内容比较多的话.
就会导致代码很繁琐,给人看起来也很em......,有点难受.
我也是一直用if去判断验证,然后return false的,被老大说了一顿,这样写代码太low了.所以自己就封装一下验证方法.放出来加深一下自己的印象,大家感兴趣的也可以看下
if-else验证表单必填项!
saveForm() {
const validate = this.submitForm.studentApplicantDetailVOList[0];
if (validate.tripType == '') {
Toast('请选择用车类型!')
return
}
if (validate.departTime == '') {
Toast('请选择发车时间!')
return
}
if (validate.reverseTime == '') {
Toast('请选择返车时间!')
return
}
if (validate.departSite == '') {
Toast('请选择发车地点!')
return
}
if (validate.noviciateHospital == '') {
Toast('请选择见习医院!')
return
}
if (validate.peopleQty == '') {
Toast('请输入人数!')
return
}
if (validate.vehicleQty == '') {
Toast('请输入车辆!')
return
}
}
方法一
validateFn(value, msg) {
if (!value) {
Toast(msg)
return false
} else {
return true
}
}
saveForm() {
const validate = this.submitForm.studentApplicantDetailVOList[0];
const validateArray = [
this.validateFn(validate.vehicleQty, '请输入车辆!'),
this.validateFn(validate.peopleQty, '请输入人数!'),
this.validateFn(validate.noviciateHospital, '请选择见习医院!'),
this.validateFn(validate.departSite, '请选择发车地点!'),
this.validateFn(validate.reverseTime, '请选择返车时间!'),
this.validateFn(validate.departTime, '请选择发车时间!'),
this.validateFn(validate.tripType, '请选择用车类型!'),
]
if (!validateArray.includes(false)) {
console.log('验证通过!')
}
}
方法二
validateFn() {
const validteArrary = [
{ validateItem: this.form.job.name, errMsg: '任务名称必填', ref: 'jobNameInput' },
{ validateItem: this.form.reader.dbName, errMsg: '源表库名必填', ref: 'readerDbSelect' },
{ validateItem: this.form.reader.table, errMsg: '源表必填', ref: 'readerTableInput' },
{ validateItem: this.form.reader.primaryKey, errMsg: '主键必填', ref: 'readerPrimaryKeyInput' },
];
let validate = true;
// eslint-disable-next-line no-plusplus
for (let i = 0, len = validteArrary.length; i < len; i++) {
if (!validate) {
break;
}
const item = validteArrary[i];
if (!item.validateItem) {
this.$message.warning(item.errMsg);
// eslint-disable-next-line no-unused-expressions
this.$refs[item.ref] && this.$refs[item.ref].focus();
validate = false;
}
}
return validate;
},
