微信小程序?qū)崿F(xiàn)基于三元運算驗證手機(jī)號/姓名功能示例
本文實例講述了微信小程序?qū)崿F(xiàn)基于三元運算驗證手機(jī)號/姓名功能。分享給大家供大家參考,具體如下:
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>聯(lián)系電話</text>
<input type="number" placeholder='請輸入聯(lián)系電話' maxlength='11' value="{{phone}}" bindblur='userTellInput'></input>
<text class="{{isPhone=='1'?'show':'hidden'}}" style="width:35%">請輸入有效的手機(jī)號</text>
</view>
js部分:
data: {
trueName: "",
deparment: "",
phone: "",
isName: "",
isDeparment: "",
isPhone: "",
},
//事件處理函數(shù)
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) {
//聯(lián)系電話
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"
})
}
}
本機(jī)測試運行結(jié)果:

希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結(jié)合實例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
js實現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實現(xiàn)頁面轉(zhuǎn)發(fā),具體實現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08
javascript實現(xiàn)倒計時跳轉(zhuǎn)頁面
本文給大家介紹了如何使用javascript實現(xiàn)倒計時跳轉(zhuǎn)到其他頁面的方法以及實現(xiàn)原理,非常的簡單實用,有需要的小伙伴可以參考下。2016-01-01
javascript將非數(shù)值轉(zhuǎn)換為數(shù)值
parseInt()不能轉(zhuǎn)換浮點型數(shù)值,我們用parseFloat()來解決。這篇文章主要介紹了javascript將非數(shù)值轉(zhuǎn)換為數(shù)值,需要的朋友可以參考下2018-09-09
document.execCommand()的用法小結(jié)
本篇文章主要是對document.execCommand()的用法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01
網(wǎng)頁禁用右鍵菜單和鼠標(biāo)拖動選擇方法小結(jié)
本文主要給大家總結(jié)了一下在網(wǎng)頁中禁用鼠標(biāo)右鍵和鼠標(biāo)拖動選擇的幾種常用的方法,十分的實用,有需要的小伙伴參考下。2015-02-02
在網(wǎng)頁中使用document.write時遭遇的奇怪問題
很多時候我們都會在網(wǎng)頁上的JavaScript中使用document.write來寫入一些東西,有的時候可能因為我們無法改變某一部分HTML而不得不使用這樣的辦法,也有的時候是因為在進(jìn)行跨應(yīng)用的腳本調(diào)用。2010-08-08

