微信小程序手机号码验证

最新推荐文章于 2025-05-27 18:32:46 发布

晓凤凤

最新推荐文章于 2025-05-27 18:32:46 发布

阅读量4.5k

点赞数

分类专栏：小程序

小程序专栏收录该内容

20 篇文章

订阅专栏

博客提及了wxml、wxss和js，这些均为信息技术领域前端开发常用技术。wxml用于构建页面结构，wxss负责样式设计，js可实现页面交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}


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() {
 
  }
})