表单自定义验证

2023-03-04 19:54:21 来源:网络

表单自定义验证

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

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

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

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

              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

免责声明:内容来自网络,若侵犯您的权利,请在一个月内通知我们,会及时删除

@轻流