0
点赞
收藏
分享

微信扫一扫

elementUI表单验证遇到的问题

生活记录馆 2024-03-08 阅读 14

1.同一个addForm表单,同样的验证规则,有的输入框在没填写时能够显示红色,有的却毫无反应

解决方案:去elementUI官网看了一下验证表单的规则及属性,第一句就写

关键在prop这个属性,表单域没写prop属性,像是我能干出来的事,每次隔很久不干活就会忘记一些属性的作用,老想删除 (见不得一点冗余代码,bushi)

<el-form :model="addForm" :rules="rules" ref="addForm" label-width="85px">
                <el-form-item label="值班辖区:" prop="dutyArea">
                  <el-select
                    style="width: 60%"
                    clearable
                    v-model="addForm.dutyArea"
                    placeholder="请选择值班辖区"
                  >
                    <el-option
                    v-for="dict in dict.type.maintain_fault_area"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="值班人员" prop="dutyPersonName">
                  <el-select v-model="addForm.dutyPersonName" filterable placeholder="请选择值班人员" style="width: 60%"  @change="handchange($event)">
                      <el-option
                          v-for = "item in dutyUserList"
                          :label="item.nickName"
                          :value='{personName:item.nickName,personId:item.userId}'>
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="值班时间" prop="dutyTime">
                  <el-input v-model="addForm.dutyTime" style="width: 60%" :disabled="true"></el-input>
                </el-form-item>
                
                <el-form-item label="是否备班:" prop="prepareClass">
                  <el-select
                    style="width: 60%"
                    clearable
                    v-model="addForm.prepareClass"
                    placeholder="请选择备班状态"
                  >
                    <el-option
                    v-for="dict in dict.type.maintain_fault_prepare_class"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div class="demo-drawer__footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submit"> 确定 </el-button>
              </div>
            </div>
          </el-drawer>
        

        补充两点: a.值班时间设置默认读取点击进来的日历时间,所以不需要选择,禁用掉!

b.下拉选框设为默认选项:在data() 函数中直接设addform属性数据为1没有生效,想到了在重置按钮中再次加强一遍

// 单日添加(失败)
      addForm: {
        dutyClass: "",
        dutyPersonName: "",
        dutyArea: "",
        dutyType: "",
        dutyTime: "",
        prepareClass: '0',
      },
// 表单重置(成功)
    reset() {
      this.addForm = {
        id: null,
        dutyTime: this.hanleDay.day,
        dutyPerson: null,
        dutyPersonName: null,
        dutyArea: null,
        dutyClass: null,
        dutyType: null,
        prepareClass: '1',
      };
      this.resetForm("form");
    },

2.表单验证第一次进去时不显示警告,但是第二次刚进去即使没有操作也会全部红色报错

解决方案:一开始怀疑是表单验证的触发方式有问题,试了几种解决方案

a.

rules:{

        dutyPersonName:[{ required: true, message: "请输入值班人员姓名" ,trigger: 'click'}],

        dutyArea:[{ required: true, message: "请输入值班辖区" ,trigger: 'click'}],

        dutyClass:[{ required: true, message: "请输入值班班次" ,trigger: 'click'}],

        dutyType:[{ required: true, message: "请输入业务类型" ,trigger: 'click'}],

      },

手动设置触发方式为 click,这是我从Popover弹出框组件借鉴的(无用)

b.借鉴前面的代码片段,改为 { required: true, message: "请输入质保期", trigger: "blur" },(无用)

c.考虑从生命周期的钩子函数显示表单验证的触发方式

mounted() {

    this.$nextTick(() => {

      this.$refs.addForm.validate();

    });

  },(无用且不知道为什么没有,看起来很符合逻辑啊?)

d.最终借鉴网友的经验解决

addSingleWork() {
      this.reset()
      this.innerDrawer = true;
      if (this.$refs.addForm)
        this.$refs.addForm.resetFields();
    },

 

举报

相关推荐

0 条评论