vue element-ui使用required進(jìn)行表單校驗(yàn)時(shí)自定義提示語問題
element-ui使用required表單校驗(yàn)時(shí)自定義提示語
如果我們直接在html里面使用required時(shí)
當(dāng)我們?cè)谳斎肟蜉斎胍恍?shù)據(jù)，然后使用backspace逐個(gè)刪掉，刪完的時(shí)候就又會(huì)出現(xiàn)
即使我們已經(jīng)添加了rules驗(yàn)證
此時(shí)我們需要進(jìn)行如下修改
首先把HTML里面的required刪掉，然后在js的rules驗(yàn)證里添加
即可修改驗(yàn)證
element-ui表單項(xiàng)自定義校驗(yàn)設(shè)置必填項(xiàng)required
使用elementUI的表單校驗(yàn)有時(shí)需要用到默認(rèn)校驗(yàn)和自定義校驗(yàn)的組合規(guī)則，比如下面這種部分表單項(xiàng)需要根據(jù)其他非input內(nèi)容是否為空進(jìn)行校驗(yàn)。
后兩項(xiàng)內(nèi)容設(shè)為空，點(diǎn)擊確定進(jìn)行表單校驗(yàn)，此時(shí)提示正常沒有問題
而當(dāng)內(nèi)容不為空時(shí)，下方卻出現(xiàn)了xxx is required的提示。
經(jīng)過排查，發(fā)現(xiàn)是el-form-item中的required屬性引起的，說明自定義校驗(yàn)規(guī)則和required屬性不能同時(shí)出現(xiàn)，否則兩種校驗(yàn)都會(huì)生效，而最后這兩個(gè)表單項(xiàng)并沒有input框，設(shè)置required屬性就會(huì)判定內(nèi)容為空，就會(huì)提示xxx is required。
那么如何在使用自定義規(guī)則的同時(shí)又顯示必填項(xiàng)的*號(hào)呢？
只需把class設(shè)置為is-required即可。
此時(shí)內(nèi)容不為空時(shí)提交就能正常校驗(yàn)了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js 2.0窺探之Virtual DOM到底是什么？
大家可能聽說Vue.js 2.0已經(jīng)發(fā)布，并且在其中新添加如了一些新功能。其中一個(gè)功能就是“Virtual DOM”。那么下面這篇文章就來給大家詳細(xì)介紹Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
Vue中@click.stop和@click.prevent實(shí)例詳解
當(dāng)我們使用Vue.js開發(fā)前端應(yīng)用時(shí),經(jīng)常會(huì)在模版中使用@click指令來響應(yīng)用戶的點(diǎn)擊事件,這篇文章主要給大家介紹了關(guān)于Vue中@click.stop和@click.prevent的相關(guān)資料,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue3.x最小原型系統(tǒng)講解。既然用Vue3.0構(gòu)建最小原型系統(tǒng)，那么肯定要用尤大的最新構(gòu)建工具Vite來進(jìn)行項(xiàng)目的初始化，下文舉例說明,需要的朋友可以參考一下2022-02-02
這篇文章主要為大家介紹了vscode添加vue模板步驟示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
多人協(xié)作模式下，修改代理比較麻煩，而且很容易某個(gè)開發(fā)人員會(huì)修改了vue.config.js文件后提交了。接下來通過本文給大家分享Vue多環(huán)境代理配置方法思路詳解,需要的朋友可以參考下2019-06-06
vue-cli中設(shè)置publicPath的幾種方式對(duì)比
這篇文章主要介紹了vue-cli中設(shè)置publicPath的幾種方式對(duì)比，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
深入淺析Vue中mixin和extend的區(qū)別和使用場(chǎng)景
Vue中有兩個(gè)較為高級(jí)的靜態(tài)方法mixin和extend，接下來給大家介紹Vue中mixin和extend的區(qū)別和使用場(chǎng)景，感興趣的朋友一起看看吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了Vue父組件如何獲取子組件中的變量，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue.js watch經(jīng)常失效的場(chǎng)景與解決方案
這篇文章主要給大家介紹了關(guān)于vue.js watch經(jīng)常失效的場(chǎng)景與解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue過渡效果之CSS過渡詳解(結(jié)合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果。本文將從CSS過渡transition、CSS動(dòng)畫animation及配合使用第三方CSS動(dòng)畫庫(kù)(如animate.css)這三方面來詳細(xì)介紹Vue過渡效果之CSS過渡2020-02-02