微信小程序三元运算验证手机号/姓名

html:

< 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(e){
//用户姓名
if(e.detail.value){
console.log(e.detail.value)
this.setData({
isName: '',
trueName:e.detail.value
})
} else{
this.setData({
isName: '1'
})
}
},
userBranchInput(e){
//所属部门
if (e.detail.value) {
this.setData({
isDeparment: '',
deparment: e.detail.value
})
} else {
this.setData({
isDeparment: '1'
})
}
},
userTellInput(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"
})
}
},

猜你喜欢

转载自blog.csdn.net/weixin_40292626/article/details/79663961