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

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显示值并未改变,原因未知。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3实现输入验证可以通过使用vue-validate库来简化操作。下面是一个示例代码,演示如何实现身份证和号码的输入验证: 首先,安装`vue-validate`库: ```bash npm install vue-validate ``` 然后,在需要使用验证的组件引入并注册`vue-validate`: ```javascript import { createApp } from 'vue'; import { validate } from 'vue-validate'; const app = createApp(App); app.use(validate); app.mount('#app'); ``` 接下来,在模板添加需要验证的输入框,并使用`v-validate`指令绑定验证规则: ```html <template> <div> <input type="text" v-model="idCard" v-validate="'required|idCard'" placeholder="请输入身份证号码"> <input type="text" v-model="phoneNumber" v-validate="'required|phoneNumber'" placeholder="请输入手机号码"> <!-- 显示错误信息 --> <div v-if="errors.has('idCard')"> {{ errors.first('idCard') }} </div> <div v-if="errors.has('phoneNumber')"> {{ errors.first('phoneNumber') }} </div> </div> </template> ``` 最后,在组件的`data`选项定义对应的数据属性,并在`methods`添加验证规则: ```javascript export default { data() { return { idCard: '', phoneNumber: '' }; }, methods: { validateForm() { this.$validate().validateAll().then(() => { // 验证通过,执行其他逻辑 console.log('验证通过'); }).catch(() => { // 验证失败 console.log('验证失败'); }); } } } ``` 这样就完成了在Vue 3实现身份证和号码输入验证的过程。当输入符合验证规则时,会显示对应的错误信息。你可以根据实际需求修改验证规则和错误信息的显示方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值