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


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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
js实现文字滚动效果
Mar 03 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
JS class语法糖的深入剖析
Jul 07 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自定义错误日志
2015/02/13 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
python抓取网页内容示例分享
2014/02/24 Python
Python使用turtule画五角星的方法
2015/07/09 Python
python中的编码知识整理汇总
2016/01/26 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
教师产假请假条范文
2014/04/10 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
校本课程教学计划
2015/01/19 职场文书
大学运动会加油稿
2015/07/22 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
改造DE1103三步曲
2022/04/07 无线电
解决Oracle数据库用户密码过期
2022/05/11 Oracle