当前位置 : 主页 > 手机教程 > 手机资讯 >

微信小程序实现手机号码验证

来源:互联网 收集:自由互联 发布时间:2023-01-20
本文实例为大家分享了微信小程序实现手机号码验证的具体代码,供大家参考,具体内容如下 wxml form bindsubmit='formSubmit'  view class='all'    text手机号:/text    input name="phone" placeholder=

本文实例为大家分享了微信小程序实现手机号码验证的具体代码,供大家参考,具体内容如下

wxml

<form bindsubmit='formSubmit'>
  <view class='all'>
    <text>手机号:</text>
    <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindinput='blurPhone'></input>
  </view>
  <button formType="submit">保存</button>
</form>

wxss

.all {
  border-top: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  height: 98rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
 
button {
  width: 480rpx;
  height: 80rpx;
  background-color: #7ecffd;
  font-size: 30rpx;
  color: #fff;
  border-radius: 8px;
  margin: 50rpx auto;
}

js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    ajxtrue: false,
  },
  // 手机号验证
  blurPhone: function(e) {
    var phone = e.detail.value;
    let that = this
    if (!(/^1[34578]\d{9}$/.test(phone))) {
 
      this.setData({
        ajxtrue: false
      })
      if (phone.length >= 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      this.setData({
        ajxtrue: true
      })
      console.log('验证成功', that.data.ajxtrue)
    }
  },
  // 表单提交
  formSubmit(e) {
    let that = this
    let val = e.detail.value
    let ajxtrue = this.data.ajxtrue
    if (ajxtrue == true) {
      //表单提交进行
    } else {
      wx.showToast({
        title: '手机号有误',
        icon: 'success',
        duration: 2000
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
 
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自由互联。

上一篇:微信小程序自定义地址组件
下一篇:没有了
网友评论