Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)實(shí)例代碼
更新時(shí)間：2023年06月09日 10:37:20 作者：清阿哥、
輸入框是使用非常多的元素,用來輸入用戶名、密碼等等信息,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)致輸入框無法正常輸入值。這時(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)文章
基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)
這篇文章主要介紹了vue新聞自下往上滾動(dòng)效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動(dòng)，鼠標(biāo)移出繼續(xù)滾動(dòng)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案
v-for標(biāo)簽可以用來遍歷數(shù)組，將數(shù)組的每一個(gè)值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
vue計(jì)算屬性和監(jiān)聽器實(shí)例解析
本文通過基本實(shí)例給大家介紹了vue計(jì)算屬性和監(jiān)聽器的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vuex實(shí)現(xiàn)及簡(jiǎn)略解析(小結(jié))
這篇文章主要介紹了vuex實(shí)現(xiàn)及簡(jiǎn)略解析(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要給大家介紹了關(guān)于Vue緩存方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
文章介紹了兩種用于在線預(yù)覽文檔的插件：view.xdocin和view.officeapps.live,view.xdocin插件支持在線預(yù)覽并延長(zhǎng)使用時(shí)間,但不支持下載,view.officeapps.live插件是微軟插件,但預(yù)覽速度較慢,且有時(shí)會(huì)出現(xiàn)翻頁問題,兩種插件都適用于不需要下載和安裝軟件的場(chǎng)景2026-01-01
這篇文章主要介紹了vue指令防止按鈕連點(diǎn)解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中的$set的使用,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04