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


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 自定义事件初探
Aug 21 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP读取MySQL数据代码
2008/06/05 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP网络操作函数汇总
2015/05/18 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
优秀教师先进事迹
2014/01/22 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
团员自我评价范文
2015/03/10 职场文书
上班迟到检讨书
2015/05/06 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Android 中的类文件和类加载器详情
2022/06/05 Java/Android