如何正确的设计表单验证

曾经很久以前有个程序员跟我说“任何产品都离不开增删改查”。不一定对，但是大部分产品都适用，那么今天我想说一下「增」。

所谓「增」，即是填写表单，实际场景可以是“购买”、“提交个人信息”等等。

为了保证信息的完整及正确，我们需要增加表单验证。

好的表单验证应该是即时反馈的，并且能够让你知道哪里错了，

下图是我的总结：

问：什么是即时反馈？

答：文本输入框，失去焦点后立刻提示toast用户哪里错误。

问：什么是非模态提示？为什么要用非模态提示？

答：非模态提示（rich visual modeless feedback RVMF）即不要用户做特殊操作或者转换模式，就能看到和理解这些反馈。使用场景是当出现多个错误时候，toast只能提示一处错误，而非模态提示则可以清晰的让用户知道多处的错误，且不打扰用户。

问：为什么要两个触发条件？

答：一般来说，失去焦点是即时的且只负责验证一条输入信息； 而提交按钮触发的验证是整个页面的验证，如果有错误信息将会toast提示错误的第一条信息，其它错误用非模态提示。

问：设计表单验证需要注意什么？

答：如果是登录页面，限制条件相对少，输入内容也少的场景。可以直接通过「提交按钮状态」来取代部分的表单验证（eg:未输入情况，提交按钮不可点，当输入内容后，提交按钮为可点。）

问：如何定义验证规则？

答：根据业务需求，以及显示美观去权衡，确定需要的信息长度、格式。

下图是我定义的规则：