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


Posted in Javascript onAugust 28, 2018

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

下面看下微信小程序正则判断手机号的示例代码

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
if (this.data.Del.length == 0) {
 wx.showToast({
  title: '输入的手机号为空',
  icon: 'success',
  duration: 1500
 })
 return false;
} else if (this.data.Del.length < 11) {
 wx.showToast({
  title: '手机号长度有误!',
  icon: 'success',
  duration: 1500
 })
 return false;
} else if (!myreg.test(this.data.Del)) {
 wx.showToast({
  title: '手机号有误!',
  icon: 'success',
  duration: 1500
 })
 return false;
} else {
 wx.showToast({
  title: '填写正确',
  icon: 'success',
  duration: 1500
 })
}

总结

以上所述是小编给大家介绍的微信小程序手机号码验证功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery仿搜索自动联想功能代码
May 23 Javascript
Node.js文件操作详解
Aug 16 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
AngularJS 事件发布机制
Aug 28 #Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 #Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 #Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 #Javascript
You might like
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python中的五种异常处理机制介绍
2014/09/02 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
python类装饰器用法实例
2015/06/04 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python中时间模块的基本使用教程
2019/05/14 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
剪彩仪式主持词
2014/03/19 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
研究生导师评语
2014/12/31 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis