vue2 + element-ui 表单校验

          <el-form-item
            v-if="editForm.data.category.properties"
            :key="item.id"
            :label="item.property_name"
            :rules="item.required ?
              [{ required: true, message: '必填', trigger: ['blur','change'] }] : []
            "
            label-width="180px"
          >
            <template v-if="item.type == 'select' ">
              <el-row>
                <el-col :span="12">
                  <el-select
                    v-model="item.value"
                    filterable
                    remote
                    clearable
                  >
                    <el-option
                      v-for="subitem in item.options"
                      :key="subitem.id"
                      :label="subitem.name"
                      :value="subitem.value"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </template>
            <template v-if="item.type == 'multi_select' ">
              <el-col :span="11">
                <el-select
                  v-model="item.value"
                  filterable
                  multiple
                  remote
                  reserve-keyword
                  clearable
                >
                  <el-option
                    v-for="subitem in item.options"
                    :key="subitem.id"
                    :label="subitem.name"
                    :value="subitem.value"
                  />
                </el-select>
              </el-col>
            </template>
            <template v-if="item.type == 'text' ">
              <el-col :span="11">
                <el-input v-model="item.value" />
              </el-col>
            </template>
          </el-form-item>
        </el-row>

请问一下各位同志请问像这种情况要怎么进行表单校验,需要根据后台获取到的接口数据进行特定字段的表单校验,不同的数据校验的内容不同,我现在遇到的问题是我试过这样写

       <el-form-item
            v-if="editForm.data.category.properties"
            :key="item.id"
           :prop="`properties.` + index + `.value` "
            :label="item.property_name"
            :rules="item.required ?
              [{ required: true, message: '必填', trigger: ['blur','change'] }] : []
            "
            label-width="180px"
         / >

但是没有用,还是无法校验字段,比如说根据我的校验规则,按理来说应该是失去焦点或改变值就会触发校验的,但是校验并没有触发,感谢

要是数组对象这种就给按照这种去对应

<el-col :span="12" v-for="(item,index) in form.productParameters">
                                    <el-form :model="item" ref="formList" label-width="180px">
                                        <el-form-item :label="item.name" prop="paramValue"
                                            :rules="item.isKey=='true' ? [ { required: true, message: item.name+'不能为空', trigger: ['blur','change'] }] :[]">
                                            <el-input v-model="item.paramValue" style="width:100%">
                                            </el-input>
                                        
                                        </el-form-item>
                                    </el-form>
                                </el-col>

```

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7686200
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue element-ui 表单验证 第一次表单验证的结果，在第二次表单验证时仍然存在（需要清除上一次的验证结果）
  • 除此之外, 这篇博客: Vue + Element UI 实现权限管理系统：页面权限控制（菜单 + 按钮）中的 根据为不同角色分配相应的资源进行展示不同的导航菜单 以及按钮形式。角色分配的有哪些菜单或者按钮，页面显示出相应的菜单或者按钮。（只解释前端部分，以及数据结构样式，可让后端根据数据结构进行处理数据。） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 数据结构例子：
    在这里插入图片描述

  • 您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui结合脚手架使用之全部引入小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    针对这个问题，可以在表单元素上添加自定义校验规则（validate自定义校验规则），在规则函数中根据后台返回的数据进行特定字段的校验。具体步骤如下：

    1. 在表单元素上添加自定义校验规则。例如，要对“用户名”这个输入框进行校验，可以在el-form-item中添加prop属性为“username”的表单项，然后在该表单项上添加自定义校验规则。
    <el-form-item label="用户名" prop="username">
  <el-input v-model="username" placeholder="请输入用户名"></el-input>
</el-form-item>

    export default {
  data() {
    return {
      username: '',
    };
  },
  methods: {
    validateUsername(rule, value, callback) {
      //根据后台返回的数据进行校验
      let errorMsg = '';
      //假设后台返回的数据中，username字段不能为空
      if (!value) {
        errorMsg = '用户名不能为空';
      }
      if (errorMsg) {
        callback(new Error(errorMsg));
      } else {
        callback();
      }
    },

    //提交表单，调用el-form的validate方法
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log("表单校验通过");
          //表单校验通过，可以提交表单数据
        } else {
          console.log("表单校验不通过");
          return false;
        }
      });
    },
  },
};

    1. 在规则函数validateUsername中根据后台返回的数据进行特定字段的校验，例如判断“用户名”字段是否为空。如果为空，则提示错误信息；否则返回true。

    2. 在el-form中调用validate方法进行表单校验，如果校验通过，则可以提交表单数据。如果校验不通过，则提示错误信息。