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


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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
浅谈JS的原型和继承
May 08 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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
一个目录遍历函数
2006/10/09 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
keras中的backend.clip用法
2020/05/22 Python
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
车间组长岗位职责
2013/12/20 职场文书
前台文员岗位职责
2013/12/28 职场文书
银行介绍信范文
2014/01/10 职场文书
单位领导证婚词
2014/01/14 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
项目合作意向书模板
2014/07/29 职场文书
世界遗产导游词
2015/02/13 职场文书
干部外出学习心得体会
2016/01/18 职场文书
python中的3种定义类方法
2021/11/27 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js