uniapp/vue实现手机号分割344

最新推荐文章于 2024-05-16 16:42:25 发布

钢铁卡卡龙o_0

最新推荐文章于 2024-05-16 16:42:25 发布

阅读量412

点赞数

分类专栏： uniapp vue 文章标签： javascript uni-app 前端 vue.js

本文链接：https://blog.csdn.net/m0_61339009/article/details/130090981

版权

uniapp 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

在uniapp开发中，通过键盘事件处理手机号码输入时遇到双键同时输入导致的判断错误。为了解决这个问题，文章提出了使用$nextTick确保每次数据更新后执行函数，检查并格式化输入值，限制输入为数字且分段显示手机号。当输入长度在3到8位时，显示前三位；长度大于等于8位时，显示前七位。

摘要由CSDN通过智能技术生成

uniapp上手机号分割一般靠键盘事件实现或者监听，但两个按键一起输入时会判断出错，出现bug，自己记录一下所需要解决的情况，使用$nextTick（）来实现每次数据刷新都能用上

html

<uni-easyinput maxlength="13" type="text" @keydown="phone_division"  @input="phone_division" @keyup="phone_division" @paste="phone_division"  placeholder-style="font-weight: 600;font-size:30rpx" v-model="loginForm.phone" placeholder="请输入手机号"></uni-easyinput>
复制代码

函数方法


phone_division() {
        this.$nextTick(() => {//使用$nextTick()来确保每次改变都调用函数
                //输入字段检测是否合法，如符号和字母
                let value = this.loginForm.phone.replace(/\D/g, '').substr(0, 11)
                let len = value.length //获取长度判断
                if (len > 3 && len < 8) {
                        value = value.replace(/^(\d{3})/g, '$1 ')
                } else if (len >= 8) {
                        value = value.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')
                }
                console.log(value);
                this.loginForm.phone = value
        })
}