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


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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
Mar 22 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
微信小程序云开发 生成带参小程序码流程
May 18 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
原型和原型链 prototype和proto的区别详情
Nov 02 Javascript
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
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
zookeeper python接口实例详解
2018/01/18 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python检测IP地址变化并触发事件
2018/12/26 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
如何写python的配置文件
2020/06/07 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
软件测试题目
2013/02/27 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Go遍历struct,map,slice的实现
2021/06/13 Golang
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle