Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)實(shí)例代碼
更新時(shí)間：2023年06月09日 10:37:20 作者：清阿哥、
輸入框是使用非常多的元素,用來(lái)輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關(guān)于Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)的相關(guān)資料,需要的朋友可以參考下
一. 常用的 element-ui el-input 輸入框
1. 過濾字母e，在js中屬于數(shù)字，但是正則匹配 \d 是攔不住字母e 的
<el-input type="number" placeholder="請(qǐng)輸入" min="1" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
2. 只能輸入正整數(shù)
<el-input type="number" placeholder="請(qǐng)輸入" min="1" oninput ="value=value.replace(/[^\d]/g,'')" v-model.number="count"></el-input>
3. 只允許輸入數(shù)字和小數(shù) / 數(shù)字和空格
oninput ="value=value.replace(/[^0-9.]/g,'')" oninput ="value=value.replace(/^[\d\s]+$/g,'')"
4. 只允許輸入正整數(shù)且不能以0開頭
方法-： <el-input v-model="scope.row.weight" oninput="value = Number(value) || 0" > 方法二： <el-input v-model="scope.row.weight" oninput="value=value.replace(/\D|^0/g, '')" > 方法三： <el-input v-model="scope.row.weight" oninput="value=value.replace(/[^\d]|^[0]/g, '')" >
4. 允許輸入小數(shù)點(diǎn)后幾位
// 保留一位小數(shù)
oninput="if(isNaN(value)) { value = parseFloat(value) } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
// 若需要保留N位小數(shù)，則把2 改為 1 + n即可5. 設(shè)置范圍，最大值，最小值
<el-input min="0" max="100" type="number" @input="numberChange($event, 100)" @change="numberChange($event, 100)" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8" v-model.number="count"></el-input>
numberChange (val, max) {
this.$nextTick(() => {
this.count = Math.min(parseInt(val), max)
})
}6. form 表單中校驗(yàn)輸入框只能輸入數(shù)字和兩位小數(shù)
rules: {
giveHour: [
{ required: true, message: '請(qǐng)輸入客戶退費(fèi)金額', trigger: 'blur' },
{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請(qǐng)輸入正確額格式,可保留兩位小數(shù)' }
]
}7. 禁止 / 只允許 輸入中文
onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
8. 只允許輸入數(shù)字和英文
<el-input v-model.trim="form.userNumber" placeholder="請(qǐng)輸入用戶編號(hào)" clearable onkeyup="this.value=this.value.replace(/[^\w]/g,'')" ></el-input>
9. 禁止輸入特殊字符
<el-input oninput="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')"></el-input>
10. 只允許輸入英文
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z]/g,'')"></el-input>
11. 常見表單校驗(yàn)
校驗(yàn)方法可以封裝到 util.js 里面
// utils.js
// 全局函數(shù)
export function validateMobile(str) {
// 檢查手機(jī)號(hào)碼格式
return /^((13[0-9])|(14[5-9])|(15([0-3]|[5-9]))|(16[6-7])|(17[1-8])|(18[0-9])|(19[1|3])|(19[5|6])|(19[8|9]))\d{8}$/.test(
str,
);
}
export function validateEmail(str) {
// 檢查郵箱格式
return /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(str);
}
export function validatePhone(str) {
// 檢查電話格式
return /^(0\d{2,4}-)?\d{8}$/.test(str);
}
export function validateQQ(str) {
// 檢查QQ格式
return /^[1-9][0-9]{4,}$/.test(str);
}
// 檢查驗(yàn)證碼格式
export function validateSmsCode(str) {
return /^\d4$/.test(str);
}
// 校驗(yàn) URL
export function validURL(url) {
const reg =
/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
// 校驗(yàn)特殊字符
export function specialCharacter(str) {
const reg = new RegExp(
// eslint-disable-next-line quotes
"[`~!@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
)
return reg.test(str)
}12. 輸入非數(shù)字組合(登錄賬號(hào)6-16位)
// 非純數(shù)字非純字母 /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/
let userNameReg = /^(?![0-9]+$)[0-9A-Za-z|a-zA-Z]{6,16}$/;
if (!userNameReg.test(form.userName)) {
this.$message.warning('請(qǐng)輸入6-16位的非純數(shù)字登錄賬號(hào)~');
return false;
}13. 只允許輸入中文，英文，數(shù)字 / 空格 / 小數(shù)點(diǎn)
<el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"></el-input> <el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"></el-input> <el-input oninput = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')"></el-input>
14. 空格校驗(yàn)
// 去除所有的空格： <el-input oninput = "value=value.replace(/\s*/g,"")"></el-input> // 去除兩頭的空格： 方法一：<el-input oninput = "value=value.replace(/^\s*|\s*$/g,"")"></el-input> 方法二：<el-input v-model.trim=""></el-input> // 去除左側(cè)的空格： <el-input oninput = "value=value.replace(/^\s*/g,"")"></el-input> // 去除右側(cè)的空格： <el-input oninput = "value=value.replace(/(\s*$)/g,"")"></el-input>
Tips: 最近測(cè)試給提了個(gè)bug，window 系統(tǒng)電腦，使用 oninput 方法進(jìn)行輸入框正則校驗(yàn)，如果瘋狂進(jìn)行輸入的話會(huì)出現(xiàn)當(dāng)前輸入框的雙向綁定失效，導(dǎo)致輸入框無(wú)法正常輸入值。這時(shí)候推薦使用 @input 方法可以避免這個(gè)方法，還有一個(gè)辦法是失焦的時(shí)候重新進(jìn)行一次賦值操作也可以解決。mac系統(tǒng)沒有出現(xiàn)這個(gè)問題…
總結(jié)
到此這篇關(guān)于Elementui el-input輸入框校驗(yàn)及表單校驗(yàn)的文章就介紹到這了,更多相關(guān)el-input輸入框校驗(yàn)及表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-07-07
這篇文章主要介紹了vue diff算法的使用，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
vue項(xiàng)目自適應(yīng)屏幕分辨率實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目自適應(yīng)屏幕分辨率實(shí)現(xiàn)的相關(guān)資料,作為前端人員,為了適配各種型號(hào)的電腦、手機(jī),我們往往離不開屏幕分辨率的適配,需要的朋友可以參考下2023-09-09
Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景詳析
這篇文章主要給大家介紹了關(guān)于Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景的相關(guān)資料,插槽（Slot）是Vue提出來(lái)的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性,需要的朋友可以參考下2021-06-06
淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined
這篇文章主要介紹了淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實(shí)例,為undefined，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue+node實(shí)現(xiàn)音頻錄制播放,功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了vue組件的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue3.0如何在全局掛載對(duì)象和方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue應(yīng)用程序中，表格是一個(gè)非常常見的組件，在這篇文章中，我們將介紹如何在Vue中進(jìn)行表格的合并和拆分，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格過濾功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09