微信小程序實現基于三元運算驗證手機號/姓名功能示例

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

本機測試運行結果：

微信小程序,三元運算,驗證