首页 > 课堂 > 小程序 > 正文

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

2020-03-21 16:03:11
字体:
来源:转载
供稿:网友

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

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

本机测试运行结果:

微信小程序,三元运算,验证

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表