vue.js 表单参数验证方法

vue.js 编写验证表单参数是否为空，为空返回null，否则返回表单参数值

一、util.js

var utils = {
    // 校验表单是否为空
    validate: function (data, except) {
        for (var item in data) {
            // 校验表单,except为排除项
            if (!this.contains(except, item)) {
                if (data[item].toString().trim() == '') return null;
            }
        }
        return data;
    },
    // 校验数组是否包含某元素
    contains: function (arr, obj) {
        var i = arr.length;
        while (i--) {
            if (arr[i] === obj) {
                return true;
            }
        }
        return false;
    },
    // 复制map
    copyMap: function (mapObj) {
        let newMap = {};
        for (var item in mapObj) {
            newMap[item] = mapObj[item];
        }
        return newMap;
    }
}

export default utils

二、index.js 引入

import util from './util';
Vue.prototype.$util = util;

三、页面使用

<script>
    export default {
        data: function () {
            return {
                dialog: {
                    show: false,
                    title: '',
                    data: {}
                }
            }
        },
        ready: function () {

        },
        methods: {
            save: function () {
                let dialogData = this.$util.copyMap(this.dialog.data);
                // 排除参数status,btnColor,btnTextColor的校验
                dialogData = this.$util.validate(dialogData, ['status', 'btnColor', 'btnTextColor'])
                if (dialogData) {
                        # do something
                    );
                } else {
                    this.$dispatch('alert', '信息不完整', '', 'danger');
                }
            },
        }
    }
</script>