1.在Vant的用表基础上实现添加表单验证框架的方法示例
2.VXETable 中嵌套 ElementPlus Form 导致的表单校验问题分析与解决

在Vant的基础上实现添加表单验证框架的方法示例

       Vant 一套基于Vue的移动端UI框架，有赞出品。单验单验

       因为UI设计的证框证原够漂亮，源码结构也比较清晰，架源插件定位也比较明确，码表重要是用表武汉孕妇溯源码燕窝在哪买实战过程中的使用体验不错。在最近的单验单验项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的证框证原地方。例如它不内置表单验证，架源接下来，码表我把自己实现验证框架的用表思路分享出来。

       分析需求

       我们找的单验单验插件主要能解决以下问题

       支持中文 适应UI框架 分组验证 动态验证（数据动态，规则动态）

       去网络上搜索了一些框架，证框证原推荐两款（在官方也有推.vuejs.org/v2/cookbook/form-validation.html ）

       vuelidate vee-validate

       我的架源项目里使用的是 vee-validate

       解决问题

       安装及支持中文

       npm install vee-validate --saveimport VeeValidate, { Validator } from 'vee-validate'import zh_CN from 'vee-validate/dist/locale/zh_CN';Validator.localize('zh_CN', zh_CN)Vue.use(VeeValidate)

       中文问题可以解决，但是码表遇到个很恶心的问题，这样的错误提示会变成 title不能为空 这样的提示，实际展示效果是不好的。

       所以这个需要重构下，自己来实现错误提示的内容

       const formatFileSize = function (size) { let units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; let threshold = ; size = Number(size) * threshold; let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold)); return (((size / Math.pow(threshold, i)).toFixed(2) * 1) + " " + (units[i]));}Validator.localize('zh_CN', { name: 'zh_CN', attributes: { } messages: { _default: () => `${ fieldName}无效`, after: (field, [target]) => `${ fieldName}必须在${ target}之后`, alpha_dash: () => `${ fieldName}能够包含字母数字字符、破折号和下划线`, alpha_num: () => `${ fieldName}只能包含字母数字字符`, alpha_spaces: () => `${ fieldName}只能包含字母字符和空格`, alpha: () => `${ fieldName}只能包含字母字符`, before: (field, [target]) => `${ fieldName}必须在${ target}之前`, between: (field, [min, max]) => `${ fieldName}必须在${ min}与${ max}之间`, confirmed: (field, [confirmedField]) => `${ fieldName}不能和${ confirmedField}匹配`, credit_card: () => `${ fieldName}格式错误`, date_between: (field, [min, max]) => `${ fieldName}必须在${ min}和${ max}之间`, date_format: (field, [format]) => `${ fieldName}必须符合${ format}格式`, decimal: (field, [decimals = '*'] = []) => `${ fieldName}必须是数字，且能够保留${ decimals === '*' ?源码怎么接 '' : decimals}位小数`, digits: (field, [length]) => `${ fieldName}必须是数字，且精确到${ length}位数`, dimensions: (field, [width, height]) => `${ fieldName}必须在${ width}像素与${ height}像素之间`, email: () => `${ fieldName}不是一个有效的邮箱`, ext: () => `${ fieldName}不是一个有效的文件`, image: () => `${ fieldName}不是一张有效的`, included: () => `${ fieldName}不是一个有效值`, integer: () => `${ fieldName}必须是整数`, ip: () => `${ fieldName}不是一个有效的地址`, length: (field, [length, max]) => { if (max) { return `${ fieldName}长度必须在${ length}到${ max}之间` } return `${ fieldName}长度必须为${ length}` }, max: (field, [length]) => `${ fieldName}不能超过${ length}个字符`, max_value: (field, [max]) => `${ fieldName}必须小于或等于${ max}`, mimes: () => `${ fieldName}不是一个有效的文件类型`, min: (field, [length]) => `${ fieldName}必须至少有${ length}个字符`, min_value: (field, [min]) => `${ fieldName}必须大于或等于${ min}`, excluded: () => `${ fieldName}不是一个有效值`, numeric: () => `${ fieldName}只能包含数字字符`, regex: () => `${ fieldName}格式无效`, required: () => `${ fieldName}不能为空`, size: (field, [size]) => `${ fieldName}必须小于${ formatFileSize(size)}`, url: () => `${ fieldName}不是一个有效的url` }})Vue.use(VeeValidate)

       适应UI框架

       虽然Vant没有内置验证框架，但提供了错误的样式。

       <van-field :error="." :error-message="."/>

       用 vee-validate 可以这样解决

       <van-field . name="title" v-validate="'required|max:'" :error="errors.has('title')" :error-message="errors.first('title')"/>this.$validator.validateAll().then((result) => { if(result){ // . }})

       分组验证

       <van-field name="title" data-vv-scope="group-1" v-validate="'required|max:'" :error="errors.has('group-1.title')" :error-message="errors.first('group-1.title')"/>this.$validator.validateAll('group-1').then((result) => { if(result){ // . }})

       如此，基于 Vant 的验证框架问题就得以解决了，可以愉快的玩耍表单验证了。

VXETable 中嵌套 ElementPlus Form 导致的表单校验问题分析与解决

       在 Vue 3 业务中，当使用 VXETable 这个虚拟滚动表格组件并嵌套 ElementPlus 的 Form 表单时，可能会遇到表单校验不正确的问题。业务需求是在表格中嵌套表单，用于展示和修改数据。系统前端源码如果直接使用 ElementPlus 的 Table 组件一次性渲染全部元素，会导致需要绑定的事件数量过大（例如 * 6 = ），从而影响用户体验。为了解决这个问题，引入了虚拟滚动，以避免一次性渲染全部元素，从而实现性能优化。

       ElementPlus 的 Table 组件不支持虚拟滚动，而 TableV2 组件仍在测试中，因此我们选择了 VXETable。智慧矿山源码然而，在实际使用过程中，发现表单校验并不如预期。点击“新增一行”按钮后，新添加的行能正常显示提示信息，但此时提交时无法通过校验。滚动页面后，再点击“提交”按钮，校验通过。这与期望表现不符，键码转换源码提示可能存在与虚拟滚动功能相关的问题。

       通过控制变量和分析，很容易确认问题根源在于 VXETable 的虚拟滚动功能。关闭虚拟滚动（通过设置 scroll-y 属性为 false）后，可以看到性能显著提升，且滚动后点击“提交”按钮仍无法通过校验。对比使用标准的 ElTable 组件时的情况，关闭虚拟滚动后性能更为明显，同样存在滚动后校验不通过的问题。这证实了问题与虚拟滚动功能直接相关。

       虚拟滚动的核心目的是减少元素渲染，从而提高性能。开启虚拟滚动后，VXETable 只渲染了部分数据，而 ElementPlus 的表单校验机制似乎只针对渲染出的数据进行验证。这意味着，即使数据被添加或修改，如果它们没有被渲染出来，校验过程可能不会检测到这些变化，从而导致校验不通过。

       通过深入分析 ElementPlus 的源码，我们发现 ElForm 实例上的 validate 方法直接返回了 validateField 方法的调用结果。validateField 方法进一步调用 doValidateField 方法获取验证结果。doValidateField 方法调用 obtainValidateFields 方法获取需要校验的字段。在 obtainValidateFields 方法中，通过 filterFields 方法过滤掉不需要校验的字段。最终，我们发现，当使用虚拟滚动时，props 参数传递给 filterFields 方法后变为一个空数组，导致所有字段被过滤掉，因此校验只针对渲染的数据。

       解决这个问题的方法是手动跑一次校验，例如在新增数据后立即执行校验逻辑。为了优化用户体验，可以考虑在虚拟滚动实现中添加滚动到对应行的逻辑，这样用户可以直接看到并理解错误信息。这不仅解决了校验不通过的问题，还提升了用户的互动体验。

       在调试这个问题时，需要考虑多个因素，包括问题的抽象和简化、虚拟滚动原理的理解、关联元素与校验机制的关联以及优化用户体验的方法。解决这个问题的关键在于明确校验机制的工作原理，并在虚拟滚动的上下文中调整校验流程，确保所有数据都能被正确验证。

       希望本文能为遇到类似问题的开发者提供一些启发和解决方案。