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


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 相关文章推荐
JavaScript中的apply和call函数详解
Jul 20 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
vue ssr 指南详读
Jun 29 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
vue postcss-px2rem 自适应布局
May 15 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
PHP新手上路(十二)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
简单谈谈python中的语句和语法
2017/08/10 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
pycharm设置注释颜色的方法
2018/05/23 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python 自定义装饰器实例详解
2019/07/20 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python-地图可视化组件folium的操作
2020/12/14 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
聘用意向书
2014/07/29 职场文书
介绍信的格式
2015/01/30 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
小学运动会通讯稿
2015/07/18 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书