结合Vue实现344分割手机号码
这一个小需求,断断续续解决了好久,中间一直存在各种bug,现在基本上已经完全解决,因此,打算从头到尾记录一下,方便以后查询。
需求
开始的时候,还是把需求简单的说下:
移动端中,弹出系统的数字键盘,实现344分割手机号
需求明确之后,下面就是分析需求,然后才能确定实现方式:
- 明确说明是移动端,那么也就是说,兼容问题不需要考虑太多
- 如果要弹出系统的数字键盘,那么符合条件的只有一种,那就是
type="phone"
的input输入框 - 在输入的时候,实现344分割手机号,这个时候就要监视输入框中内容的变化,这个可以结合Vue的
watch
来实现 - 手机号344分割,那么输入框中输入的最大长度应该就是13了
经过分析可以看出,实际需要使用的知识点并不是很多。分析完成之后,下面就要来具体实现这个需求了。
实现
搭建结构
首先,在写真正的程序之前,要把结构搭建完成,后续写代码直接在结构中写就可以了。
- 首先来搭建html5的代码结构,然后自定义input的样式(方便后续查看)
- 定义input输入框,并设置
type
和maxlength
- 通过
v-model
实现数据的双向绑定 - 引入vue.js并搭建基本的代码结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">/* 自定义input输入框的样式 */#app input { width: 100%; height: 50px; border: 1px solid red; font-size: 30px; outline: none; }</style>
</head>
<body><div id="app"><!-- 设置type和maxlength,并实现数据双向绑定 --><input v-model="phone" type="phone" placeholder="请输入手机号" maxlength="13"></div>
</body>
</html><script type="text/javascript" src="./vue2.4.2.js"></script>
<script type="text/javascript">var vm = new Vue({el: '#app',data() {return {phone: ''}},watch: {phone(newValue, oldValue) {// 具体的代码在这里实现}}})
</script>
分析输入和输出
在具体实现之前,首先要明白,输入和输出的分别触发什么样的操作。
下面,我们把watch中的newValue
和oldValue
的值输出,看一下规律。
phone(newValue, oldValue) {// 具体的代码在这里实现console.group('< === 是否是输入 === >')console.log("%c%s", "color:red", `${newValue.length > oldValue.length}`)console.groupEnd('< === 是否是输入 === >')}
当在输入框中输入内容的时候:
当在输入框中删除内容的时候:
从分析可以看出,在输入的时候,长度是增加的,删除的时候,长度是减少的。
删除的具体实现
在删除的时候,会出现两个转折点,就是在删除第10个元素或者第5个元素的时候,要自动删除空格。
很明显,这里出现了两个条件,下标为4的时候和下标为9的时候,要去除字符串的空格。
phone(newValue, oldValue) {// 具体的代码在这里实现if (newValue.length > oldValue.length) {// ...} else {if (newValue.length === 9 || newValue.length === 4) {this.phone = this.phone.trim()}}}
代码写出了之后,看着有些不舒服,有没有优化方案呢?
再次经过分析会发现,既然在下标为4或9的时候,我们做的事是去除空格,那么就可以根据去空格的特性(有空格去除空格,无空格不进行处理),直接只做去除空格的操作,不进行判断了。
phone(newValue, oldValue) {// 具体的代码在这里实现if (newValue.length > oldValue.length) {// ...} else {this.phone = this.phone.trim()}}
现在,删除的功能实现了,并且代码也进行了优化,下面开始实现输入的操作。
输入的具体实现
下面来分析一下输入的问题:
在输入的时候,当值的长度小于3的时候,肯定是原样返回的;当值的长度大于等于3且小于7的时候,要增加一个空格;当长度大于等于7的时候,要增加两个空格。这个时候就要牵涉到条件判断了。
另外,在判断值的时候,肯定是判断总数字的个数,因此是去除空格的。
phone(newValue, oldValue) {// 具体的代码在这里实现if (newValue.length > oldValue.length) {if (newValue.replace(/\s/g, '').length < 3) {this.phone = newValue.replace(/\s/g, '')} else if (newValue.replace(/\s/g, '').length >= 3 && newValue.replace(/\s/g, '').length < 7) {this.phone = newValue.replace(/\s/g, '').replace(/(\d{3})/, '$1 ')} else if (newValue.replace(/\s/g, '').length >= 7) {this.phone = newValue.replace(/\s/g, '').replace(/(\d{3})(\d{4})/, '$1 $2 ')}} else {this.phone = this.phone.trim()}}
我的天哪,这个代码怎么看着那么乱,应该可以优化的。由于正则表达式是一个强大的工具,因此,可以结合正则来优化。
首先,我们可以把空格作为分割点,那么空格之前的内容属于一组,所以共分三组。第一组的长度为3个数字,第二组和第三组的长度都是0-4个数字,因此,通过正则可以简化代码:
phone(newValue, oldValue) {// 具体的代码在这里实现if (newValue.length > oldValue.length) {this.phone = newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3')} else {this.phone = this.phone.trim()}}
简化代码
上面的代码已经基本算精简了,可是,如果使用三目运算符,还可以更加精简:
phone(newValue, oldValue) {// 具体的代码在这里实现this.phone = newValue.length > oldValue.length ? newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.phone.trim()}
至此,该需求已经完成了,最后实际的代码只有一句。
总结
其实这个需求很简单,需要总结的东西不多,因此,在这里把具体的代码实现贴出来,方便后续使用:
<div id="app"><!-- 设置type和maxlength,并实现数据双向绑定 --><input v-model="phone" type="phone" placeholder="请输入手机号" maxlength="13">
</div><script type="text/javascript" src="./vue2.4.2.js"></script>
<script type="text/javascript">var vm = new Vue({el: '#app',data() {return {phone: '' // 双向绑定的数据}},watch: {phone(newValue, oldValue) { // 监听this.phone = newValue.length > oldValue.length ? newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.phone.trim()}}})
</script>
结合Vue实现344分割手机号码相关推荐
- Vue 电话号码344分割
H5和原生页面怎么交互? JSBridge:是JS和Native之前的一种通信方式.简单的说,JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS也只通过 ...
- el vue 手机号_Vue实现数字输入框中分割手机号码实例教程
本文主要介绍了Vue实现数字输入框中分割手机号码的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 需求 在移动端弹出系统数字键盘,输入手机号码的时 ...
- Android实现真正的344格式化手机号码输入框
前言:在最近一个项目的登录页上,输入手机号码这个输入框,UI稿要求显示344样式的格式化手机号码,例如"130 1234 5678",在之前其实也有过类似的需求,但是在实现344格 ...
- 在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证 下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <!-- 申报手机号 --><div cla ...
- vue把字符串分割成等长的若干字符串,根据特定字符分割字符串
一.把字符串分割成等长的若干字符串 1. 把字符串分割成特定长度的若干字符串(数组形式),这里举一个每5个字符为一组的例子 const strArr = 'new计算-架构&编程-语言'.ma ...
- Vue基础知识总结 14:Vuex是做什么的?
目录 一.官方解释 二.Vuex状态管理图例 三.VueX的核心概念 四.getters 五.Mutation 六.Action 七.Module 八.关注公众号哪吒编程,回复1024,获取思维导图, ...
- 正则表达式的\b与\B总结
\b 单词边界,是指单词与符号之间的边界,是一个位置,不是空格或字符.(这里单词可以是中文字符,英文字符,数字: 符号可以是中文符号,英文符号,空格,制表符,换行).不能与量词?+*{1}{2,5} ...
- 10分钟学会正则表达式这三个知识点~
前言 曾经我一度对正则表达式有种恐惧和厌恶感,为啥?因为总感觉这玩意很难,很枯燥,看到别人写出贼牛逼的正则,我想啥时候我能像他们一样优秀.直到我看到了这三个知识点... 只需要花10分钟时间,你可以收 ...
- ubuntu18.04下EnlightenGAN运行过程记录
运行过程 1.代码:https://github.com/VITA-Group/EnlightenGAN 2.conda创建虚拟环境: conda create -n enlighten python ...
最新文章
- 中文版证书_CIA考试多久后才可以领取证书?领取的方式是什么?
- rockbox主题包安装_微信主题更改流程介绍!超火的猫和老鼠、小黄人等系列等你来设置...
- java库加载,Java:使用依赖项加载共享库
- Mybatis返回值类型为Map时,空值给过滤掉了
- Deep learning:十一(PCA和whitening在二维数据中的练习)
- linux的apache安装在哪个目录,在linux系统下apache的默认安装路径在哪
- 5G在工业互联网应用的机遇与挑战
- php7 php5.6 array,[转]php5.6 升级到php7及变化
- JS_单个或多个文件上传_不支持单独修改
- PHP MYSQL关键词统计系统_PHP MySQL Order By 关键词
- Gradle 比 Maven 好为什么用的人少
- Redis基础(二)——通用命令和配置
- gnu ld链接出现“ no .eh_frame_hdr table will be created.”
- 1.Prometheus 监控技术与实践 --- 云计算时代的监控系统
- Gantt - attachEvent所有事件(归类、索引)
- 前端网页打印window.print()
- linux修改内核logo,Linux内核开发-修改开机Logo
- CSDN插件还能画图、加速GitHub下载?分享几个插件给你
- 游戏建模 | UV贴图及模型展开案例
- 高中英语选修计算机,高中英语课堂