表单校验体验优化
# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V5.0.010 | 优化了前端校验的视觉与交互体验 | 2022-10-31 |
| V7.0.1 | 1、优化了表单校验反馈提示,提交自动聚焦定位第一个错误字段时,自动激活页签
2、支持了后端校验展示字段红框提示、自动定位、不可见标识的功能,提升表单录入体验
3、表格分录字段支持按条件必填并展示输入框必填星号标识
4、优化了后端提示语字段内容与界面显示不一致问题 | 2024-10-24 | # 功能背景 表单校验的提示都在顶部或弹窗,不够直观且提示内容难理解,导致用户定位错误位置比较困难。为了方便用户直观清晰的看到错误提醒,快速定位错误位置,我们对表单校验的交互进行了优化。 # 适用版本 金蝶云苍穹V5.0.010及以上 # 功能介绍 ## 体验优化 * 1.提交校验时,当错误字段不可见时自动滚动定位到第一个错误字段,且自动进入输入焦点 * 2.重复定位时,错误标识闪烁提示 * 3.折叠面板和页签容器 错误不可见时显示标识 * 4.表格筛选后错误不可见时显示错误标识 * 5.表格显示行错误标识、上下不可见标识 * 6 表格校验顶部提示 显示字段错误个数 ## 其他优化 * 1.字段校验提示与表单字段顺序保持一致 * 2.可见校验优化成所有校验 * 3.图片字段显示错误红框标识 # 效果演示 ## 体验优化 ### 1、 提交校验时,当错误字段不可见时自动滚动定位到第一个错误字段,且自动进入输入焦点 ![1.webp](/download/0100995fbd452d074b53bdad0966dddb9a09.webp) ### 2、 重复提交或点击顶部字段名定位时,字段线框和提示语闪烁提示![2.webp](/download/01006045ad74315744a190ccc3fab8834ac3.webp) ### 3、折叠面板和页签容器 错误不可见时显示提示标识 ![3.webp](/download/010033277553ec69458a96a271f46f1dd6e1.webp) ### 4、表格筛选后错误不可见时显示错误标识 ![4.webp](/download/0100eb1312e6c411440c931963b1a633c15a.webp) ### 5、表格显示行错误标识、上下不可见标识 表格显示行错误标识,点击可在该行跳转不同错误单元格 ![5.webp](/download/0100629bca4ee47a40bba05a39f5a96320c9.webp) 表格可见区域外上下存在错误单元格,此时会出现上下不可见标识,点击可跳转最近的错误单元格 ![6.webp](/download/010077db5c70ad1a4a9391169610f82fb778.webp) ### 6、表格校验顶部提示 显示同列字段错误个数 如:交货日期字段列,有2个未填写错误提示,顶部提示交货日期后面括号显示数量2 ![7.webp](/download/010083489cfe82c44b44ab86feafea47aea8.webp) ### 7、页签布局时,支持激活第一个错误字段所在的页签 当单据使用页签布局时,提交校验支持切换到第一个错误字段所在页签,并且支持点击校验提示切换到字段所在的页签 ![5.webp](/download/0100d457974469074ae1a299c9da180ee777.webp) ## 其他优化 ### 1、 字段校验提示与表单字段顺序保持一致 优化前,字段校验提示顺序是与表单内字段的显示顺序是不一致的,优化后将其按显示顺序排列,更加符合直觉。 ![c.webp](/download/010004c7c0f83e3b4fcda9a7aadf77e65637.webp) ### 2、可见校验优化成所有校验 优化前表格只有可见的单元格才会校验,其他需要拖动滚动条才可见的单元格不会校验,现在优化成所有的单元格提交时都会校验。 ### 3、图片字段显示错误红框标识 优化前图片字段校验提示比较简单,优化后可通过顶部校验提示定位错误字段,同时图片字段的错误提示视觉也进行了优化。 ![9.webp](/download/010038ea2fe0816a403095230d199a96610e.webp)
2、支持了后端校验展示字段红框提示、自动定位、不可见标识的功能,提升表单录入体验
3、表格分录字段支持按条件必填并展示输入框必填星号标识
4、优化了后端提示语字段内容与界面显示不一致问题 | 2024-10-24 | # 功能背景 表单校验的提示都在顶部或弹窗,不够直观且提示内容难理解,导致用户定位错误位置比较困难。为了方便用户直观清晰的看到错误提醒,快速定位错误位置,我们对表单校验的交互进行了优化。 # 适用版本 金蝶云苍穹V5.0.010及以上 # 功能介绍 ## 体验优化 * 1.提交校验时,当错误字段不可见时自动滚动定位到第一个错误字段,且自动进入输入焦点 * 2.重复定位时,错误标识闪烁提示 * 3.折叠面板和页签容器 错误不可见时显示标识 * 4.表格筛选后错误不可见时显示错误标识 * 5.表格显示行错误标识、上下不可见标识 * 6 表格校验顶部提示 显示字段错误个数 ## 其他优化 * 1.字段校验提示与表单字段顺序保持一致 * 2.可见校验优化成所有校验 * 3.图片字段显示错误红框标识 # 效果演示 ## 体验优化 ### 1、 提交校验时,当错误字段不可见时自动滚动定位到第一个错误字段,且自动进入输入焦点 ![1.webp](/download/0100995fbd452d074b53bdad0966dddb9a09.webp) ### 2、 重复提交或点击顶部字段名定位时,字段线框和提示语闪烁提示![2.webp](/download/01006045ad74315744a190ccc3fab8834ac3.webp) ### 3、折叠面板和页签容器 错误不可见时显示提示标识 ![3.webp](/download/010033277553ec69458a96a271f46f1dd6e1.webp) ### 4、表格筛选后错误不可见时显示错误标识 ![4.webp](/download/0100eb1312e6c411440c931963b1a633c15a.webp) ### 5、表格显示行错误标识、上下不可见标识 表格显示行错误标识,点击可在该行跳转不同错误单元格 ![5.webp](/download/0100629bca4ee47a40bba05a39f5a96320c9.webp) 表格可见区域外上下存在错误单元格,此时会出现上下不可见标识,点击可跳转最近的错误单元格 ![6.webp](/download/010077db5c70ad1a4a9391169610f82fb778.webp) ### 6、表格校验顶部提示 显示同列字段错误个数 如:交货日期字段列,有2个未填写错误提示,顶部提示交货日期后面括号显示数量2 ![7.webp](/download/010083489cfe82c44b44ab86feafea47aea8.webp) ### 7、页签布局时,支持激活第一个错误字段所在的页签 当单据使用页签布局时,提交校验支持切换到第一个错误字段所在页签,并且支持点击校验提示切换到字段所在的页签 ![5.webp](/download/0100d457974469074ae1a299c9da180ee777.webp) ## 其他优化 ### 1、 字段校验提示与表单字段顺序保持一致 优化前,字段校验提示顺序是与表单内字段的显示顺序是不一致的,优化后将其按显示顺序排列,更加符合直觉。 ![c.webp](/download/010004c7c0f83e3b4fcda9a7aadf77e65637.webp) ### 2、可见校验优化成所有校验 优化前表格只有可见的单元格才会校验,其他需要拖动滚动条才可见的单元格不会校验,现在优化成所有的单元格提交时都会校验。 ### 3、图片字段显示错误红框标识 优化前图片字段校验提示比较简单,优化后可通过顶部校验提示定位错误字段,同时图片字段的错误提示视觉也进行了优化。 ![9.webp](/download/010038ea2fe0816a403095230d199a96610e.webp)
表单校验体验优化
# 变更记录| 产品版本 | 更新内容 | 更新日期 || --- | --- | --- || V5.0.010 | 优化了前端校验的视觉与交互体验 | 202...
点击下载文档
本文2024-09-23 00:40:09发表“云苍穹知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-cangqiong-140964.html
您需要登录后才可以发表评论, 登录登录 或者 注册
最新文档
热门文章