Element数据校验出现问题

Question

我用的是Element+vue，再修改密码的时候，发现不论我怎么修改，怎么输入数据，返现总是给我错误提示（原因是校验错误），发现我怎么输入数据，在离焦之后，校验的结果总是错误的。

<script setup>
import { ref } from 'vue'


const ModifyPassword=ref({
    "old_pwd":"",
    "new_pwd":"",
    "re_pwd":""
})
const userInfo=ref({})
const checkNewAndOld=(rules,value,callback)=>{
    //rule表示当前规则，value代表的是值，callback表示如果失败了，那几回调
    if(value===''){
        callback(new Error('请输入确认密码'));
    }else if(value!==ModifyPassword.value.new_pwd){
        callback(new Error( '前后输入的密码不一致'))
    }else{
        callback();//正常回退
    }
}

const rules = {
    password:[
    { required: true, message: '请输入原密码', trigger: 'blur' }
    ],
    newPassword:[
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 5, max: 16, message: '密码长度为5-16的非空字符串', trigger: 'blur' },
    ],
    rePassword:[
        {validator:checkNewAndOld, trigger: 'blur'}
    ]
}
import useUserInfoStore from '@/store/userInfo.js'

//从pinia中获取用户信息
const userInfoStore = useUserInfoStore();
userInfo.value = userInfoStore.userInfo;

</script>


<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="ModifyPassword" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="原始密码" prop="password">
                        <el-input  v-model="ModifyPassword.old_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新的密码" prop="newPassword">
                        <el-input v-model="ModifyPassword.new_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="rePassword">
                        <el-input v-model="ModifyPassword.re_pwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" >修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

Answer 1

该回答引用自GPT-3.5, 由博主 GISer Liu 编写：

问题分析

用户在使用Element UI和Vue进行密码修改时，遇到了数据校验错误的问题。具体表现为无论输入什么数据，校验结果总是错误的。我们需要仔细检查代码中的校验逻辑和数据绑定部分。

解决方案

1. 检查数据绑定

首先，确保数据绑定是正确的。在Vue 3中，使用ref来定义响应式数据，但在模板中使用时需要通过.value来访问。

2. 检查校验规则

确保校验规则正确地应用在相应的表单项上，并且校验函数逻辑正确。

3. 修改代码

根据上述分析，我们需要对代码进行以下修改：

1. 确保数据绑定正确。
2. 修正校验规则中的属性名称。
3. 确保校验函数逻辑正确。

修改后的代码

<script setup>
import { ref } from 'vue'

const ModifyPassword = ref({
    old_pwd: "",
    new_pwd: "",
    re_pwd: ""
})

const checkNewAndOld = (rules, value, callback) => {
    if (value === '') {
        callback(new Error('请输入确认密码'));
    } else if (value !== ModifyPassword.value.new_pwd) {
        callback(new Error('前后输入的密码不一致'))
    } else {
        callback(); // 正常回退
    }
}

const rules = {
    old_pwd: [
        { required: true, message: '请输入原密码', trigger: 'blur' }
    ],
    new_pwd: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 5, max: 16, message: '密码长度为5-16的非空字符串', trigger: 'blur' },
    ],
    re_pwd: [
        { validator: checkNewAndOld, trigger: 'blur' }
    ]
}

import useUserInfoStore from '@/store/userInfo.js'

// 从pinia中获取用户信息
const userInfoStore = useUserInfoStore();
const userInfo = ref(userInfoStore.userInfo);

</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="ModifyPassword" :rules="rules" label-width="100px" size="large">
                    <el-form-item label="原始密码" prop="old_pwd">
                        <el-input v-model="ModifyPassword.old_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新的密码" prop="new_pwd">
                        <el-input v-model="ModifyPassword.new_pwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="re_pwd">
                        <el-input v-model="ModifyPassword.re_pwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

解释

1. 数据绑定：确保在模板中使用v-model时，绑定的属性名称与ModifyPassword对象中的属性名称一致。
2. 校验规则：修正了校验规则中的属性名称，确保与ModifyPassword对象中的属性名称一致。
3. 校验函数：确保校验函数checkNewAndOld逻辑正确，比较re_pwd和new_pwd是否一致。

通过以上修改，应该可以解决用户遇到的数据校验错误问题。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑