以下代碼可直接復(fù)制使用：

以下代碼可直接復(fù)制使用！

<template><div><a href="https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215?fr=aladdin#10">百度正則</a><el-input v-model="text1" placeholder="請輸入內(nèi)容"></el-input><el-input v-model="text1" placeholder="可清空" clearable></el-input><el-input v-model.trim="text1" placeholder="自動清除兩測空格"></el-input><el-input v-model.trim="num1" placeholder="只是輸入正整數(shù)和0" @input="changeInputNum(num1)"></el-input><el-input v-model.trim="num2" placeholder="只是輸入正整數(shù)和0且最多六位" @input="changeInputSix(num2)"></el-input><!-- type="number" 會有上下按鈕 且可以輸入任何數(shù)據(jù) 如果想要限制其他條件 就加方法 --><el-input v-model.trim="num3" placeholder="只能輸入0和正整數(shù)和兩位的小數(shù)" @input.native="changeInputP($event, num3,)"></el-input><el-input v-model.trim="num3" placeholder="只能輸入0和正整數(shù)和兩位的小數(shù) 有上下按鈕" type="number" @input.native="changeInputP($event, num3,)"></el-input><!-- 默認(rèn)數(shù)字輸入會自動補(bǔ)齊小數(shù)點 還會自動四舍五入 --><el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正負(fù)數(shù) 最多兩位小數(shù)"></el-input-number><!-- 去掉加減按鈕 去掉自動補(bǔ)齊小數(shù)點屬性precision 去掉四舍五入 --><el-input-number v-model="num6" :step="0.01" placeholder="0正負(fù)數(shù) 最多兩位小數(shù)" class="num_input" @input.native="changeInputPt2($event)"></el-input-number><el-input v-model.trim="num3" placeholder="任何數(shù)據(jù)" type="number" class="wan_input"><template slot="append">萬</template></el-input><el-input v-model.trim="num3" placeholder="任何數(shù)據(jù)" type="number"></el-input><el-input-number v-model="num4" label="可以輸入任何數(shù)字"></el-input-number><el-input v-model="v2" type="text" placeholder="0到9數(shù)字或英文或0到9數(shù)字加英文" @input="changeNumOrEnglish"></el-input><el-input v-model="v3" type="text" placeholder="只能英文" @input="changeEnglish"></el-input><el-input v-model="carId" type="text" placeholder="車牌號碼 京AAAAAA 京A9999警" @input="changeCar"></el-input><div>{{ carMsg }}</div><el-input v-model="mobile" type="text" placeholder="手機(jī)號" @input="changeMobile"></el-input><div>{{ mobileMsg }}</div></div> </template><script> export default {data () {return {text1: '',num1: '',num2: '',num3: '',num4: '',num5: undefined,num6: undefined,v2: '',v3: '',carId: '',carMsg: '', // 車牌號碼正確錯誤提示mobile: '',mobileMsg: ''}},methods: {changeInputNum (val) {if (!(/^[1-9]\d*$/.test(val) || val - 0 === 0)) {// 不滿足this.num1 = ''val = ''}},changeInputSix (val) {if (!(/^[1-9]\d*$/.test(val) || val - 0 === 0)) {// 不滿足this.num2 = ''val = ''} else {if (val.length > 6) {// 不滿足this.num2 = val.substring(0, 6)val = this.num2}}},changeInputP (e, val) {console.log(e, val)e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null// console.log(e.target.value)this.num3 = e.target.valueval = e.target.value},changeInputPt2 (e) {console.log(e.target.value)if ((e.target.value.indexOf('.') >= 0)) {e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3) // 這里采用截取 既可以限制第三位小數(shù)輸入 也解決了數(shù)字輸入框默認(rèn)四舍五入問題}console.log(e.target.value)},changeNumOrEnglish (e) {if (!((/^[0-9]*$/.test(e)) || (/^[A-Za-z]+$/.test(e)) || (/^[A-Za-z0-9]+$/.test(e)))) {e = ''this.v2 = ''}},changeEnglish (e) {if (!(/^[a-zA-Z]*$/.test(e))) {e = ''this.v3 = ''}},changeCar (e) {var result = falseif (e.length === 7) {// 常規(guī)車牌是7位時候規(guī)則為： 省份簡稱或大寫字母共1位+大寫字母共1位+大寫字母或者數(shù)字共4位+大寫字母或數(shù)字或特殊漢字1位 例如:AAAAAAA 京A9999警var express = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警港澳]{1}$/result = express.test(e) // 滿足條件時候 正則結(jié)果是true} else if (e.length === 8) {// 新能源車牌號 8位：省份簡稱（1位漢字）+發(fā)牌機(jī)關(guān)代號（1位字母）+序號（6位）var express2 = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9掛學(xué)警港澳]{1}$/result = express2.test(e)}if (result) {console.log('正確車牌號碼')this.carMsg = '正確車牌號碼'} else {console.log('錯誤車牌號碼')this.carMsg = '錯誤車牌號碼'}},changeMobile (e) {var flagTel = falseflagTel = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/.test(e)if (flagTel) {console.log('正確手機(jī)號')this.mobileMsg = '正確手機(jī)號'} else {console.log('錯誤手機(jī)號')this.mobileMsg = '錯誤手機(jī)號'}}} } </script><style lang="less" scoped> .el-input {width: 400px;display: block;margin: 10px 500px; } .el-input-number {.el-input {width: 180px;margin: 0;} }// 內(nèi)部插槽位置大小自己調(diào)整 .el-input-group__append {float: left;height: 40px;box-sizing: border-box;margin: -40px 356px; }.wan_input{position: relative;/deep/.el-input-group__append{position: absolute;right: 0;top: 0;height: 38px;border-radius:0 3px 3px 0;line-height: 38px;text-align: center;} }.num_input {/deep/.el-input-number__decrease,/deep/.el-input-number__increase {display: none !important;}/deep/.el-input__inner {padding: 0 !important;} } </style>

總結(jié)

以上是生活随笔為你收集整理的el-input 输入框类型；只能输入数字的输入框；保留两位小数输入框；只能输入正整数和0的输入框；手机号正则校验；车牌号码正则校验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。