限制Input框输入非法值

是通过正则来限制输入框输入的值（通过正则就可以自定义规则）

1. 先提前声明了两个数据，一个是与后端交互的合法值，一个是展示的临时值

 // 表单信息const calculationForm = reactive({yearsInsAmount: 3000,busInsAmount: 2050,comInsAmount: 950,})// 表单模板信息const calculationFormTemp = reactive({yearsInsAmount: 3000,busInsAmount: 2050,comInsAmount: 950,})

2. input框通过v-model双向数据绑定临时值，通过input事件监听用户输入的值

<input v-model="calculationFormTemp.yearsInsAmount"placeholder="请输入"@input="onYearPriceChange($event)"
></input>

3. 提前定义一个正则表达式，当用户输入时触发input事件，获取用户输入的value值

a. 判断用户输入的值是否符合正则，符合的话将临时值同步到与后端交互的合法值，

b. 当用户输入不符合正则的值，先将输入value赋值给临时值，再通过nextTick（）当DOM渲染完成后在将与上一次保存的与后端交互的合法值在赋值给那个临时值，达到限制输入非法值的效果

  // 匹配数字和小数点const reg = /(^0(\.\d{0,2})?$)|(^[1-9]\d*(\.\d{0,2})?$)/const onYearPriceChange = (value) => {if (reg.test(value) || value == '') {calculationForm.yearsInsAmount = +value)return}calculationFormTemp.yearsInsAmount = valuenextTick(() => {calculationFormTemp.yearsInsAmount = calculationForm.yearsInsAmount})}

需要注意的点：数据初始化时和赋值时，临时值和合法值必须一起赋值

限制Input框输入非法值相关推荐

vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
通过js获得input文本框输入的值
如何通过js获得input文本框输入的值. 前言我们编写的被载入浏览器的HTML页面都是一个 Document 对象.对于Document对象可以使我们通过代码(比如javascript)对HTML ...
如何禁止input框输入特殊字符
如何禁止input框输入特殊字符前端开发中可能会碰到input框禁止输入特殊字符的情况,下面是解决办法,输入框内只能输入字母数字和基本汉字,亲测有效. HTML部分 <div class=&q ...
js复制input 框中的值
js复制input 框中的值 function copy(){ var Url2=document.getElementById("copyValue"); Url2.select ...
js控制input框输入数字时，累计求和
input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...
【杂记】（input获取焦点失去焦点、获取input中输入的值、键盘事件、js事件、Math 属性、手机自适应meta定义、去掉input内置阴影、图片居中、去蓝色默认背景、点击去掉默认边框）
1. input获取焦点失去焦点 input:focus{border:1px red solid:} 获取焦点 .focus()失去焦点.blur() 2. 获取input中输入的值 <inp ...
vue,原生html—input框输入银行卡4位分开、手机号344分隔
vue,原生html-input框输入银行卡4位分开.手机号344分隔效果图: 1.uni-app写input框 (注意type类型不能为number,这是一个坑,我理解到-数字框只能输入数字不能显 ...
Form表单验证神器： BootstrapValidator常见的坑，input框的value值改变二次验证不了？
BootstrapValidator表单验证是通常是用来设置form表单提交时,限制某些字段不能为空,为空时type="submit"的按钮一直提交不了,如下图 +++++++++ ...
html页面input框输入不了,input框不能输入问题
input框不能输入问题今天在写程序设计登录页面的时候遇到了一个问题:输入框不能输入! 就是我写着写着想测试一下功能,就发现输入框不能输入了.???还能出现这种问题??就很疑惑,然后就搜了搜无法输入 ...

限制Input框输入非法值

限制Input框输入非法值相关推荐

最新文章

热门文章