ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

el-form 自定义校验两次输入的密码是否一致

2026/8/5 14:14:05 拓冰建站 浏览量
el-form 自定义校验两次输入的密码是否一致

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>