微信小程序> 微信小程序手机号码验证

微信小程序手机号码验证

浏览量：581 时间： 来源：晓凤凤

wxml

  1. form bindsubmit=‘formSubmit’
  2.   view class=‘all’
  3.     text手机号：/text
  4.     input name=“phone” placeholder=‘请输入手机号’ type=‘number’ style=‘color:#333’ placeholder-style=“color:#666” maxlength=“11” bindinput=‘blurPhone’/input
  5.   /view
  6.   button formType=“submit”保存/button
  7. /form

wxss

  1. .all {
  2.   border-top: 1rpx solid #efefef;
  3.   border-bottom: 1rpx solid #efefef;
  4.   height: 98rpx;
  5.   font-size: 28rpx;
  6.   display: flex;
  7.   align-items: center;
  8. }
  9.  
  10. button {
  11.   width: 480rpx;
  12.   height: 80rpx;
  13.   background-color: #7ecffd;
  14.   font-size: 30rpx;
  15.   color: #fff;
  16.   border-radius: 8px;
  17.   margin: 50rpx auto;
  18. }

js

  1. Page({
  2.  
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     ajxtrue: false,
  8.   },
  9.   // 手机号验证
  10.   blurPhone: function(e) {
  11.     var phone = e.detail.value;
  12.     let that = this
  13.     if (!(/^1[34578]d{9}$/.test(phone))) {
  14.  
  15.       this.setData({
  16.         ajxtrue: false
  17.       })
  18.       if (phone.length = 11) {
  19.         wx.showToast({
  20.           title: '手机号有误',
  21.           icon: 'success',
  22.           duration: 2000
  23.         })
  24.       }
  25.     } else {
  26.       this.setData({
  27.         ajxtrue: true
  28.       })
  29.       console.log('验证成功', that.data.ajxtrue)
  30.     }
  31.   },
  32.   // 表单提交
  33.   formSubmit(e) {
  34.     let that = this
  35.     let val = e.detail.value
  36.     let ajxtrue = this.data.ajxtrue
  37.     if (ajxtrue == true) {
  38.       //表单提交进行
  39.     } else {
  40.       wx.showToast({
  41.         title: '手机号有误',
  42.         icon: 'success',
  43.         duration: 2000
  44.       })
  45.     }
  46.   },
  47.   /**
  48.    * 生命周期函数--监听页面加载
  49.    */
  50.   onLoad: function(options) {
  51.  
  52.   },
  53.  
  54.   /**
  55.    * 生命周期函数--监听页面初次渲染完成
  56.    */
  57.   onReady: function() {
  58.  
  59.   },
  60.  
  61.   /**
  62.    * 生命周期函数--监听页面显示
  63.    */
  64.   onShow: function() {
  65.  
  66.   },
  67.  
  68.   /**
  69.    * 生命周期函数--监听页面隐藏
  70.    */
  71.   onHide: function() {
  72.  
  73.   },
  74.  
  75.   /**
  76.    * 生命周期函数--监听页面卸载
  77.    */
  78.   onUnload: function() {
  79.  
  80.   },
  81.  
  82.   /**
  83.    * 页面相关事件处理函数--监听用户下拉动作
  84.    */
  85.   onPullDownRefresh: function() {
  86.  
  87.   },
  88.  
  89.   /**
  90.    * 页面上拉触底事件的处理函数
  91.    */
  92.   onReachBottom: function() {
  93.  
  94.   },
  95.  
  96.   /**
  97.    * 用户点击右上角分享
  98.    */
  99.   onShareAppMessage: function() {
  100.  
  101.   }
  102. })

           
            /div
点击这里免费试用，快速创建您的专属小程序
标签： 微信小程序 小程序 小程序是什么

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

相关资讯

招商热线

17304402882

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎

深圳市咫尺网络科技开发有限公司©2015 咫尺网络 粤ICP备14097199号 工商网监电子标识