uniapp 和vue分别对 input框输入手机号时格式化号码 （变成344格式）

当我们在使用input输入手机号时，为了方便检查会想要把11位手机号码变成344的格式，下面我们分别在vue和uniapp里做个小练习~

如期效果：

 一、uniapp：

1、首先，我们要有一个uniapp的项目，自己建一个uniapp的项目，这里就不说怎么建了哈

不懂看：https://www.cnblogs.com/xz1005xfx/p/16482917.html

2、新建一个页面后写一个input框

设置input框的placeholder：提示语、maxlength：输入的最大长度、v-model：双向绑定的字段、@input：输入时触发的方法、type：类型

注意：类型不能设置为number，number类型是不能显示空格的，想要在手机上显示数字键盘的可以用tel类型

<view class="text-area">
	手机号：<input type="tel" placeholder="请输入手机号" maxlength="13" v-model="telPhone" @input="handleTelInput" />
</view>

再写一个判断方法：

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				telPhone: '',
			}
		},
		methods: {
			handleTelInput(e) {
				var len = this.telPhone.length
				var reg = new RegExp("\\s", "g");
				var mobile_ = '';
				this.telPhone = this.telPhone.replace(reg, "");
				for (var i = 0; i < len; i++) {
					if (i == 2 || i == 6) {
						// charAt(int index)方法是一个能够用来检索特定索引下的字符的String实例的方法。
						//这里用来检索this.telPhone的index为2和6
						mobile_ = mobile_ + this.telPhone.charAt(i) +
							" "; //当检索到2和6时，将原本的mobile_值加上新增的this.telPhone值再加一个" "后再赋值给mobile_自己
					} else {
						mobile_ += this.telPhone.charAt(i);
					}
				}
				this.telPhone = mobile_
			},

		}
	}
</script>

以上是uniapp的写法之一，下面再来看vue用watch监听的写法

二、vue

1、建一个vue项目，不懂看 ——>https://www.cnblogs.com/xz1005xfx/p/15252739.html

2、写入一个input框

<input type="tel" maxlength="13" v-model="telephone" />

这里需要用到watch监听input的输入动作

<script>
export default {
  data() {
    return {
      telephone: "",
    };
  },
  watch: {
    telephone(newValue, oldValue) {
      if (newValue > oldValue) {//判断用户是输入还是删除
        if (newValue.length === 4 || newValue.length === 9) {
          var pre = newValue.substring(0, newValue.length - 1);
          var last = newValue.substr(newValue.length - 1, 1);
          this.telephone = pre + " " + last;
        } else {
          this.telephone = newValue;
        }
      } else {
        if (newValue.length === 9 || newValue.length === 4) {
          this.telephone = this.telephone.trim();
        } else {
          this.telephone = newValue;
        }
      }
    },
  },
};
</script>

 以上就是vue和uniapp在input框输入手机号时格式化的形式啦~

希望对你有帮助！

 

😜喜欢文章或文章内容对您有帮助点个赞鼓励一下吧~