feat: ✨ Form 表单 validate 方法支持传入数组#829
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述演练此次更改主要关注表单组件的验证功能增强。文档和代码同步更新，支持对表单字段进行更灵活的验证。 变更
对应问题评估
可能相关的PR
诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue (1)
149-156: 性能优化建议通过过滤不存在对应子组件的规则来优化性能是个很好的改进。建议添加一个缓存机制来存储
childrenProps，避免在每次验证时重新计算。建议实现方式：
+const cachedChildrenProps = ref<string[]>([]) + +watch(children, () => { + cachedChildrenProps.value = children.map((child) => child.prop) +}) + function getMergeRules() { const mergedRules: FormRules = deepClone(props.rules) - const childrenProps = children.map((child) => child.prop) + const childrenProps = cachedChildrenProps.value Object.keys(mergedRules).forEach((key) => { if (!childrenProps.includes(key)) { delete mergedRules[key] } })docs/component/form.md (1)
489-492: 📝 建议补充v-if示例的注意事项关于使用
v-if隐藏组件不进行校验的说明，建议补充一些常见场景下的注意事项，比如动态表单场景。建议添加以下内容：
在表单中，如果某个组件使用 `v-if` 隐藏，则不会对该组件进行校验。 +> 注意：在动态表单场景下，如果使用 `v-if` 控制表单项的显示与隐藏，需要注意表单验证规则的动态更新，以确保验证逻辑与表单项的显示状态保持一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/component/form.md(5 hunks)src/pages/form/demo2.vue(5 hunks)src/pages/form/demo3.vue(6 hunks)src/uni_modules/wot-design-uni/components/wd-form/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
src/uni_modules/wot-design-uni/components/wd-form/types.ts (1)
75-78: 类型定义更新正确！
validate方法的参数类型从string扩展为string | Array<string>的改动非常合理，这样能够支持同时验证多个表单字段。返回类型保持不变，确保了向后兼容性。src/pages/form/demo2.vue (1)
76-87: 验证函数实现正确！
handleValidate函数很好地展示了新的多字段验证功能，包括：
- 使用数组语法同时验证多个字段
- 适当的错误处理
- 清晰的成功提示
src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue (1)
54-64: 验证逻辑优化得当！代码改进：
- 使用
isArray进行类型检查- 通过
reduce高效过滤规则- 保持了代码的可读性
src/pages/form/demo3.vue (1)
111-115: 注意上传 URL 的安全性使用 mock API 进行文件上传可能存在安全风险。建议：
- 使用 HTTPS
- 添加适当的认证机制
- 实现文件类型和大小的验证
docs/component/form.md (3)
Line range hint
397-427: ✨ 新功能文档清晰完整文档很好地解释了
validate方法新增的数组参数支持，使用场景描述准确。
464-477: 💡 示例代码结构合理示例代码展示了如何使用数组参数进行多字段校验，代码结构清晰，便于理解。
1021-1021: ✨ API文档更新准确Events表格中的validate方法参数说明已正确更新，包含了数组参数支持的说明。
Moonofweisheng
force-pushed
the
fix/form-validate
branch
from
6283cf3 to
96c5889
Compare
Deploying wot-design-uni with
|
| Latest commit: |
96c5889
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b327e6ac.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-form-validate.wot-design-uni.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/pages/form/demo2.vue (1)
76-87: 建议优化错误处理反馈当前实现仅在控制台输出错误信息。建议添加用户反馈以提升用户体验。
建议修改为：
function handleValidate() { form .value!.validate(['phoneNumber', 'id']) .then(({ valid }) => { if (valid) { showSuccess('校验通过') } }) .catch((error) => { - console.log(error, 'error') + showToast({ + msg: '校验失败：' + error.message, + type: 'error' + }) }) }src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue (1)
149-156: 建议添加注释说明过滤逻辑这段重要的优化逻辑缺少必要的注释说明。
建议添加如下注释：
+ // 优化：过滤掉不存在对应子组件的规则，避免不必要的验证 const childrenProps = children.map((child) => child.prop) // 过滤掉在 children 中不存在对应子组件的规则 Object.keys(mergedRules).forEach((key) => { if (!childrenProps.includes(key)) { delete mergedRules[key] } })src/pages/form/demo3.vue (1)
111-115: 建议优化上传URL配置建议将上传URL配置为可配置项，而不是硬编码在组件中。
建议修改为：
<wd-upload :file-list="model.fileList" - action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload" + :action="uploadConfig.url" @change="handleFileChange" ></wd-upload>并在script中添加配置：
const uploadConfig = { url: import.meta.env.VITE_UPLOAD_URL || 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload' }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/component/form.md(5 hunks)src/pages/form/demo2.vue(5 hunks)src/pages/form/demo3.vue(6 hunks)src/uni_modules/wot-design-uni/components/wd-form/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/uni_modules/wot-design-uni/components/wd-form/types.ts
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - wot-design-uni
- GitHub Check: Header rules - wot-design-uni
- GitHub Check: Pages changed - wot-design-uni
- GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
src/pages/form/demo2.vue (2)
34-44: 代码实现规范且完整！新增的输入字段实现完整，包含了必要的验证规则和事件处理。
49-50: 按钮实现清晰且功能明确！新增的校验按钮很好地展示了表单组件新增的多字段校验功能。
src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue (1)
54-64: 验证逻辑增强实现优秀！支持数组参数的验证逻辑实现清晰，类型处理完善，兼容性好。
src/pages/form/demo3.vue (1)
91-99: 🛠️ Refactor suggestion建议加强折扣输入验证规则
当前折扣字段的验证规则过于简单，建议添加数值范围验证。
建议修改验证规则：
discount: [ { required: true, message: '请输入优惠金额', + pattern: /^0\.[1-9]\d?$|^1\.0{1,2}$|^1$/, + message: '折扣必须是0-1之间的数值' } ]Likely invalid or redundant comment.
docs/component/form.md (1)
Line range hint
397-492: 文档更新全面且清晰！新增的多字段校验功能文档说明完整，示例代码清晰，对隐藏组件的校验行为说明准确。
19 tasks
19 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✅ Closes: #797
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#797
💡 需求背景和解决方案
form validate支持传入数组以校验多个指定字段，针对使用v-if隐藏的表单组件，不做校验。
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发行说明
新功能
改进
示例更新
文件上传