本文为社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！
前言
表单在运用内随处可见，注册、登录、完善个人资料、发表内容……在 B 端运用中，表单操作更是职工日常工作中运用最多的功能。好的表单体会能够让用户更加轻松地完结信息录入，从而让咱们获知更多用户的信息、在运用内产生更多内容或许让职工的工作更为轻松。糟糕的表单，则会让用户感到失望，有一种打死也不想填的感觉！那么，关于开发而言，怎样进步表单操作的用户体会？本篇咱们就来讲讲常见的进步表单用户体会的方法，推荐在封装表单组件的时分将这些因素考虑进去，形成公司内一致的标准，保持体会的一致性。
过错提示
表单输入不行防止会出错，及时、精确地给出过错提示能够让用户快速更正过错，进步表单录入的功率。过错提示有以下三种方法：
- 内联提示：当输入完结后，立即校验表单内容并给出过错提示；
- 提交时客户端提示：输入完结后，点击提交按钮时对整个表单进行过错校验和提示；
- 提交后服务端校验：提交到后端后，有服务端运用对表单进行校验。
关于输入表单内容较少的过错提示，推荐选用内联的方法完成。内联方法的过错提示便是将过错信息直接显现在表单邻近（一般是下方），这样用户更容易发觉。咱们来看看在 Flutter 中怎样完成内联的过错提示。
Flutter 的TextField 组件有一个 decoration特点，类型为InputDecoration。经过 InputDecoration 类的errorText和errorStyle能够构建一个 Text 组件，当 errorText 不为空时就会默许在 TextField 下方显现过错指示，从而提示用户输入有误，示例代码和运行成果如下。需求留意的是，过错提示信息应该精确，防止泛泛的过错提示。我曾经遇到过的反面比方便是产品没有清晰过错提示（许多产品因为见过不少标准的过错提示，就默许开发也知道怎样提示过错，所以文档并不会给出过错提示案牍），然后开发直接粗犷地显现一个“输入有误”的标准提示。
TextField(
autofocus: true,
decoration: InputDecoration(
label: const Text('邮箱'),
hintText: '请输入电子邮箱地址',
errorText: _errorText,
errorStyle: TextStyle(color: Colors.red[400], fontSize: 14.0),
),
onEditingComplete: () {
if (!FormUtils.isValidEmail(_email)) {
setState(() {
_errorText = '请输入正确的邮箱地址';
});
} else {
setState(() {
_errorText = null;
});
}
},
onChanged: (text) {
_email = text;
},
)
标签
表单的标签有三种，顶部标签、左边标签和浮动标签，当然简洁的设计有时分会运用图标代替标签文字。研讨标明，顶部标签的方法填写表单的功率更高，因为一路向下填写即可，视线不需求完成 Z 字形路线移动，可是顶部标签相对来说比较占空间，在移动端不太多见。大多数国外的运用顶部标签居多，例如下面是亚马逊的登录界面。 gmail 则别出新裁地在默许的时分省去了标签，一旦聚集标签显现在输入框的上边框，能够说是将功率和空间做了充沛的利用（这种效果在 Flutter 中默许就有，只要TextField 拟定了边框，就会在聚集后将标签显现在边框上）。
在 Flutter 中，就好像咱们上面的比方那样，默许标签是不行见的，聚集后才会以小字的方式显现上面的标签。咱们来看看 Flutter 文本输入框的标签详细怎样设置。Flutter 为设置标签款式和交互供给了3个特点：
-
labelStyle：TextStyle目标，用于设置默许的标签款式。 -
floatingLabelStyle：设置浮动状态（即标签在输入框上方）时的标签状态，这个特点能够是TextStyle目标也能够是MaterialStateTextStyle目标，假如是MaterialStateTextStyle目标的话，就能够设置不同状态下的标签款式，比方过错、聚集和光标移入等。 -
floatingLabelBehavior：设置浮动标签的交互行为，默许是auto，即聚集的时分才显现，也能够设置为never不显现标签，或许设置为always一直显现标签。
下面是对应的代码，咱们来看看不同方式的差异：
Column(
children: [
TextField(
autofocus: true,
decoration: InputDecoration(
label: const Text('邮箱'),
hintText: '请输入电子邮箱地址',
floatingLabelStyle: MaterialStateTextStyle.resolveWith(
(Set<MaterialState> states) {
final Color color;
if (states.contains(MaterialState.error)) {
color = Colors.red[400]!;
} else if (states.contains(MaterialState.focused)) {
color = Colors.blue[400]!;
} else {
color = Colors.black54;
}
return TextStyle(
color: color,
);
}),
floatingLabelBehavior: FloatingLabelBehavior.always,
errorText: _errorText,
errorStyle: TextStyle(color: Colors.red[400], fontSize: 14.0),
),
onEditingComplete: () {
if (!FormUtils.isValidEmail(_email)) {
setState(() {
_errorText = '请输入正确的邮箱地址';
});
} else {
setState(() {
_errorText = null;
});
}
},
onChanged: (text) {
_email = text;
},
),
TextField(
decoration: InputDecoration(
label: const Text('暗码'),
hintText: '请输入暗码',
floatingLabelBehavior: FloatingLabelBehavior.auto,
),
obscureText: true,
),
TextField(
decoration: InputDecoration(
label: const Text('承认暗码'),
hintText: '请再次输入暗码',
floatingLabelBehavior: FloatingLabelBehavior.never,
),
obscureText: true,
),
],
),
- 第一个表单邮箱咱们运用了固定显现标签的方式，一起经过
floatingLabelStyle设置了不同状态的标签色彩； - 第二个表单暗码咱们运用了
auto形式，能够看到标签一开始是在表单行内的，聚集后标签移到了输入框上方，而输入框会展现占位文字； - 第三个承认暗码咱们运用了
never形式，标签一开始是在表单行内的，聚集后标签移到了输入框上方，而输入框会展现占位文字，但标签会消失不见。
TextField，假如要运用左边标签，则需求自定义完成（能够参考之前的文章：）。这儿需求留意，虽然 TextField 供给了一个 prefix 能够自定义前置组件，可是这个组件只会在文本框聚集的时分才显现。
键盘
键盘处理在手机端非常常见了，主张根据输入类型来设置键盘类型，常见的键盘类型和用途如下：
-
TextInputType.number：输入数字，带小数点; -
TextInputType.phone：输入数字，*和#字符，合适拨打电话或输入号码； -
TextInputType.email：输入电子邮箱地址； -
TextInputType.url：合适输入链接地址，会默许显现/和.字符； -
TextInputType.multiline：合适多行输入，带有回车符，回车后自动换行；
需求留意的是，安卓和 iOS 的键盘会有些差异，详细能够看看 TextInputType 的各个枚举值的阐明。
表单项过多
当要录入的表单项许多的时分，假如表单没有条理性，会让用户望而生畏，忍受力强的用户发发闹骚，无法忍受的用户直接抛弃。比方下面这样的注册表单，看到就会失望，打死我也不会填的。
- 表单分组：比方将必填的表单分为一组，其他选填的表单分为一组；这种在 PC 端会更适用。
- 分过程填写：还是表单分组，可是分多个过程，每页展现的表单数量少，不会让用户一会儿感觉要填许多东西。而且，从心理学上来说，前面填了一部分会让用户积累淹没成本，后面的表单会更愿意填。一起，关于非必填的分组供给跳过选项。
- 利用时间差：也便是一开始的时分让用户只填很少的信息，然后在之后的运用过程中逐步引导用户完善其他资料。比方在领英里，每次就会让咱们填写一点点信息，最终将个人信息收集完整。
表单校验
前面过错提示的时分，已经讲过一些校验的内容了。这儿要说的是，咱们开发一定要养成对表单进行校验的习气。自己就遇到过这样的状况，产品没有特别阐明校验规矩，然后前后端都不校验，成果录入的数据导致各种各样的 bug。这种写 bug 的行为会极大下降咱们程序员的段位！关于校验，主张是在内部形成一致的默许规矩，比方下面几点：
- 文本输入的最大输入长度限制；
- 数值的最大输入规模；
- 小数默许保留的位数；
- 常用类型数据的校验规矩一致，例如名字、邮箱、手机号、身份证号、经纬度、日期、企业一致社会信誉代码，暗码强度、金额等。防止前后端校验规矩不一致。
至于什么时分校验，主张是按表单数量来定，表单数量少能够在输入完结后进行校验；表单数量多推荐是在完结输入后整体校验。一起，前端必须确保提交给后端数据的基本合法性（除了需求后端经过事务逻辑校验的除外，例如唯一性查看，是否存在查看等）。
总结
假如评估一个前端开发做事情的细致程度，一般会经过他写的表单事务来评估。基本上，测验一遍表单的输入交互、过错验证就能够判别出来。一个好的前端，即便是产品不说，也会按照标准将交互和基本的校验做好。一起，保持与产品的交流也很重要，假如对表单的校验规矩有疑惑，那一定是需求二次承认的。虽然不承认锅能够甩给产品，可是 bug 却是留在自己头上的。
