Vue-表单校验

1.新建xxx.js

　　定义策略对象和策略类

/*策略对象*/
const strategies = {
    // 是否为空
    isNonEmpty(value, errorMsg) {
        return value === '' ? errorMsg : void 0;
    },
    // 最小长度
    minLength(value, length, errorMsg) {
        return value.length < length ? errorMsg : void 0;
    },
    // 是否手机号
    isMoblie(value, errorMsg) {
        return !/^1(3|4|5|6|7|8|9)[0-9]{9}$/.test(value) ? errorMsg : void 0;
    }
};
// 策略类
class Validator {
    constructor() {
        this.cache = [];
    }
    add(iptVal, rules) {
        for (const rule of rules) {
            let strategyAry = rule.strategy.split(':');
            let errorMsg = rule.errorMsg;
            this.cache.push(() => {
                let strategy = strategyAry.shift();
                strategyAry.unshift(iptVal);
                strategyAry.push(errorMsg);
                return strategies[strategy].apply(iptVal, strategyAry);
            });
        }
    }
    start() {
        for (let validatorFunc of this.cache) {
            let errorMsg = validatorFunc(); //开始校验
            if (errorMsg) {
                return errorMsg;
            }
        }
    }
}

export default Validator;

2.在组件中引入

　　import Validator from './xxx.js';

3.使用

　　a.组件内定义表单验证方法

　　　　   validatorFunc() {
            let validator = new Validator();
            validator.add(this.reportData.phone, [
                {
                    strategy: 'isNonEmpty',
                    errorMsg: '手机号不能为空'
                },
                {
                    strategy: 'isMoblie',
                    errorMsg: '号码格式错误'
                }
            ]);
            validator.add(this.reportData.name, [
                {
                    strategy: 'isNonEmpty',
                    errorMsg: '未填写姓名'
                }
            ]);
            validator.add(this.reportData.code, [
                {
                    strategy: 'isNonEmpty',
                    errorMsg: '未填写验证码'
                }
            ]);
            let errorMsg = validator.start();
            return errorMsg;
        },

　　b.在提交表单时调用此方法

　　　　　　const errorMsg = this.validatorFunc();
            if (errorMsg) {
                this.$toast(errorMsg);
                return;
            } else {
                this.$ajax();
            }