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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)

    下面一小段代码给大家介绍微信小程序 功能函数 密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str

  • 微信小程序手机号验证码登录的项目实现

    微信小程序手机号验证码登录的项目实现

    本文主要介绍了小程序手机号验证码登录,具体如下: wxml: <view class="content_bottom"> <form bindsubmit="formSubmit"> <view class="field"> <label for="phone">手机号</label> <input class="int" name=&quo

  • 微信小程序手机号码验证功能的实例代码

    wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

  • 微信小程序获取手机验证码的方法

    微信小程序获取手机验证码的方法

    本文实例为大家分享了微信小程序获取手机验证码的具体代码,供大家参考,具体内容如下 完成手机验证码的功能: (1)效果图如下: (开始发送验证码) (重新发送验证码) (2)需求及思路说明: 输入正确的11位手机号,使用正则校验. 校验手机号的归属地----北京移动(这个根据需求而定) 点击 “获取验证码” ,获取成功与失败,都会以弹框的形式展现,完成倒计时. 倒计时为 ‘0’ 的时候,按钮文字变成 “重新发送” 当按钮是 “获取验证码” 和 “重新发送” 的时候,按钮是可以点击进行倒计时的 在倒

  • 微信小程序绑定手机号获取验证码功能

    微信小程序绑定手机号获取验证码功能

    微信小程序验证码获取方式,代码如下所示: <!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo

  • 微信小程序实现手机获取验证码倒计时60s

    微信小程序实现手机获取验证码倒计时60s

    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!-- 手机 -->   <view class="tel">     <!-- 手机图标 -->     <view class="icon_tel">       <image class="tel_image

  • 微信小程序实现基于三元运算验证手机号/姓名功能示例

    微信小程序实现基于三元运算验证手机号/姓名功能示例

    本文实例讲述了微信小程序实现基于三元运算验证手机号/姓名功能.分享给大家供大家参考,具体如下: wxml部分: <view class="fl_form" style="position:relative;padding-top:20rpx;"> <text><text style="color:red;padding-right:10rpx">*</text>您的姓名</text> &

  • 微信小程序实现手机验证码登录

    我们的微信小程序里面,手机验证码登录已经成为不可缺少的一部门,为此,我写的这个手机验证码登录,这里我结合thinkphp6+微信小程序实现 首先我们进入小程序页面: wxml页面: <!--pages/phone/phone.wxml--> <view class="container">   <view class="title"  style='height:{{statusBarHeight+100}}rpx;padding-to

  • 微信小程序如何获取手机验证码

    微信小程序如何获取手机验证码

    一种比较常见的功能获取手机验证码,供大家参考,具体内容如下 先看效果图: 其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题 直接上代码吧: <view class='changeInfo'> <view class='changeInfoName'> <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> </view> <view class

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

    本文实例为大家分享了微信小程序实现手机号码验证的具体代码,供大家参考,具体内容如下 wxml <form bindsubmit='formSubmit'>   <view class='all'>     <text>手机号:</text>     <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style=&

  • Django实现微信小程序的登录验证功能并维护登录态

    这次自己做了一个小程序来玩,在登录方面一直有些模糊,网上看了很多文档后,得出以下一种解决方案. 环境说明: 1.小程序只需要拿到openid,其他信息不存储. 2.Django自带的User类不适合. 具体操作流程: 1.用户点进小程序,就调用wx.login()获取临时登录凭证code, wx.login()用户是无感知的, 2.通过wx.request()将code传到开发者服务器的后台程序, 3.后台拿到code之后,调用微信提供的接口,获取openid和session_key, 4.后台

  • 微信小程序实现滑块验证

    微信小程序实现滑块验证

    本文实例为大家分享了微信小程序实现滑块验证的具体代码,供大家参考,具体内容如下 思路: 1.手指按住 并且 还能 滑动2.滑动到一定的距离 进行判断百度微信开发者文档 : 使用 movable-view的可移动区域. 结合 movable-view wxml代码 <movable-area class="content" style="width:{{area_width}}%">拖动滑块验证         <movable-view class

  • 微信小程序实现滑动验证拼图

    微信小程序实现滑动验证拼图

    本文实例为大家分享了微信小程序实现滑动验证拼图的具体代码,供大家参考,具体内容如下 效果图 .wxml <button bindtap="visidlisd">滑动验证</button> <!-- 滑动验证弹窗 --> <view class="slide_model" wx:if="{{slidebel}}">   <view>       <view class="c

  • 微信小程序开发之表单验证WxValidate使用

    微信小程序开发之表单验证WxValidate使用

    微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用官方社区开发的WxValidate插件进行表单验证. WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单. 首先插件的下载地址和官方文档都在WxValidat

  • 微信小程序获取用户手机号码的详细步骤

    微信小程序获取用户手机号码的详细步骤

    目录 前言 接下来我们通过服务器获取授权 deciphering解密方法 总结 前言 我们在做小程序开发的过程中,经常会涉及到用户身份的问题,最普遍的就是我们要获取用户的手机号码,通过微信获取手机号码后可以减少很多操作,比如用户手机号码验证等,我们还可以给用户发送提示短信,那么本文主要讲解如何获取用户手机号码. 获取用户手机号码 分为以下几步: 第一点击页面获取授权按钮 第二获取用户授权参数 第三根据加解密算法解密手机号码 接下来我们来实现以上三步 先看前端页面 <!--index.wxml--

  • 微信小程序实现表单验证提交功能

    微信小程序实现表单验证提交功能

    本文实例为大家分享了微信小程序实现表单验证提交的具体代码,供大家参考,具体内容如下 效果图: 说明:点击一键预约提交表单时我们需要验证一些必填项以及它们的格式.微信小程序表单验证跟vue的input双向绑定不同,微信小程序只能通过button按钮提交form表单,然后通过监听表单提交方法去获取提交的数据. <!-- 表单 --> <view class="forms">   <view class="container">    

  • 微信小程序实现表单验证源码

    微信小程序实现表单验证源码

    本文实例为大家分享了微信小程序实现表单验证的具体代码,供大家参考,具体内容如下 效果图 点击预约设计弹出表单 城市,面积不能输入,只能选择 点击位置获取当前定位 源码: Wxml <!--pages/designerList/designerDetail.wxml--> <view>     <view class='tc m_t20'>     <image src='{{urlhttp + designerDetail.thumb}}' class='imgl

  • 微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名 比如:

随机推荐