解决ElementUI动态表单校验验证不通过

最新推荐文章于 2024-01-17 14:01:11 发布

清风之上

最新推荐文章于 2024-01-17 14:01:11 发布

阅读量1.8k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_73288917/article/details/132226796

版权

文章描述了在Vue项目中使用ElementUI的El-Form进行动态渲染表单项时，添加验证规则后始终无法通过验证的问题。作者通过修改`prop`和`rules`属性解决了这个问题，确保了动态选择的班级选项在改变时能正确触发验证。

摘要由CSDN通过智能技术生成

这里记录一下，写项目时遇到的一个问题：就是动态渲染的表单项，加验证规则后一直不通过！！！

原代码

html部分：

     <el-form-item
            v-for="(teaclass,index) in addFom.classIds"
            :label="`班级${index+1}`"
            prop="classId"
          >
            <el-row :gutter="12">
              <el-col :span="12">
                <el-select v-model="teaclass.classId" placeholder="请选择">
                  <el-option
                    v-for="(item) in filterOptions[index]"
                    :label="item.className"
                    :value="item.classId"
                    :key="item.classId"
                  />
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitTake('ruleForm')">提交</el-button>
            <el-button @click="addClassId" :disabled="disabled">添加班级</el-button>
          </el-form-item>

js部分：

 return {
      tableData: [],
      teaName: '',
      page: 1,
      total: 0,
      pageSize: 12,
      classData: [],
      show: false,
      dra: false,
      direction: 'rtl',
      addFom: {
        teaName: '',
        teaSex: true,
        teaType: true,
        teaPhone: '',
        seniority: 0,
        classIds: [{}]
      },
      classAll: [],
      disabled: false,
      rules: {
        teaName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],
        teaSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        teaType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        teaPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入长度11位的大陆号码', trigger: 'blur' }
        ],
        seniority: [{ required: true, message: '请输入教龄', trigger: 'blur' }],
        classId: [{ required: true, message: '请选择班级', trigger: 'change' }]
      }
    }

结果：

可以看到，按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验不通过。

解决

修改prop、rules

     <el-form-item
            v-for="(teaclass,index) in addFom.classIds"
            :label="`班级${index+1}`"
            :prop="'classIds.'+ index + '.classId'"
            :rules="rules.NotEmpty"
          >
            <el-row :gutter="12">
              <el-col :span="12">
                <el-select v-model="teaclass.classId" placeholder="请选择">
                  <el-option
                    v-for="(item) in filterOptions[index]"
                    :label="item.className"
                    :value="item.classId"
                    :key="item.classId"
                  />
                </el-select>
              </el-col>
              <el-col :span="5">
                <el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/>
              </el-col>
            </el-row>
          </el-form-item>

    rules: {
        teaName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],
        teaSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        teaType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        teaPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入长度11位的大陆号码', trigger: 'blur' }
        ],
        seniority: [{ required: true, message: '请输入教龄', trigger: 'blur' }],
        NotEmpty: [{ required: true, message: '请选择班级', trigger: 'change' }]
      }

结果：