美文网首页
ElementUI表单回显自定义验证失败

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

作者: 小话梅噢 | 来源:发表于2019-04-23 11:52 被阅读0次

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

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

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

                  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

    相关文章

      网友评论

          本文标题:ElementUI表单回显自定义验证失败

          本文链接:https://www.haomeiwen.com/subject/twxvgqtx.html