小程序开发过程中，很多地方要做表单校验，而小程序并不能像vue那样有专门的校验函数，只能自己手写做出类似的效果。文章来源：https://www.toymoban.com/news/detail-548123.html
以修改密码为例，需要校验以下三个输入框：
原理：
利用输入框的bindblur方法，根据校验的条件判断来控制错误信息的显示隐藏
实现代码：文章来源地址https://www.toymoban.com/news/detail-548123.html
<view>
<span class="label">旧密码</span>
<input type='input' placeholder="请输入旧密码" data-inputid="oldPwd" model:value="{{oldPassword}}" bindblur="onBlur" />
<view class="{{submitMsg.oldPwd ==='' ? 'vhidden' : 'vshow'}} the-msg">{{submitMsg.oldPwd}}</view>
</view>
<view>
<span class="label">新密码</span>
<input type='input' placeholder="请输入新密码" data-inputid="newPwd" model:value="{{newPassword}}" bindblur="onBlur" />
<view class="{{submitMsg.newPwd ==='' ? 'vhidden' : 'vshow'}} the-msg">{{submitMsg.newPwd}}</view>
</view>
<view>
<span class="label">确认密码</span>
<input type='input' placeholder="请再次输入新密码" data-inputid="quePwd" model:value="{{quePassword}}" bindblur="onBlur" />
<view class="{{submitMsg.quePwd ==='' ? 'vhidden' : 'vshow'}} the-msg">{{submitMsg.quePwd}}</view>
</view>
let pwdReg = /^[0-9a-z_.@]{6,16}$/
data: {
oldPassword: '',
newPassword: '',
quePassword: '',
submitMsg: {
oldPwd: '',
newPwd: '',
quePwd: ''
}
},
onBlur(e) {
switch (e.currentTarget.dataset.inputid) {
case 'oldPwd':
if (this.data.oldPassword === '') {
this.setData({
["submitMsg.oldPwd"]: '旧密码不可为空'
})
} else if (!pwdReg.test(this.data.oldPassword)) {
this.setData({
["submitMsg.oldPwd"]: '旧密码格式不正确'
})
} else {
this.setData({
["submitMsg.oldPwd"]: ''
})
}
break;
case 'newPwd':
if (this.data.newPassword === '') {
this.setData({
["submitMsg.newPwd"]: '新密码不可为空'
})
} else if (!pwdReg.test(this.data.newPassword)) {
this.setData({
["submitMsg.newPwd"]: '新密码格式不正确'
})
} else if (this.data.quePassword && (this.data.newPassword !== this.data.quePassword)) {
this.setData({
["submitMsg.newPwd"]: '两次输入的密码不一致，请重试'
})
} else {
this.setData({
["submitMsg.newPwd"]: ''
})
}
break;
case 'quePwd':
if (this.data.quePassword === '') {
this.setData({
["submitMsg.quePwd"]: '确认密码不可为空'
})
} else if (!pwdReg.test(this.data.quePassword)) {
this.setData({
["submitMsg.quePwd"]: '确认密码格式不正确'
})
} else if (this.data.newPassword !== this.data.quePassword) {
this.setData({
["submitMsg.quePwd"]: '两次输入的密码不一致，请重试'
})
} else {
this.setData({
["submitMsg.quePwd"]: ''
})
}
break;
default:
break;
}
},
.vshow {
display: block !important;
}
.vhidden {
display: none !important;
}
到了这里，关于【微信小程序】表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
