el-form 自定义校验两次输入的密码是否一致
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="form.confirmPassword" type="password"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
const validateConfirmPassword = (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次输入的密码不一致!'));
} else {
callback();
}
};
return {
form: {
password: '',
confirmPassword: ''
},
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validateConfirmPassword, trigger: 'blur' }
]
}
};
}
};
</script>