el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容
應(yīng)用場(chǎng)景:
輸入框的校驗(yàn)太常見(jiàn)了,基本上常見(jiàn)的為:不能為空,不能輸入空格,和不能輸入全部為空的內(nèi)容。這里對(duì)這個(gè)進(jìn)行記錄。
詳細(xì)開發(fā):
針對(duì)三種情況進(jìn)行分別展示:
rules: {
ResearchNO: [
{ required: true, message: '請(qǐng)輸入項(xiàng)目代碼', trigger: 'blur' },
{
required: true,
transform: (value) => value && value.trim(),
message: '項(xiàng)目代碼不能全部為空',
trigger: 'blur'
}
],
Name: [
//輸入為空
{ required: true, message: '請(qǐng)輸入項(xiàng)目名稱', trigger: 'blur' },
{
min: 1,
max: 50,
message: '長(zhǎng)度在 1 到 50 個(gè)字符',
trigger: 'blur'
},
//不能全部輸入空格
{
required: true,
transform: (value) => value && value.trim(),
message: '項(xiàng)目名稱不能全部為空',
trigger: 'blur'
}
]
},不能輸入全部空格,主要是這里起作用:
{
required: true,
transform: (value) => value && value.trim(),
message: '項(xiàng)目名稱不能全部為空',
trigger: 'blur'
}
還有不能輸入空格:v-model后面加上trim
<el-form-item label="項(xiàng)目名稱" prop="Name">
<el-input v-model.trim="projectInfo.Name" placeholder="請(qǐng)輸入項(xiàng)目名稱"></el-input>
</el-form-item>附:el-input 首尾不能為空格的校驗(yàn)
我們?cè)谑褂?input 輸入框時(shí),大多不希望用戶在前后輸入空格,有沒(méi)有簡(jiǎn)單的校驗(yàn)方法呢,當(dāng)然是有的。
<el-form :rules="rules" :model="form" label-width="80px">
<el-form-item label="活動(dòng)名稱" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur'},
{ pattern: /^(?!\s+).*(?<!\s)$/, message: '首尾不能為空格', trigger: 'blur' }
]
}
}
}
}
</script>效果如下:

總結(jié)/分析:
以上是記錄。
到此這篇關(guān)于el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容的文章就介紹到這了,更多相關(guān)el-input輸入校驗(yàn)不能為空內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
mini-vue渲染的簡(jiǎn)易實(shí)現(xiàn)
本文主要介紹了mini-vue渲染的簡(jiǎn)易實(shí)現(xiàn),主要簡(jiǎn)單來(lái)實(shí)現(xiàn)一個(gè)虛擬dom渲染真實(shí)dom,以及更新的方法。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果
這篇文章主要介紹了vue2結(jié)合echarts實(shí)現(xiàn)一個(gè)地圖的效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家何用vue和echarts實(shí)現(xiàn)一個(gè)地圖有一定的幫助,感興趣的朋友一起看看吧2024-03-03
快速解決vue-cli不能初始化webpack模板的問(wèn)題
下面小編就為大家分享一篇快速解決vue-cli不能初始化webpack模板的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案,關(guān)于這個(gè)問(wèn)題,通常是由于插件名稱輸入錯(cuò)誤、網(wǎng)絡(luò)問(wèn)題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例
這篇文章主要給大家介紹了關(guān)于vue3錨點(diǎn)定位兩種實(shí)現(xiàn)的相關(guān)資料,說(shuō)到錨點(diǎn)定位,很多人第一時(shí)間會(huì)想到 a標(biāo)簽,但是a標(biāo)簽實(shí)現(xiàn)的錨點(diǎn)定位并不是那么的完美,需要的朋友可以參考下2023-07-07
vue彈出的添加信息組件中el-radio單選框無(wú)法點(diǎn)擊的解決方案
在彈出的添加信息組件中,單選框無(wú)法切換是因?yàn)闆](méi)有默認(rèn)值,通過(guò)判斷初始化時(shí)的值并賦初始值,雖然實(shí)現(xiàn)了初始值的展示,但導(dǎo)致單選框無(wú)法切換,為了解決這個(gè)問(wèn)題,更改了上級(jí)組件傳值的方式,直接帶參傳值,避免了對(duì)象處理2026-03-03
教你用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果
最近做的兩個(gè)項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤的解決
這篇文章主要介紹了Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁(yè)面刷新導(dǎo)致404錯(cuò)誤的解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01

