elementUI-表单验证踩坑记录

最新推荐文章于 2023-10-31 17:33:55 发布

qq_27449993

最新推荐文章于 2023-10-31 17:33:55 发布

阅读量461

点赞数

分类专栏：前端 vue 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_27449993/article/details/111072502

版权

本文详细记录了使用Element UI进行表单验证时遇到的问题及解决方法，包括简单表单验证中:model对象的要求，prop与v-model的一致性，以及如何在保存数据时验证表单。对于复杂表单，如对象数组的验证，文章提到了prop的特殊写法，以及验证单个字段和整个表单的方法。

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

简单表单验证：

:model必须是对象，否则报错。
<el-form-item prop="shareTitle">中的prop必须和<el-input>这个的v-model一致否则不能验证。

 <el-form :model="jcData" ref="activeInfo" :rules="rules">
 <el-form-item prop="shareTitle">
              <el-input
                class="inputWith"
                v-model="jcData.shareTitle"
                placeholder=""
              ></el-input>
            </el-form-item>
</el-from>

  
rules: {
        activeName: fromValidator.setLenName(2, 32, "活动名称"),
        activeTime: {
          type: "array",
          required: false,
          message: "请选择日期区间",
          fields: {
            //tpye类型试情况而定,所以如果返回的是date就改成date
            0: { type: "string", required: true, message: "请选择开始日期" },
            1: { type: "