大家在做一些表单验证的时候,有许多必填项,前端需要验证.
这时候用if和else去判断话是很普遍的验证方法了.但是,如果需要验证的内容比较多的话.
就会导致代码很繁琐,给人看起来也很em......,有点难受.
我也是一直用if去判断验证,然后return false的,被老大说了一顿,这样写代码太low了.所以自己就封装一下验证方法.放出来加深一下自己的印象,大家感兴趣的也可以看下
1. 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
}
}
2. 数组验证.
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('验证通过!')
}
}
3. 总结一下
把判断和提示语,作为入参放到一个函数里面,通过验证就返回ture,如果未通过就返回false,
在用数组的includes方法去查找有没有false这个属性,如果有一个或多个false,就是未通过,取反一下就是通过的情况
然后就可以提交你的表单了.