微信小程序如何用三元运算符验证手机号和姓名的正确性？

本文共计552个文字，预计阅读时间需要3分钟。

本文实例讲述了微信小程序实现基于三元运算验证手机号/昵称功能。以下分享供大家参考：

+wxml部分：

手机号/昵称：

+wxs部分：

javascript// 手机号/昵称验证function checkPhone(phone) { // 正则表达式验证手机号格式 var reg=/^1[3-9]\d{9}$/; if (reg.test(phone)) { return true; } else { return false; }}

+js部分：

javascriptPage({ data: { phoneName: '' }, bindPhoneInput: function(e) { var phone=e.detail.value; if (checkPhone(phone)) { this.setData({ phoneName: phone }); } else { wx.showToast({ title: '手机号格式错误', icon: 'none' }); } }});

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

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

本机测试运行结果：

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