uniapp表单密码校验:判断两次密码输入是否一致
uniapp表单密码校验:判断两次密码输入是否一致
·
uniapp表单密码校验:
无需使用自定义validator进行校验,使用uniapp文档内自带的this.$u.test.object({value:password})即可。
<u-form-item label="登陆密码" labelWidth="80" prop="password" borderBottom ref="item1">
<u-input type="password" v-model="model1.password" border="none" placeholder="请输入密码"></u-input>
</u-form-item>
<u-form-item label="确认密码" labelWidth="80" prop="Tpassword" borderBottom ref="item1">
<u-input v-model="model1.Tpassword" border="none" placeholder="请确认密码"></u-input>
</u-form-item>
表单中,prop后是判定校验的规则名,v-model动态绑定data内的值。
data() {
return {
model1: {
password: '',
Tpassword: ''
},
rules: {
'password': [{
type: 'string',
required: true,
message: '不可为空',
trigger: ['blur', 'change']
}],
'Tpassword': [{
type: 'string',
required: true,
message: '密码不为空',
trigger: ['blur', 'change']
},{
//使用异步方法进行校验
asyncValidator: (rules, value, callback) => {
if (value != this.model1.password){
callback(new Error('两次密码校验不一致'))
}
return uni.$u.test.object({values:password});
},
message: '两次密码校验不一致',
trigger: ["change","blur"]
}]
},
}
},
在微信小程序中使用,如果不是自定义的判定校验,则在onready中添加setRules方法设置规则:
onReady() {
// 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则
this.$refs.form1.setRules(this.rules)
},
最后表单提交的按钮上写submit,总结表单校验:
this.$refs.form1.validate().then(res => {
console.log('表单数据信息',res);
this.noSure();
}).catch(err => {
console.log('表单错误信息',err);
})
更多推荐
已为社区贡献3条内容
所有评论(0)