当所有字段都被填写后，启用提交按钮

问题描述：

Vue 项目中，表单的提交按钮默认为禁用状态，当所有字段都填写之后，启用提交按钮

部分表单可以允许某些字段为空

 

分析原因：

可以通过 for-in 语句校验 formdata，然后用 v-bind 给 disabled 属性绑定校验函数

这个校验函数可以绑定在 Vue 的原型链上，这样能直接在 template 中使用

或者写在第三方 js 中作为一个工具函数，然后在组件内引入这个 js，并在组件的 data 中定义

import Util from '@/common/util'

data () {
    return {
        Util: Util
    }
}

 

 

解决方案：

/**
 * 判断一个对象是否所有属性都有值
 * @param {Object} form 目标对象
 * @param {Array} except 排除该数组中的属性名
 * @returns {Boolean}
 */

Vue.prototype.$isFormReady = function (form, except) {
    for (let i in form) {
        if (except && except.indexOf(i) !== -1) continue
        if (!form[i]) return true
    }
    return false
}

<button @click="handleClick"
        :disabled="$isFormReady(formData, ['remark'])">
</button>