element-ui 表单验证时规则对象二级验证失效 - 记录贴(已解决)

最新推荐文章于 2024-10-19 06:38:39 发布

AlexKain

最新推荐文章于 2024-10-19 06:38:39 发布

阅读量441

点赞数

文章标签：表单验证

本文链接：https://blog.csdn.net/webfullstack/article/details/81117001

版权

element-ui 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个表单验证失败的问题及解决方法。问题在于验证规则与表单元素的属性不匹配导致验证无法通过。通过调整验证规则中的键名与表单元素的属性保持一致，解决了验证失败的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方法
页面DOM对应元素中prop修改为 prop=”address.detlAddrMemo”;
rules中的键值改为”address.detlAddrMemo”

失败的案例

验证规则

rules: {
        detlAddrMemo: {
          required: true,
          message: "请输入门店编号",
          trigger: "blur"
        },

   }

表单

<el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" v-show="step.active==0">
        <div class="form-group">
          <div class="form-group-left">
            <el-form-item label="门店编号" prop="detlAddrMemo">
              <el-input v-model="form.address.detlAddrMemo" :disabled="!isEdit" placeholder="门店编号"></el-input>
            </el-form-item>
          </div>
     </div>
<el-form>

表单数据

form: {
        address: {
          id: "1",
          provId: "",
          cityId: "",
          detlAddrDesc: "",
          detlAddrMemo: "",
          cityCode: "",
          telephoneNum: "",
          geoMapLgttude: "",
          geoMapLattdue: ""
        },
 }

应为验证规则比对不上,所以会导致验证失败

修改之后

rules: {
        'address.detlAddrMemo': {
          required: true,
          message: "请输入门店编号",
          trigger: "blur"
        },

   }

表单

<el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" v-show="step.active==0">
        <div class="form-group">
          <div class="form-group-left">
            <el-form-item label="门店编号" prop="address.detlAddrMemo">
              <el-input v-model="form.address.detlAddrMemo" :disabled="!isEdit" placeholder="门店编号"></el-input>
            </el-form-item>
          </div>
     </div>
<el-form>

表单数据

form: {
        address: {
          id: "1",
          provId: "",
          cityId: "",
          detlAddrDesc: "",
          detlAddrMemo: "",
          cityCode: "",
          telephoneNum: "",
          geoMapLgttude: "",
          geoMapLattdue: ""
        },
 }