vue中input按照一定的规则输入，不符合规则输入不进

最新推荐文章于 2024-07-24 20:21:31 发布

原创最新推荐文章于 2024-07-24 20:21:31 发布 · 6.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #input

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在Vue框架中如何使用input事件监听输入变化，并通过正则表达式检查输入是否符合特定规则。当输入不符合规则时，文章提供了一个解决方案，即使用setTimeout延迟函数将输入值恢复为上一个有效值，确保了数据的有效性和用户界面的一致性。

1.绑定input事件监听输入值的变化：

  <input  v-model="inputKey"  @input="change"></input>

2.修改不符合规则的值：

 change(res) {
     if(res==""){
           缓存值= res;
        }else if (/^[a-zA-Z\$_][a-zA-Z\d_]*$/.test(res) ) {
            //符合规则缓存起来
            缓存值 = res;
        } else {
            //不加Timeout this.inputKey的值能改变，但是input显示值没有改变
          setTimeout(()=>{
            //不符合规则，把上一次缓存起来的值重新赋给input双向绑定的变量
            this.inputKey=缓存值;
          },0)
          
        }
    }

不加timeout this.inputKey能改变但是双向绑定的（v-modle）input显示值并未改变，原因未知。