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


Posted in Javascript onJanuary 19, 2019

本文实例讲述了微信小程序实现基于三元运算验证手机号/姓名功能。分享给大家供大家参考,具体如下:

wxml部分:

<view class="fl_form" style="position:relative;padding-top:20rpx;">
 <text><text style="color:red;padding-right:10rpx">*</text>您的姓名</text>
 <input type="text" placeholder='请输入您的姓名' value="{{trueName}}" bindblur='userNameInput'></input>
 <text class="{{isName=='1'?'show':'hidden'}}">姓名不能为空</text>
</view>
<view class="fl_form">
 <text><text style="color:red;padding-right:10rpx">*</text>所属部门</text>
 <input type="text" placeholder='请输入所属部门' value="{{deparment}}" bindblur='userBranchInput'></input>
 <text class="{{isDeparment=='1'?'show':'hidden'}}">部门不能为空</text>
</view>
<view class="fl_form" style="padding-bottom:20rpx;">
 <text><text style="color:red;padding-right:10rpx">*</text>联系电话</text>
 <input type="number" placeholder='请输入联系电话' maxlength='11' value="{{phone}}" bindblur='userTellInput'></input>
 <text class="{{isPhone=='1'?'show':'hidden'}}" style="width:35%">请输入有效的手机号</text>
</view>

js部分:

data: {
  trueName: "",
  deparment: "",
  phone: "",
  isName: "",
  isDeparment: "",
  isPhone: "",
 },
 //事件处理函数
 userNameInput: function (e) {
  //用户姓名
  if (e.detail.value) {
   console.log(e.detail.value)
   this.setData({
    isName: '',
    trueName: e.detail.value
   })
  } else {
   this.setData({
    isName: '1'
   })
  }
 },
 userBranchInput: function (e) {
  //所属部门
  if (e.detail.value) {
   this.setData({
    isDeparment: '',
    deparment: e.detail.value
   })
  } else {
   this.setData({
    isDeparment: '1'
   })
  }
 },
 userTellInput: function (e) {
  //联系电话
  if (/^1[3|4|5|6|7|8|9]\d{9}$/.test(e.detail.value)) {
   this.setData({
    phone: e.detail.value,
    isPhone: ""
   })
  } else {
   this.setData({
    isPhone: "1"
   })
  }
 }

本机测试运行结果:

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

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 #Javascript
详解vue-router导航守卫
Jan 19 #Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 #Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 #Javascript
js实现延迟加载的几种方法详解
Jan 19 #Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 #Javascript
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
追求程序速度,而不是编程的速度
2008/04/23 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
js 函数的副作用分析
2011/08/23 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
JavaScript中创建原子的方法总结
2018/08/26 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python分数表示方式和写法
2019/06/26 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
django中cookiecutter的使用教程
2020/12/03 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
律师催款函范文
2015/06/24 职场文书
2016年十一促销广告语
2016/01/28 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
聊聊JS ES6中的解构
2021/04/29 Javascript