小程序开发过程中,很多地方要做表单校验,而小程序并不能像vue那样有专门的校验函数,只能自己手写做出类似的效果。
以修改密码为例,需要校验以下三个输入框:
原理:
利用输入框的bindblur
方法,根据校验的条件判断来控制错误信息的显示隐藏
实现代码:
<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;
}