当前位置：首页 > news >正文

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

news 2024/10/28 17:59:54

概览

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

一. 完整代码示例

<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-inputv-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-inputv-model="item.age"placeholder="请输入年龄"clearabletype="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 = false;break; // 跳出内层循环}} catch (error) {allValid = false;break; // 跳出内层循环，并在发生错误时也视为验证失败}}}if (!allValid) {break; // 跳出外层循环}}await nextTick();ruleForm.value.validate((valid) => {console.log(valid,'valid123456')if (valid) {console.log('表单验证通过');// 处理表单提交逻辑} else {console.log('表单验证失败');return false;}});};const prevPage = () => {if (currentPage.value > 1) currentPage.value--;};const nextPage = () => {if (currentPage.value < Math.ceil(totalCount.value / pageSize.value)) currentPage.value++;};
</script><style lang="scss" scoped>/* 添加您的样式 */
</style>

可以直观运行感受下

二. 解决思路梳理

整体实现思路：

校验时，获取第一个不符合校验项的下标；
根据下标，找到对应不符合项的页码；
切换当前页码至不符合项的页码；
进行表单验证

此时的难点在于如何获取不符合项的页码

需要借助async-validator库的使用，这里着重讲下，相关代码如下

  import AsyncValidator from 'async-validator';const rules = {name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],age: [{ required: true, message: '请输入年龄', trigger: 'blur'}],};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 = false;break; // 跳出内层循环}} catch (error) {allValid = false;break; // 跳出内层循环，并在发生错误时也视为验证失败}}}if (!allValid) {break; // 跳出外层循环}}await nextTick();ruleForm.value.validate((valid) => {if (valid) {console.log('表单验证通过');// 处理表单提交逻辑} else {console.log('表单验证失败');return false;}});};

需要进行两层的循环遍历，第一层是全部的数据，第二层是校验规则，在全部的数据里面根据校验规则进行筛选，主要如下：

遍历全部数据，根据校验规则，获取到全部数据中子项中有校验的字段；
调用validate进行校验，获取全部数据中子项中第一个不符合校验的下标值；

async-validator的作用主要是什么？

可以根据校验规则，来进行是否符合校验判断，并返回布尔值。

三. 循环中退出

有两种写法：
第一种：增加变量，break退出

const getWrapperInnerData = async () => {for (let i = 0; i < propsDetails.length; i++) {const item = propsDetails[i];let valid = true;for (const key in item) {if (fields[key]) {if (!(await validateName(item.index).catch(() => false))) {console.log(item.index);valid = false;break;}}}if (!valid) {break;}}
};

第二种：return 退出

const getWrapperInnerData = async () => {for (let i = 0; i < propsDetails.length; i++) {const item = propsDetails[i];for (const key in item) {if (fields[key]) {if (!(await validateName(item.index).catch(() => false))) {console.log(item.index);return false;}}}}
};