码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-08-16 13:41:49      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:无法   lse   启用   led   应该   通过   原因   click   不能   

问题描述:

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

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

 

分析原因:

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

但校验函数不能写在第三方 js 中,而应该绑定在 Vue 的原型链上,不然无法在 template 部分使用

 

解决方案:

/**
 * 判断一个对象是否所有属性都有值
 * @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>

 

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

标签:无法   lse   启用   led   应该   通过   原因   click   不能   

原文地址:https://www.cnblogs.com/wisewrong/p/9486256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!