zoukankan      html  css  js  c++  java
  • 当所有字段都被填写后,启用提交按钮

    问题描述:

    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>
  • 相关阅读:
    someThink
    快捷键
    typedef 的本质
    读取配置文件
    stl file
    摘自CSDNhttp://blog.csdn.net/gnuhpc/archive/2009/11/13/4808405.aspx
    thread demo
    B/S和C/S区别 java程序员
    上传文件 java程序员
    (八)VS的操作和使用技巧 java程序员
  • 原文地址:https://www.cnblogs.com/wisewrong/p/9486256.html
Copyright © 2011-2022 走看看