element ui使用父子表单校验rules

element 父子表单校验,el-form表单嵌套时如何进行rule验证? element ui

正常版

项目中有个需求是父子表单嵌套,遇到了个问题是点击提交按钮时不会验证rules的规则

出现这个问题的原因是表单的ref设置错误,而且在submitForm方法中需要对所有的表单项进行验证

表单页面:

最外层的el-form不要指定ref,子表单需要设置ref

<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
<el-form :model="form" label-width="100px" size="small">
  <!--        基本信息-->
  <el-form ref="baseInfoForm" :model="form">
    <el-form-item :rules="rules.ratedName" prop="ratedName" label="业务主题">
      <el-input v-model="form.ratedName" placeholder="请输入业务主题" clearable></el-input>
    </el-form-item>
  </el-form>
  <!--        表单二-->
  <el-form ref="cllbForm" l :model="form">
    材料列表
  </el-form>
  <!--        表单三-->
  <el-form ref="zxjgForm" :model="form">
  </el-form>
  <!--        表单四-->
  <el-form ref="hpscForm" :model="form">
    <el-form-item :rules="rules.result" label-width="120px" label="技术咨询结果" prop="result">
      <el-input v-model="form.result" placeholder="请输入结果" clearable></el-input>
    </el-form-item>
  </el-form>
  <!--        表单五-->
  <el-form ref="hpshForm" :model="form">
  </el-form>
<el-form-item size="large">
     <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>

数据定义

// 定义表单
forms: ['baseInfoForm', 'cllbForm', 'zxjgForm', 'hpscForm', 'hpshForm'],
  rules:{
  ratedName: [
    {required: true, message: "事项名称不能为空", trigger: "blur"}
  ],
    result:
  [
    {required: true, message: "结果不能为空", trigger: "blur"}]
},
/** 提交按钮 */
submitForm(){
  Promise.all(this.forms.map(form => this.$refs[form].validate()))
    .then(r => {
// 要执行的逻辑
    })
}
,

chatGPT版

当在Vue.js项目中处理嵌套表单时，正确处理表单引用（ref）并确保适当的验证规则非常重要。我注意到在您的代码中有一个问题，即 ref没有设置正确，导致了验证问题。让我们深入了解一下改进的地方。

表单结构：

<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
  <el-form :model="form" label-width="100px" size="small">
    <!-- 基本信息表单 -->
    <el-form ref="baseInfoForm" :model="form">
      <el-form-item :rules="rules.ratedName" prop="ratedName" label="业务主题">
        <el-input v-model="form.ratedName" placeholder="请输入业务主题" clearable></el-input>
      </el-form-item>
    </el-form>

    <!-- 其他嵌套表单 -->
    <!-- el-form ref="cllbForm" ... -->
    <!-- el-form ref="zxjgForm" ... -->
    <!-- el-form ref="hpscForm" ... -->
    <!-- el-form ref="hpshForm" ... -->

    <!-- 提交按钮 -->
    <el-form-item size="large">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

数据定义：

data() {
  return {
    form: {},  // 您的表单数据对象
    forms: ['baseInfoForm', 'cllbForm', 'zxjgForm', 'hpscForm', 'hpshForm'],
    rules: {
      ratedName: [{ required: true, message: "事项名称不能为空", trigger: "blur" }],
      result: [{ required: true, message: "结果不能为空", trigger: "blur" }]
    },
  };
},
methods: {
  /** 提交按钮点击处理程序 */
  submitForm() {
    Promise.all(this.forms.map(form => this.$refs[form].validate()))
      .then(results => {
        // 在验证后执行的逻辑
        if (results.every(result => result)) {
          // 所有表单都有效，继续执行您的逻辑
        } else {
          // 处理验证错误
        }
      });
  },
  // 其他方法...
}

总结：

• 确保为每个表单正确分配 ref。
• 对嵌套表单使用一致且简洁的结构。
• submitForm方法现在正确处理表单验证，并根据验证结果执行逻辑。

通过遵循这些改进，您应该能够更有条理和功能性地处理Vue.js项目中嵌套表单及其验证。