ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？

Element UI 表单动态for循环验证

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、普通的表单验证

1.表单验证的目的是在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
2.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
3.通过给表单绑定ref属性，在保存方法中配合validate回调函数，即可在表单提交时触发回调函数，继而弹出消息提醒用户。

二、动态for循环表单验证

代码示例：

    <template>
  <div style="width:100%;height:100%;" id="ManualAddId">
    <div class="el-table el-table--fit el-table--border el-table--enable-row-transition">
      <el-form style="width: 100%;" size="medium" :model="formInfo" ref="form" :rules="rules">
        <div v-for="(item,index) in formInfo.processData" :key="index">
          <table class="el-table__header" id="perCrudID" style="width: 100%;" cellspacing="0" cellpadding="0"
                 border="0">
            <tr class="el-table__row">
              <td class="col-th">
                <div class="cell">设备序列号</div>
              </td>
              <td colspan="2">
                <el-form-item :prop="'processData.'+index+'.devNum'" :rules="rules.devNum">
                  <el-input placeholder="请输入设备序列号" class="addinput" v-model="item.devNum">
                  </el-input>
                </el-form-item>
              </td>
              <td class="col-th">
                <div class="cell">设备位置</div>
              </td>
              <td colspan="2">
                <el-form-item :prop="'processData.'+index+'.location'" :rules="rules.location">
                  <el-input placeholder="请输入设备序列号" class="addinput" v-model="item.location">
                  </el-input>
                </el-form-item>
              </td>
              <td class="col-th">
                <div class="cell">设备名称</div>
              </td>
              <td colspan="2">
                <el-form-item :prop="'processData.'+index+'.name'" :rules="rules.name">
                  <el-input placeholder="请输入设备序列号" class="addinput" v-model="item.name">
                  </el-input>
                </el-form-item>
              </td>
              <td>
                <div class="cell">
                  <el-button size="mini" type="danger" @click="deleteMethod(index)">删除</el-button>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-form>
    </div>
    <div class="butClass">
      <el-button size="medium" type="primary" @click="addMethod">增加循环数组</el-button>
      <el-button size="medium" type="primary" @click="submitForm('form')">保存</el-button>
      <el-button size="medium" type="plain" @click="cancelMethod">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkdevNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('设备序列号不能为空！'));
      } else {
        if (value.length > 30) {
          callback(new Error('输入内容长度不能大于30个字符！'));
        } else {
          callback();
        }
      }
    };
    var checkdevType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('设备位置不能为空！'));
      } else {
        if (value.length > 30) {
          callback(new Error('输入内容长度不能大于30个字符！'));
        } else {
          callback();
        }
      }
    };
    var checkdevLocation = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('设备名称不能为空！'));
      } else {
        if (value.length > 30) {
          callback(new Error('输入内容长度不能大于30个字符！'));
        } else {
          callback();
        }
      }
    };
    return {
      rules: {
        devNum: [{
          validator: checkdevNum,
          trigger: 'blur'
        }],
        location: [{
          validator: checkdevType,
          trigger: 'change'
        }],
        name: [{
          validator: checkdevLocation,
          trigger: 'change'
        }],
      },
      formInfo: {
        processData: [{
          devNum: '',
          location: '',
          name: '',
        }],
      }
    }
  },
  mounted() {
  },

  methods: {
    addMethod() {
      this.formInfo.processData.push({
        devNum: '',
        location: '',
        name: '',
      })
    },
    deleteMethod(index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formInfo.processData.splice(index, 1)
      }).catch(() => {
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.cell {
  font-weight: bold;
  text-align: center;
  border-collapse: collapse;
}
.el-table td,
.el-table th {
  padding: 8px 8px;
}
.butClass {
  margin: 0.5% 0 0.5% 0;
  text-align: center;
}
</style>
<style>
#ManualAddId .el-form-item {
  margin-bottom: 8px;
}
</style>

2.效果展示

总结

觉得有帮助的随机发挥