动态表单校验

单个的表单域上传递属性的验证规则

记录一次动态表单嵌套动态表单，前端必填校验的问题。

之前没怎么写过前端代码，看文档也不够仔细~~按常规方法写完页面之后，测试发现校验都加上去了，但是填写内容之后校验也一直在，并且添加的中文校验提示没生效，一直是英文的提示。

页面大致长下面这样~~可以添加多个问题，问题可以添加多个选项。

 已经不记得最开始写的是啥样的代码了，把最后结果放上来记录下吧~

有需要的朋友可以参考！

<div class="info-wrap">
    <div class="info-title">
      <span>问卷问题</span>
    </div>
    <div class="info-content">
      <el-form :model="questionForm" ref="questionForm" label-width="130px">
            <div v-for="(item, index) in questionForm.question" :key="index">
                  <el-form-item label="问题描述" :prop="'question.'+index+ '.surveyQuestion.question'" :rules="{required: true, message: '问题描述不能为空', trigger: 'blur'}">
                    <el-input v-model="item.surveyQuestion.question" placeholder="请输入问题描述" type="textarea" maxlength="100" show-word-limit autosiz></el-input>
                  </el-form-item>
                      <el-form-item prop="optionList" v-if="item.surveyQuestion.questionType==0 ||item.surveyQuestion.questionType==1">
                        <el-button type="primary" @click="addOption(index)">添加选项</el-button>
                      </el-form-item>
                  <template v-if="item.surveyQuestion.questionType==0 || item.surveyQuestion.questionType==1">
                    <div v-for="(nestedItem, nestedIndex) in item.optionList" :key="nestedIndex">
                      <el-form-item :label='"选项"+(nestedIndex+1)' :prop="'questionVOS.'+index+ '.optionList.' + nestedIndex+'.optionContent'"
                        :rules="{required: true, message: '选项描述不能为空', trigger: 'blur'}">
                        <div style="display: flex; align-items: center;">
                          <el-input type="textarea" maxlength="100" show-word-limit autosize v-model="nestedItem.optionContent" placeholder="请输入问题选项" style="width: 60%">
                          </el-input>
                          <el-button @click="removeOption(index,nestedIndex)" size="mini" icon="el-icon-delete" type="danger" circle style="float: right; margin: 10px" />
                        </div>
                      </el-form-item>
                    </div>
                  </template>
            </div>
       </el-form>
   </div>
</div>

参考vue官方文档，主要需要关注的点已经标记出来。

提交校验

由于我在一个页面用了两个form表单，this.$refs[formName].validate((valid) => {}）方法，不能添加两个表单名，提交校验的时候直接用，前端小白也稍折腾了下~~

在此记录下！

解决办法如下：

    submitForm() {
      const baseFormCheck = new Promise((resolve, reject) => {
        this.$refs["baseForm"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      const questionFormCheck = new Promise((resolve, reject) => {
        this.$refs["questionForm"].validate(valid => {
          if (valid) {
            resolve();
          }
        });
      });
      Promise.all([baseFormCheck, questionFormCheck]).then(() => {
        console.log("开始提交")
      }).catch(err => {
        console.log("校验报错")
      })
    },