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