element-ui設置下拉選擇切換必填和非必填

junbaor 發布于2019-08-23 18:09 / 829人閱讀

摘要：需求默認都是必選下拉選擇的時候選擇必填，活動名稱為必填，需要校驗和顯示選擇非必填，活動名稱不做校驗，隱藏初始校驗規則經測試，網上其他的方式都沒有實現需求，動態切換中的沒有作用因為按照以下的寫法的話，在組件初始化后校驗規則就定型了，切換也沒

? 需求

默認都是必選

下拉選擇的時候

選擇必填，活動名稱為必填，需要校驗和顯示*

選擇非必填，活動名稱不做校驗，隱藏*

? 初始校驗規則

經測試，網上其他的方式都沒有實現需求，動態切換rules中的required沒有作用

因為按照以下的寫法的話，element-ui在組件初始化后校驗規則就定型了，切換也沒用

rules: {
    name: [
        { required: true, message: "請輸入名稱", trigger: "blur" }
    ],
    region: [
        { required: true, message: "請選擇類型", trigger: "blur" }
    ]
}

? 解決方案

第一步：

去除rules中需要動態校驗的字段規則

去除name

rules: {
    region: [
        { required: true, message: "請選擇類型", trigger: "blur" }
    ]
}

第二步：

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

下面代碼isHaveTo為新字段，根據下拉框選擇的值來決定是為true還是false

第三步：

計算屬性，新增字段isHaveTo

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

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

效果如圖：

下拉切換，*號顯隱，提交時也有不同規則

注意，新的問題來了

在選擇必填時，沒有了之前的錯誤提示文字，而是element自帶的提示

第四步：

設置錯誤提示

使用自定義函數控制流程

把name字段重新加回去rules

注意是函數{ validator: validateName }

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

然后設置函數validateName

可以看到，必填時按照我們設置的提示語提示，非必填時，校驗通過

貼上代碼

 data() {
     // 驗證活動名稱的函數
     let validateName = (rule, value, callback) => {
         // 當活動名稱為空值且為必填時，拋出錯誤，反之通過校驗
         if (this.ruleForm.name === "" && this.isHaveTo) {
             callback(new Error("請輸入活動名稱"));
         } else {
             callback();
         }
     };
     return {
         ruleForm: {
             name: "",
             region: ""
         },
         rules: {
             name: [{ validator: validateName }],
             region: [
                 { required: true, message: "請選擇類型", trigger: "blur" }
             ]
         }
     };
 },

? 完整demo代碼

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

核心代碼參考如下：

GPU云服務器云服務器 js驗證表單非必填項必填項必填 html必填

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104741.html

手機端簡潔日歷控件iantoo.week()

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

Wuv1Up 2019-08-26 12:09 評論0 收藏0
【容器實例 Cube】創建詳解：快速創建教程

摘要：創建詳解通過上面的快速創建我們接下來將通過上面的例子來進行創建操作中的詳細設置說明。高階設置高階設置中將針對容器進行詳細的參數設置。掛載路徑卷名稱注意如沒有創建卷設置，在掛載卷中將選擇不到具體的卷名稱，請先創建卷設置。快速創建快速創建Cube實例點擊Cube的創建按鈕進入創建頁面，為你的容器組起一個名字；選擇一個倉庫內的鏡像，這里快速創建我選擇的UCloud鏡像倉庫nginx鏡像1.17.1...

Tecode 2022-06-28 19:00 評論0 收藏0
環形百分比控件iantoo.percent()

摘要：模塊最終使用方法進行查找并自動添加為查找。百分比文字樣式非必填默認。百分比文字大小會通過的值自動計算百分數的數字并添加百分號。百分比文字現實的顏色。原文鏈接使用引入文件: ./build/js/iantooPercent.js 并在頁面執行 iantoo.percent({ el:iantooPercent }) 既可正常顯示如下show...

impig33 2019-08-26 12:09 評論0 收藏0