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


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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
PHP中如何调用webservice的实例参考
2013/04/25 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php include类文件超时问题处理
2015/02/06 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python高阶爬虫实战分析
2018/07/29 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
小学生考试获奖感言
2014/01/30 职场文书
渡河少年教学反思
2014/02/12 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
党员自我评价2015
2015/03/03 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
golang中的并发和并行
2021/05/08 Golang