国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

element-ui設(shè)置下拉選擇切換必填和非必填

junbaor / 833人閱讀

摘要：需求默認(rèn)都是必選下拉選擇的時(shí)候選擇必填，活動(dòng)名稱為必填，需要校驗(yàn)和顯示選擇非必填，活動(dòng)名稱不做校驗(yàn)，隱藏初始校驗(yàn)規(guī)則經(jīng)測(cè)試，網(wǎng)上其他的方式都沒(méi)有實(shí)現(xiàn)需求，動(dòng)態(tài)切換中的沒(méi)有作用因?yàn)榘凑找韵碌膶?xiě)法的話，在組件初始化后校驗(yàn)規(guī)則就定型了，切換也沒(méi)

? 需求

默認(rèn)都是必選

下拉選擇的時(shí)候

選擇必填，活動(dòng)名稱為必填，需要校驗(yàn)和顯示*

選擇非必填，活動(dòng)名稱不做校驗(yàn)，隱藏*

? 初始校驗(yàn)規(guī)則

經(jīng)測(cè)試，網(wǎng)上其他的方式都沒(méi)有實(shí)現(xiàn)需求，動(dòng)態(tài)切換rules中的required沒(méi)有作用

因?yàn)榘凑找韵碌膶?xiě)法的話，element-ui在組件初始化后校驗(yàn)規(guī)則就定型了，切換也沒(méi)用

rules: {
    name: [
        { required: true, message: "請(qǐng)輸入名稱", trigger: "blur" }
    ],
    region: [
        { required: true, message: "請(qǐng)選擇類型", trigger: "blur" }
    ]
}
? 解決方案

第一步：

去除rules中需要?jiǎng)討B(tài)校驗(yàn)的字段規(guī)則

去除name

rules: {
    region: [
        { required: true, message: "請(qǐng)選擇類型", trigger: "blur" }
    ]
}

第二步：

在字段為name的form-item上，添加required屬性

下面代碼isHaveTo為新字段，根據(jù)下拉框選擇的值來(lái)決定是為true還是false

第三步：

計(jì)算屬性，新增字段isHaveTo

下拉選擇框非必須是為1，其他都是必填，包括默認(rèn)

computed: {
    isHaveTo: function() {
        return this.ruleForm.region === `0`;
    }
},

效果如圖：

下拉切換，*號(hào)顯隱，提交時(shí)也有不同規(guī)則

注意，新的問(wèn)題來(lái)了

在選擇必填時(shí)，沒(méi)有了之前的錯(cuò)誤提示文字，而是element自帶的提示

第四步：

設(shè)置錯(cuò)誤提示

使用自定義函數(shù)控制流程

把name字段重新加回去rules

注意是函數(shù){ validator: validateName }

rules: {
    name: [{ validator: validateName }],
    region: [
        { required: true, message: "請(qǐng)選擇類型", trigger: "blur" }
    ]
}

然后設(shè)置函數(shù)validateName

可以看到，必填時(shí)按照我們?cè)O(shè)置的提示語(yǔ)提示，非必填時(shí)，校驗(yàn)通過(guò)

貼上代碼

 data() {
     // 驗(yàn)證活動(dòng)名稱的函數(shù)
     let validateName = (rule, value, callback) => {
         // 當(dāng)活動(dòng)名稱為空值且為必填時(shí)，拋出錯(cuò)誤，反之通過(guò)校驗(yàn)
         if (this.ruleForm.name === "" && this.isHaveTo) {
             callback(new Error("請(qǐng)輸入活動(dòng)名稱"));
         } else {
             callback();
         }
     };
     return {
         ruleForm: {
             name: "",
             region: ""
         },
         rules: {
             name: [{ validator: validateName }],
             region: [
                 { required: true, message: "請(qǐng)選擇類型", trigger: "blur" }
             ]
         }
     };
 },
? 完整demo代碼

demo使用vue-cli，引入element-ui

核心代碼參考如下：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/104741.html

相關(guān)文章

  • 手機(jī)端簡(jiǎn)潔日歷控件iantoo.week()

    摘要：主要是為了避免用戶修改了手機(jī)日歷之后，獲取的本地與服務(wù)器時(shí)間不統(tǒng)一可以通過(guò)獲取服務(wù)器時(shí)間進(jìn)行手動(dòng)設(shè)置。日歷控件更新之后哦調(diào)用只有在調(diào)用了的時(shí)候才會(huì)被觸發(fā)非必填。對(duì)于設(shè)備已經(jīng)通過(guò)阻止冒泡事件進(jìn)行控制不需要再做控制。 原文鏈接 使用 引入文件: ./build/css/iantooweek.css ./build/js/iantooweek.js 并在頁(yè)面上調(diào)用: iantoo.week(...

    Wuv1Up 評(píng)論0 收藏0

  • 【容器實(shí)例 Cube】創(chuàng)建詳解：快速創(chuàng)建教程

    摘要：創(chuàng)建詳解通過(guò)上面的快速創(chuàng)建我們接下來(lái)將通過(guò)上面的例子來(lái)進(jìn)行創(chuàng)建操作中的詳細(xì)設(shè)置說(shuō)明。高階設(shè)置高階設(shè)置中將針對(duì)容器進(jìn)行詳細(xì)的參數(shù)設(shè)置。掛載路徑卷名稱注意如沒(méi)有創(chuàng)建卷設(shè)置，在掛載卷中將選擇不到具體的卷名稱，請(qǐng)先創(chuàng)建卷設(shè)置。快速創(chuàng)建快速創(chuàng)建Cube實(shí)例點(diǎn)擊Cube的創(chuàng)建按鈕進(jìn)入創(chuàng)建頁(yè)面，為你的容器組起一個(gè)名字；選擇一個(gè)倉(cāng)庫(kù)內(nèi)的鏡像，這里快速創(chuàng)建我選擇的UCloud鏡像倉(cāng)庫(kù)nginx鏡像1.17.1...

    Tecode 評(píng)論0 收藏0

  • 環(huán)形百分比控件iantoo.percent()

    摘要：模塊最終使用方法進(jìn)行查找并自動(dòng)添加為查找。百分比文字樣式非必填默認(rèn)。百分比文字大小會(huì)通過(guò)的值自動(dòng)計(jì)算百分?jǐn)?shù)的數(shù)字并添加百分號(hào)。百分比文字現(xiàn)實(shí)的顏色。 原文鏈接 使用 引入文件: ./build/js/iantooPercent.js 并在頁(yè)面執(zhí)行 iantoo.percent({ el:iantooPercent }) 既可正常顯示如下show...

    impig33 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<