el-input 输入框类型；只能输入数字的输入框；保留两位小数输入框；只能输入正整数和0的输入框；手机号正则校验；车牌号码正则校验

以下代码可直接复制使用：

以下代码可直接复制使用！

<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="请输入内容"></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="只是输入正整数和0" @input="changeInputNum(num1)"></el-input><el-input v-model.trim="num2" placeholder="只是输入正整数和0且最多六位" @input="changeInputSix(num2)"></el-input><!-- type="number" 会有上下按钮 且可以输入任何数据  如果想要限制其他条件 就加方法 --><el-input v-model.trim="num3" placeholder="只能输入0和正整数和两位的小数" @input.native="changeInputP($event, num3,)"></el-input><el-input v-model.trim="num3" placeholder="只能输入0和正整数和两位的小数 有上下按钮" type="number" @input.native="changeInputP($event, num3,)"></el-input><!-- 默认数字输入会自动补齐小数点 还会自动四舍五入 --><el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正负数 最多两位小数"></el-input-number><!-- 去掉加减按钮 去掉自动补齐小数点属性precision 去掉四舍五入 --><el-input-number v-model="num6" :step="0.01" placeholder="0正负数 最多两位小数" class="num_input" @input.native="changeInputPt2($event)"></el-input-number><el-input v-model.trim="num3" placeholder="任何数据" type="number" class="wan_input"><template slot="append">万</template></el-input><el-input v-model.trim="num3" placeholder="任何数据" type="number"></el-input><el-input-number v-model="num4" label="可以输入任何数字"></el-input-number><el-input v-model="v2" type="text" placeholder="0到9数字或英文或0到9数字加英文" @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="手机号" @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) // 这里采用截取 既可以限制第三位小数输入 也解决了数字输入框默认四舍五入问题}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) {// 常规车牌是7位时候规则为： 省份简称或大写字母共1位+大写字母共1位+大写字母或者数字共4位+大写字母或数字或特殊汉字1位  例如:AAAAAAA  京A9999警var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/result = express.test(e) // 满足条件时候 正则结果是true} else if (e.length === 8) {// 新能源车牌号 8位：省份简称（1位汉字）+发牌机关代号（1位字母）+序号（6位）var express2 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9挂学警港澳]{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('正确手机号')this.mobileMsg = '正确手机号'} else {console.log('错误手机号')this.mobileMsg = '错误手机号'}}}
}
</script><style lang="less" scoped>
.el-input {width: 400px;display: block;margin: 10px 500px;
}
.el-input-number {.el-input {width: 180px;margin: 0;}
}// 内部插槽位置大小自己调整
.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>

el-input 输入框类型；只能输入数字的输入框；保留两位小数输入框；只能输入正整数和0的输入框；手机号正则校验；车牌号码正则校验相关推荐

创建类MyMath,计算圆的周长、面积和球的表面积、体积，结果保留两位小数。若输入的是非数字，则输出：请输入数字！提示：要引入math包。
""" 创建类MyMath,计算圆的周长.面积和球的表面积.体积,结果保留两位小数.若输入的是非数字,则输出:请输入数字!提示:要引入math包. 结果如下,请输入半径: ...
js 正则限制 input 只能输入数字，不能输入特殊符号，保留两位小数等效果
限制只能输入数字,小数点只保留2位,限制不能输入空格 <div id="app"><input type="text" v-model=&qu ...
C语言：输入一个浮点数，保留两位小数，对第三位小数四舍五入
思路:定义一个float类型的变量,从键盘上获取一个浮点数,将其乘以100再加0.5(这里加0.5是进行四舍五入)之后类型转换为整型,最后除以100.0(这里需要注意除数100得为一个小数,否则两个整 ...
js两数字相除保留两位小数
var c=(a/b).toFixed(2); 如果a=5,b=100,则c结果就是0.05
Summary_JavaScript中数字的小数点保留两位小数
一.四舍五入情况 var value =2.446242342; value = value.toFixed(2); // 输出结果为 2.45 二.非四舍五入情况
js input 正则保留2位小数中文拼音输入问题 + 限制输入整数的方案
js input 正则保留2位小数中文拼音输入问题 + 限制输入整数的方案 problem 背景 element ui el-input组件原生input事件需求限制输入框的输入只允许输入数字 ...
jQuery EasyUI/TopJUI基本的数字输入框（保留两位小数，带前缀后缀...）
jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...) numberbox(数值输入框) HTML required:必填字段,默认为false:prompt:显示 ...
初学C语言：输入华氏温度，输出摄氏温度并保留两位小数，计算格式：C=5/9(F−32)
#include<stdio.h> void main(){ float F,C; //定义浮点型华氏温度F,摄氏温度C printf("请输入华 ...
python输入圆的半径求面积及周长并保留两位小数_VB程序题：输入半径，计算圆周长和圆面积，如下图所示。...
VB程序题:输入半径,计算圆周长和圆面积,如下图所示. 进一步要求,为了保证程序运行的正确,对输入的半径要进行合法性检查,数据检查调用IsNumeric函数,参阅教材例2.5:若有错,利用MsgBox ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...

el-input 输入框类型；只能输入数字的输入框；保留两位小数输入框；只能输入正整数和0的输入框；手机号正则校验；车牌号码正则校验

el-input 输入框类型；只能输入数字的输入框；保留两位小数输入框；只能输入正整数和0的输入框；手机号正则校验；车牌号码正则校验相关推荐

最新文章

热门文章