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


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 相关文章推荐
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
关于JavaScript中异步/等待的用法与理解
Nov 18 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代码
2007/03/08 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
用Python写一个自动木马程序
2019/09/17 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python sorted排序方法如何实现
2020/03/31 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
python中的插入排序的简单用法
2021/01/19 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
公司委托书怎么写
2014/08/02 职场文书
保安辞职信范文
2015/02/28 职场文书
教师节班会开场白
2015/06/01 职场文书
婚宴致辞
2015/07/28 职场文书
2016年母亲节广告语
2016/01/28 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS