資訊專欄INFORMATION COLUMN
摘要：需求默認(rèn)都是必選下拉選擇的時候選擇必填，活動名稱為必填，需要校驗和顯示選擇非必填，活動名稱不做校驗，隱藏初始校驗規(guī)則經(jīng)測試，網(wǎng)上其他的方式都沒有實現(xiàn)需求，動態(tài)切換中的沒有作用因為按照以下的寫法的話，在組件初始化后校驗規(guī)則就定型了，切換也沒
? 需求
默認(rèn)都是必選
下拉選擇的時候
選擇必填，活動名稱為必填，需要校驗和顯示*
選擇非必填，活動名稱不做校驗，隱藏*
? 初始校驗規(guī)則經(jīng)測試，網(wǎng)上其他的方式都沒有實現(xiàn)需求，動態(tài)切換rules中的required沒有作用
因為按照以下的寫法的話，element-ui在組件初始化后校驗規(guī)則就定型了，切換也沒用
rules: {
name: [
{ required: true, message: "請輸入名稱", trigger: "blur" }
],
region: [
{ required: true, message: "請選擇類型", trigger: "blur" }
]
}
? 解決方案
第一步：
去除rules中需要動態(tài)校驗的字段規(guī)則
去除name
rules: {
region: [
{ required: true, message: "請選擇類型", trigger: "blur" }
]
}
第二步：
在字段為name的form-item上，添加required屬性
下面代碼isHaveTo為新字段，根據(jù)下拉框選擇的值來決定是為true還是false
第三步：
計算屬性，新增字段isHaveTo
下拉選擇框非必須是為1，其他都是必填，包括默認(rèn)
computed: {
isHaveTo: function() {
return this.ruleForm.region === `0`;
}
},
效果如圖：
下拉切換，*號顯隱，提交時也有不同規(guī)則
注意，新的問題來了
在選擇必填時，沒有了之前的錯誤提示文字，而是element自帶的提示
第四步：
設(shè)置錯誤提示
使用自定義函數(shù)控制流程
把name字段重新加回去rules
注意是函數(shù){ validator: validateName }
rules: {
name: [{ validator: validateName }],
region: [
{ required: true, message: "請選擇類型", trigger: "blur" }
]
}
然后設(shè)置函數(shù)validateName
可以看到，必填時按照我們設(shè)置的提示語提示，非必填時，校驗通過
貼上代碼
data() {
// 驗證活動名稱的函數(shù)
let validateName = (rule, value, callback) => {
// 當(dāng)活動名稱為空值且為必填時，拋出錯誤，反之通過校驗
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
核心代碼參考如下：
立即創(chuàng)建
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104741.html
摘要：主要是為了避免用戶修改了手機日歷之后，獲取的本地與服務(wù)器時間不統(tǒng)一可以通過獲取服務(wù)器時間進行手動設(shè)置。日歷控件更新之后哦調(diào)用只有在調(diào)用了的時候才會被觸發(fā)非必填。對于設(shè)備已經(jīng)通過阻止冒泡事件進行控制不需要再做控制。 原文鏈接 使用 引入文件: ./build/css/iantooweek.css ./build/js/iantooweek.js 并在頁面上調(diào)用: iantoo.week(...
摘要：創(chuàng)建詳解通過上面的快速創(chuàng)建我們接下來將通過上面的例子來進行創(chuàng)建操作中的詳細設(shè)置說明。高階設(shè)置高階設(shè)置中將針對容器進行詳細的參數(shù)設(shè)置。掛載路徑卷名稱注意如沒有創(chuàng)建卷設(shè)置，在掛載卷中將選擇不到具體的卷名稱，請先創(chuàng)建卷設(shè)置?？焖賱?chuàng)建快速創(chuàng)建Cube實例點擊Cube的創(chuàng)建按鈕進入創(chuàng)建頁面，為你的容器組起一個名字；選擇一個倉庫內(nèi)的鏡像，這里快速創(chuàng)建我選擇的UCloud鏡像倉庫nginx鏡像1.17.1...
摘要：模塊最終使用方法進行查找并自動添加為查找。百分比文字樣式非必填默認(rèn)。百分比文字大小會通過的值自動計算百分?jǐn)?shù)的數(shù)字并添加百分號。百分比文字現(xiàn)實的顏色。 原文鏈接 使用 引入文件: ./build/js/iantooPercent.js 并在頁面執(zhí)行 iantoo.percent({ el:iantooPercent }) 既可正常顯示如下show...
閱讀 1720·2023-04-25 18:19
閱讀 2148·2021-10-26 09:48
閱讀 1207·2021-10-09 09:44
閱讀 1815·2021-09-09 11:35
閱讀 3097·2019-08-30 15:54
閱讀 2130·2019-08-30 11:26
閱讀 2346·2019-08-29 17:06
閱讀 966·2019-08-29 16:38
