代替if else 的表单验证方法!

大家在做一些表单验证的时候,有许多必填项,前端需要验证.

这时候用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,就是未通过,取反一下就是通过的情况
然后就可以提交你的表单了.

ps: 别喷我,以前我没得选,现在我想做个好人!大家如果有更好的方法,可以说一下哈,交流交流.哦~哈哈哈哈.

转载于:https://www.cnblogs.com/niluiquhz/p/10700733.html