Elementui?el-input輸入框校驗及表單校驗實例代碼
更新時間：2023年06月09日 10:37:20 作者：清阿哥、
輸入框是使用非常多的元素,用來輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關于Elementui?el-input輸入框校驗及表單校驗的相關資料,需要的朋友可以參考下
一. 常用的 element-ui el-input 輸入框
1. 過濾字母e，在js中屬于數(shù)字，但是正則匹配 \d 是攔不住字母e 的
<el-input type="number" placeholder="請輸入" 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="請輸入" 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ù)點后幾位
// 保留一位小數(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. 設置范圍，最大值，最小值
<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 表單中校驗輸入框只能輸入數(shù)字和兩位小數(shù)
rules: {
giveHour: [
{ required: true, message: '請輸入客戶退費金額', trigger: 'blur' },
{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '請輸入正確額格式,可保留兩位小數(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="請輸入用戶編號" 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. 常見表單校驗
校驗方法可以封裝到 util.js 里面
// utils.js
// 全局函數(shù)
export function validateMobile(str) {
// 檢查手機號碼格式
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);
}
// 檢查驗證碼格式
export function validateSmsCode(str) {
return /^\d4$/.test(str);
}
// 校驗 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)
}
// 校驗特殊字符
export function specialCharacter(str) {
const reg = new RegExp(
// eslint-disable-next-line quotes
"[`~!@#$^&*()=|{}':;',\\[\\]<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"
)
return reg.test(str)
}12. 輸入非數(shù)字組合(登錄賬號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('請輸入6-16位的非純數(shù)字登錄賬號~');
return false;
}13. 只允許輸入中文，英文，數(shù)字 / 空格 / 小數(shù)點
<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. 空格校驗
// 去除所有的空格： <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> // 去除左側的空格： <el-input oninput = "value=value.replace(/^\s*/g,"")"></el-input> // 去除右側的空格： <el-input oninput = "value=value.replace(/(\s*$)/g,"")"></el-input>
Tips: 最近測試給提了個bug，window 系統(tǒng)電腦，使用 oninput 方法進行輸入框正則校驗，如果瘋狂進行輸入的話會出現(xiàn)當前輸入框的雙向綁定失效，導致輸入框無法正常輸入值。這時候推薦使用 @input 方法可以避免這個方法，還有一個辦法是失焦的時候重新進行一次賦值操作也可以解決。mac系統(tǒng)沒有出現(xiàn)這個問題…
總結
到此這篇關于Elementui el-input輸入框校驗及表單校驗的文章就介紹到這了,更多相關el-input輸入框校驗及表單校驗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue新聞自下往上滾動效果,當鼠標鼠標放上暫停滾動，鼠標移出繼續(xù)滾動，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標簽可以用來遍歷數(shù)組，將數(shù)組的每一個值綁定到相應的視圖元素中去，下面這篇文章主要給大家介紹了關于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
本文通過基本實例給大家介紹了vue計算屬性和監(jiān)聽器的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vuex實現(xiàn)及簡略解析(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要給大家介紹了關于Vue緩存方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
文章介紹了兩種用于在線預覽文檔的插件：view.xdocin和view.officeapps.live,view.xdocin插件支持在線預覽并延長使用時間,但不支持下載,view.officeapps.live插件是微軟插件,但預覽速度較慢,且有時會出現(xiàn)翻頁問題,兩種插件都適用于不需要下載和安裝軟件的場景2026-01-01
這篇文章主要介紹了vue指令防止按鈕連點解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中的$set的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了mpvue性能優(yōu)化實戰(zhàn)技巧(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04