前端分页：非当前页进行表单验证

概览

对于大数据量批量导入，渲染到表格的场景中，可能会造成浏览器崩溃，此时前端分页可以很好地解决这个问题，但是组件库自带的表单验证通常只能进行当前页的验证，如何实现对全量数据的表单验证呢？此篇文章来梳理解决

一. 完整代码示例

<template>
  <el-form :model="dataForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <table border>
      <thead>
        <tr>
          <th>#</th>
          <th><span class="requiredLabel">姓名</span></th>
          <th><span class="requiredLabel">年龄</span></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentPageData" :key="index">
          <td>{
   
   {
   
    index + (currentPage - 1) * pageSize + 1 }}</td>
          <td>
            <el-form-item
              :prop="'details.' + (index + (currentPage - 1) * pageSize) + '.name'"
              :rules="rules.name"
              :key="'details.' + (index + (currentPage - 1) * pageSize) + '.name'"
            >
              <el-input
                v-model="item.name"
                placeholder="请输入姓名"
                clearable
              ></el-input>
            </el-form-item>
          </td>
          <td>
            <el-form-item
              :prop="'details.' + (index + (currentPage - 1) * pageSize) + '.age'"
              :rules="rules.age"
              :key="'details.' + (index + (currentPage - 1) * pageSize) + '.age'"
            >
              <el-input
                v-model="item.age"
                placeholder="请输入年龄"
                clearable
                type="number"
              ></el-input>
            </el-form-item>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <el-button @click="prevPage" :disabled="currentPage === 1">上一页</el-button>
      <el-button @click="nextPage" :disabled="currentPage === Math.ceil(totalCount / pageSize)"
        >下一页</el-button
      >
    </div>
    <el-button @click="handleCreate">立即创建</el-button>
  </el-form>
</template>

<script setup>
  import {
   
    reactive, ref, computed,nextTick } from 'vue';
  import AsyncValidator from 'async-validator';

  const dataForm = reactive({
   
   
    details: Array.from({
   
    length: 20 }, (_, i) => ({
   
    name: '', age: null })),
  });

  const rules = {
   
   
    name: [{
   
    required: true, message: '请输入姓名', trigger: 'blur' }],
    age: [{
   
    required: true, message: '请输入年龄', trigger: 'blur'}],
  };

  const currentPage = ref(1);
  const pageSize = ref(5);
  const totalCount = ref(dataForm.details.length);
  const ruleForm = ref(null);

  const currentPageData = computed(() => {
   
   
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return dataForm.details.slice(start, end);
  });

  const schemaValidator = (item) => {
   
   
    const schema = new AsyncValidator(rules);
    return schema
      .validate(item, {
   
    firstFields: true })
      .then((res) => {
   
   
        console.log(res, 'then res');
        return true;
      })
      .catch(({
    
     errors }) => {
   
   
        return false;
      });
  };

  const handleCreate = async () => {
   
   
    const fields = {
   
   
      name: {
   
   
        rules,
        validate: schemaValidator,
      },
    };
    for (let i = 1; i < dataForm.details.length; i++) {
   
   
      const item = dataForm.details[i];
      let allValid = true; // 假设当前 item 的所有字段都有效
      for (const key in item) {
   
   
        if (fields[key]) {
   
   
          try {
   
   
            if (!(await fields[key].validate(item))) {
   
   
              currentPage.value = Math.floor((i+1)/pageSize.value) + 1;
              allValid