1.准备表单
<el-form ref="passwordForm" :model="form" :rules="loginRules" label-width="120px" label-position="left">
<el-form-item label="新密码" prop="password">
<el-input v-model="form.password" placeholder="请输入新密码" />
</el-form-item>
<el-form-item label="确认新密码" prop="password2">
<el-input v-model="form.password2" placeholder="请再次输入新密码" />
</el-form-item>
</el-form>
ref:表单名称
prop:要验证的内容
rules:验证的逻辑
2.js逻辑
<script>
export default {
data() {
const validatePassword = (rule, value, callback) => {
if (value.length < 5) {
callback(new Error('密码不能小于5位'))
} else {
callback()
}
}
const validatePassword2 = (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('新密码与旧密码不相同'))
} else {
callback()
}
}
return {
passwordRules: {
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
password2: [{ required: true, trigger: 'blur', validator: validatePassword2 }]
},
form: {
password2: '',
password: ''
},
}
},
}
</script>
trigger: 'blur' 或者 'change'
validator:自定义验证逻辑,参考async-validator