谈谈代码健壮性之前端校验

  对于做WEB前端工程师的我们,一旦碰到了输入框,我们就该具备一定的敏感思维,那便是校验。不要小看任何一个输入框的校验,往往测试同学挑剔的便是这个校验。

  我们该如何处理这个校验。毫无疑问,首先我们需要理解业务逻辑,去定义它的一系列的校验规则,简单举一个通用的例子,就拿登录的用户名和密码来举例——

1> 先从两者共性来看
  (1) 是否允许为空?
  (2) 输入的前后空格如何处理(是否截断)?
  (3) 最少几个字符,最多多少字符?
  (4) 如果输入超出最多字符,是否还允许继续输入?
  (5) 鼠标点击label后,是否让光标自动聚焦于对应输入框?
  (6) 是否让之有placeholder的提示?如果有,是否需要同时兼容IE6/7/8实现之?
  (7) 如何给予友好提示——对话框、固定区域tips、输入框后tips?
  (8) 何时触发友好提示——键盘的keydown/keyup/…、输入框的change事件、点击提交时触发?
  (9) 给出错误提示后,输入光标聚焦于何处?
  (10)给出错误提示后,再次输入正确格式内容后的提示如何处理?何时触发?
  (11)用户的tab键是否让之有效?是什么顺序?
  (12)用户的回车事件是否绑定?如果绑定,那么绑定于哪个输入框?
  (13)需要屏蔽哪些特殊字符?如空格、逗号、引号、&符号等等
2> 用户名
  (1) 是否可以有中文,如果有中文,一个中文算一个字符还是两个字符?
  (2) 是否具有固定格式——邮箱、qq号、手机号等?
  (3) 是否让之具备autocomplete自动补全提示?
3> 密码
  (1) 是否允许粘贴的形式输入密码(即如何处理onpaste事件)?
  (2) 是否具有固定密码格式(如几位字母与数字的结合体等等)?
  (3) 是否需要密码强度校验?如果需要,是怎样的规则?

  OK,读到这里,你或许会觉得很惊奇,区区两个输入框罢了,为什么需要如此之多的校验?

  只能这样回答你,所有的极限情况是程序员所必须考虑的,我们需要对任何细节的健壮性负责。

  或许,你还会说,登录这个校验一般来讲都是很复杂的,不具备通用性。

  我也只能这样回答你,校验的松散由你们的项目而定。如果添加严格校验,任何一个输入框的校验都不简单。

  细分一下,所有的校验均由两部分构成——校验规则及提示方案。当两者相结合去完成友好型校验的时候,将会涉及非常复杂的处理逻辑。

  面对这种情况,不要盲目去写,先理顺校验顺序、合理组织校验规则代码,将事半功倍。免得陷入无穷尽的校验漩涡当中。

  因此,面对任何一个输入框,就不免需要提高“警惕”,看看它到底需要怎样的校验规则及提示方案。

  千万不要反反复复的等待测试同学提了一个校验bug,再去改正一个校验bug,这样的沟通成本太过庞大。

  需要利用好他们的测试校验用例,不单单需要自己去考虑校验规则,同样需要结合他们理解的校验规则,从而让校验代码无懈可击。

  仅仅让前端的校验代码无懈可击,往往还是不够。用户完全可以绕过所有的检验规则提交表单(或者其他请求),因此,后端的校验同样必不可少。

  那么,又有一个新的问题出现了,前端和后端的校验一模一样么?

  我认为最好是如此,不得不承认,这确实给后端同学增加了不少压力,似乎前端擅长的事情后端同样也要去做,确实有点儿让人头疼。

  这里我想着重说的是,在校验的开发进行之前,前端与后端需要明确商定校验规则及提示方案,最好对其校验顺序也能够保持一致。

  写的有点儿乱,我再提取一下——

1> 培养校验敏感思维;

2> 先明确校验规则(包括校验顺序)及提示方案,再合理组织代码实现之;

3> 利用好测试同学的校验用例;

4> 前后端校验至始至终保持一致.
原文地址:https://www.cnblogs.com/jinguangguo/p/3088994.html