鍍金池/ 問答/HTML/ iview表單中,如何取消對 disabled的控件的驗證?

iview表單中,如何取消對 disabled的控件的驗證?

根據(jù)控件是否禁用,開啟或者關閉該控件的必須項檢查。圖片描述

   <Form-Item prop="link_address" :show-message="!disableLinkAddress" label="鏈接地址">
        <i-Input :disabled="disableLinkAddress" placeholder="Enter something..." v-model="formModel.link_address" ></i-Input>
    </Form-Item>    
    <Form-Item prop="menu_name" label="菜單名稱">
        <i-Input type="text" placeholder="Username" v-model="formModel.menu_name">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
        </i-Input>
    </Form-Item>

disableLinkAddresstrue時,不對鏈接地址這個控件做檢查
disableLinkAddressfalse時,對鏈接地址這個控件做檢查



    formRules: {
                menu_name: [{required: true, trigger: 'blur'}],
                link_address: [{required: true, message: '鏈接地址不能為空', trigger: 'blur'}]}


    watch: {
        'formModel.parent_menu_seq': function (newValue, oldValue) {
            var self = this;
            if (newValue == 0) {
                self.disableLinkAddress = true;
                self.formRules['link_address'].pop()
            } else {
                self.disableLinkAddress = false;
                self.$nextTick(function () {
                    self.formRules['link_address'].push({required: true, message: '鏈接地址不能為空', trigger: 'blur'})
                })
            }
        }
    },

我目前的做法是

    watch: {
        disableLinkAddress: function (newValue, oldValue) {
            var self = this;
            if (newValue) {
                self.formRules['link_address'] = [{required: false, trigger: 'blur'}]

            } else {
                self.formRules['link_address'] = [{required: true, message: '鏈接地址不能為空', trigger: 'blur'}]

            }
        }
    },

但是這樣做有個問題,trigger: 'blur'失效了,焦點離開控件后,validate不能自動觸發(fā)了。
請教解決思路和方法。

回答
編輯回答
寫榮

我的做法是自定義validator,如果檢測到你這里的是‘disableLinkAddress’為true,就直接callback();否則才進行校驗;

2017年8月27日 16:54