caimei365-www/src/main/resources/static/js/supplier-center/article/formMixin.js

"use strict";

var formMixin = {
    data: {
        validData: {},
        rules: {
            title: [{
                required: true,
                type: 'string',
                message: '请输入文章标题',
                trigger: 'blur'
            }],
            label: [{
                required: true,
                message: '请输入文章标签',
                trigger: ['blur', 'change']
            }],
            keyword: [{
                required: true,
                message: '请输入文章seo关键词',
                trigger: 'blur'
            }],
            publisher: [{
                required: true,
                message: '请输入发布人',
                trigger: 'blur'
            }],
            recommendContent: [{
                required: true,
                message: '请输入文章推荐语',
                trigger: 'blur'
            }],
            articleContent: [{
                required: true,
                message: '请输入文章内容',
                trigger: 'change'
            }],
            typeId: [{
                required: true,
                message: '请选择文章分类',
                trigger: 'change'
            }],
            guidanceImage: [{
                required: true,
                message: '请上传文章引导图',
                trigger: 'change'
            }],
            status: [{
                required: true,
                message: '请选择文章状态',
                trigger: 'change'
            }]
        }
    },
    mounted: function mounted() {
        //初始化表单验证
        this.initValidForm(this.formData);
    },
    created: function created() {
        //初始化验证关系对象
        this.initValidData();
    },
    methods: {
        //初始化验证关系对象
        initValidData: function initValidData() {
            for (var key in this.rules) {
                this.$set(this.validData, key, {
                    valid: true,
                    message: ''
                });
            }
        },
        //初始化表单验证
        initValidForm: function initValidForm(formData) {
            var _this = this;

            var that = this;

            var _loop = function _loop(key) {
                var rules = _this.rules[key];
                var input = document.querySelector(".form-item[prop=\"".concat(key, "\"] input"));
                var textarea = document.querySelector(".form-item[prop=\"".concat(key, "\"] textarea"));
                var trigger = rules[0].trigger.toString();

                if (trigger.indexOf('blur') > -1) {
                    if (input) {
                        input.addEventListener('blur', function () {
                            that.validInputHandle(formData, key, rules);
                        });
                    }

                    if (textarea) {
                        textarea.addEventListener('blur', function () {
                            that.validInputHandle(formData, key, rules);
                        });
                    }
                }

                if (trigger.indexOf('change') > -1) {
                    var str = 'formData.' + key;
                    that.$watch(str, function (newVal, oldVal) {
                        that.validInputHandle(formData, key, rules);
                    });
                }
            };

            for (var key in this.rules) {
                _loop(key);
            }
        },
        //数据校验
        validInputHandle: function validInputHandle(formData, key, rules) {
            var validData = {
                valid: true,
                message: ''
            };
            rules.forEach(function (rule, index) {
                if (!validData.valid) return; // 字符长度

                var len = formData[key].toString().trim().length; // 是否必填

                if (rule.required && !formData[key]) {
                    validData.valid = false;
                    validData.message = rule.message || '';
                } // 最大值最小值


                if (rule.maxLength && len < rule.minLength || rule.maxLength && len > rule.maxLength) {
                    validData.valid = false;
                    validData.message = rule.message || '';
                } // 自定义校验规则


                if (rule.pattern && !rule.pattern.test(formData[key])) {
                    validData.valid = false;
                    validData.message = rule.message || '';
                }
            });
            this.validData[key] = validData;
        },
        // 验证全部数据
        validAll: function validAll(formData) {
            for (var key in this.rules) {
                var rules = this.rules[key];
                this.validInputHandle(formData, key, rules);
            }

            for (var _key in this.validData) {
                // console.log(key, this.validData[key].valid);
                if (!this.validData[_key].valid) {
                    return Promise.reject(false);
                }
            }

            return Promise.resolve(true);
        }
    }
};