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

 更新时间:2019年01月19日 11:49:05   作者:黎成诃月  
这篇文章主要介绍了微信小程序实现基于三元运算验证手机号/姓名功能,涉及三元运算符的判定及字符串正则验证相关操作技巧,需要的朋友可以参考下

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

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"
   })
  }
 }

本机测试运行结果:

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

相关文章

  • 微信小程序实现image组件图片自适应宽度比例显示的方法

    微信小程序实现image组件图片自适应宽度比例显示的方法

    这篇文章主要介绍了微信小程序实现image组件图片自适应宽度比例显示的方法,简单讲述了image组件的常用属性,并结合实例形式分析了微信小程序实现图片自适应宽度比例的相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • js实现页面转发功能示例代码

    js实现页面转发功能示例代码

    本文为大家介绍的是使用js实现页面转发,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • 修复bash漏洞的shell脚本分享

    修复bash漏洞的shell脚本分享

    这篇文章主要介绍了修复bash漏洞的shell脚本分享,本文脚本适应常见的linux服务器系统,如CentOS、Debian、Ubuntu、OpenSuSE、Aliyun等系统,需要的朋友可以参考下
    2014-12-12
  • javascript实现倒计时跳转页面

    javascript实现倒计时跳转页面

    本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理,非常的简单实用,有需要的小伙伴可以参考下。
    2016-01-01
  • js取得html iframe中的元素和变量值

    js取得html iframe中的元素和变量值

    想要取得iframe中的元素和js变量值,不能用$(document).ready()方法,而是要用$("#iframeId").load()方法
    2014-06-06
  • javascript将非数值转换为数值

    javascript将非数值转换为数值

    parseInt()不能转换浮点型数值,我们用parseFloat()来解决。这篇文章主要介绍了javascript将非数值转换为数值,需要的朋友可以参考下
    2018-09-09
  • document.execCommand()的用法小结

    document.execCommand()的用法小结

    本篇文章主要是对document.execCommand()的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 网页禁用右键菜单和鼠标拖动选择方法小结

    网页禁用右键菜单和鼠标拖动选择方法小结

    本文主要给大家总结了一下在网页中禁用鼠标右键和鼠标拖动选择的几种常用的方法,十分的实用,有需要的小伙伴参考下。
    2015-02-02
  • 微信小程序实现一键回到顶部功能

    微信小程序实现一键回到顶部功能

    这篇文章主要为大家详细介绍了微信小程序实现一键回到顶部功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 在网页中使用document.write时遭遇的奇怪问题

    在网页中使用document.write时遭遇的奇怪问题

    很多时候我们都会在网页上的JavaScript中使用document.write来写入一些东西,有的时候可能因为我们无法改变某一部分HTML而不得不使用这样的办法,也有的时候是因为在进行跨应用的脚本调用。
    2010-08-08

最新评论