ElementUI表单回显自定义验证失败

发布网友发布时间：2023-05-05 17:33

共1个回答

热心网友时间：2023-10-09 18:43

当一个表单存在回显的情况下，使用自定义验证的时候发生错误。

主要表现是，只验证赋的初值。也就是说无论后续输入什么值，验证的时候都是用回显的值做的校验。

发生这种错误的情况，是因为你如下做了回显赋值。

this.addData.cpu = this.addData.spec.cpu;

想要成功验证，请如下赋值

this.addData = {

cpu:this.addData.spec.cpu

}

还有一种情况是，校验延迟，是因为作为密码的显示的值有问题，如addData.login是父组件传值，这个传值存在问题。

<el-col :span="24">

<el-form-item label="登录方式：">

<el-radio-group v-model="addData.login" @change="chooseLoginWay">

<el-radio :label="item.name" :key="index" v-for="(item, index) in loginWays" border> {{item.name}}</el-radio>

</el-radio-group>

</el-form-item>

</el-col>

<el-col :span="12" v-if="addData.login == '密码'">

<cmp-form-item label="登录密码：" prop="password" validate="required,hostPassword" required-message="该字段为必填字段">

<el-input type="password" v-model="addData.password"></el-input>

</cmp-form-item>

</el-col>

<el-col :span="12" v-if="addData.login == '密码'">

<cmp-form-item label="确认密码：" prop="endPassword" validate="required" required-message="该字段为必填字段">

<el-input type="password" v-model="addData.endPassword"></el-input>

</cmp-form-item>

</el-col>

这个错误发生的原因不详，虽然第二种赋值比较麻烦，展示没找到更优的解决办法QWQ