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

<view> <text><text>*</text>您的姓名</text> <input type="text" placeholder='请输入您的姓名' value="{{trueName}}" bindblur='userNameInput'></input> <text>姓名不能为空</text> </view> <view> <text><text>*</text>所属部门</text> <input type="text" placeholder='请输入所属部门' value="{{deparment}}" bindblur='userBranchInput'></input> <text>部门不能为空</text> </view> <view> <text><text>*</text>联系电话</text> <input type="number" placeholder='请输入联系电话' maxlength='11' value="{{phone}}" bindblur='userTellInput'></input> <text>请输入有效的手机号</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" }) } }

本机测试运行结果:

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ca0f443c0b406df77a8669903e3148c0.html