判断输入的手机号格式是否正确

点击按钮获取输入的手号码,判断输入的手机号格式是否正确
或者是否有输入号码

1.效果截图

不输入号码:
在这里插入图片描述
点击提交按钮后的效果
在这里插入图片描述
输入错误格式号码
在这里插入图片描述
点击提交按钮后的效果
在这里插入图片描述

2.代码实现

(1)wxml

<view class="box2">
    <view class="box2_left">手机号</view>
    <input type="text" class="box2_right" placeholder="请填写收货人的手机号" bindblur="change_tel" > </input>
  </view>
<button bindtap="tap">确定</button>

(2)wxss


.box2{
  width: 680rpx;
  min-height: 90rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: solid 2rpx #D7D7D7;
}
.box2_left{
  width: 180rpx;
  font-size: 15px;
  color: #000000;
}
.box2_right{
  width: 406rpx;
  min-height: 90rpx;
  display: flex;
  align-items: center;
  font-size: 14px;
}

(3)js

  data: {
    //号码
    tel:'',
    }
      /**
   * 手机号
   */
  change_tel:function(e){
    var that = this;
    this.setData({
      tel: e.detail.value
    })
  },
 /**
 * 点击按钮
*/
tap:function(){
   var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (tel.length == 0){
      wx.showToast({
        title: '请输入手机号!',
        icon: 'none',
        duration: 5500
      })
    } else if (tel.length != 11||!myreg.test(tel)){
      wx.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
        duration: 5500
      })
    }
    }
发布了45 篇原创文章 · 获赞 6 · 访问量 1174

猜你喜欢

转载自blog.csdn.net/qq_41219586/article/details/103565421