uniapp-验证两次输入的密码是否一致
uniapp 验证两次输入的密码是否一致1.界面示例2.表单代码<view class="change_from"><u-form :model="form" ref="uForm"><u-form-item prop="oldpassword"><u-input v-model="form.oldpassword" type="password" pla
·
uniapp 验证两次输入的密码是否一致
1.界面示例
2.表单
<view class="change_from">
<u-form :model="form" ref="uForm">
<u-form-item prop="oldpassword"><u-input v-model="form.oldpassword" type="password" placeholder="请输入原始密码" /></u-form-item>
<u-form-item prop="newPwd"><u-input v-model="form.newPwd" type="password" placeholder="请输入6~15位新密码" /></u-form-item>
<u-form-item prop="confirmPwd"><u-input v-model="form.confirmPwd" type="password" placeholder="请确认新密码" /></u-form-item>
</u-form>
</view>
<u-button @click="submit" class="submit-btn">确认修改</u-button>
3.自定义验证规则
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
// if (this.form.confirmPwd !== '') {
// // this.$refs.uForm.validateField('confirmPwd');
// callback(new Error('请输入新密码'));
// }
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.newPwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
form: {
oldpassword: '',
newPwd: '',
confirmPwd: ''
},
rules: {
oldpassword: [
{
required: true,
message: '请输入原密码',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur']
}
],
newPwd: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 16, message: '长度在 6 到 12 个字符', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
],
confirmPwd: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ min: 6, max: 16, message: '长度在 6 到 12 个字符', trigger: 'blur' },
{ validator: validatePass2, trigger: 'blur', required: true }
]
}
};
},
加载规则验证
onReady() {
this.$refs.uForm.setRules(this.rules);
}
4.提交验证
submit() {
this.$refs.uForm.validate(valid => {
if (!valid) {
console.log('验证失败');
} else {
console.log('验证通过');
console.log(this.form)
// this.changePassword() //接口调用
// uni.navigateTo({
// url: '../index/index'
// });
}
});
},
更多推荐
已为社区贡献3条内容
所有评论(0)