表单校验的多次迭代及思考
参考:
http://hw1287789687.iteye.com/blog/2248757
(1)起初
文本框在输入的过程中,就进行校验,及 即时校验,并且会决定提交按钮是否置灰
在输入的过程中校验,使用的是keyup 事件
$(this.el).keyup(function(e){ me.keyup(e); if(this.value.length>0){ btn.style.display='inline-block'; }else{ btn.style.display='none'; } me._placeHolder(); me.validate(); });
但是有个问题:
用户在输入的过程中,还没有输入完成就报错.
比如我输入手机号码,还没输入完呢,就给我错误提示,用户体验不好.
(2)后来
修改为:输入的过程中不校验,只有失去焦点才校验
主要解决的问题:用户在输入的过程中,还没有输入完成就报错.
但是又有新的问题出现了:
用户在输入完之后,没有失去焦点就不会校验,此时提交按钮是置灰的.
如果失去焦点,校验通过,那么失去焦点后,提交按钮就变为可用.
所以就有一个奇怪的现象:
用户输入正确的,还没有失去焦点的时候,提交按钮置灰,此时用户直接点击提交按钮,却是可以提交的.
因为点击提交按钮触发了输入框的失去焦点(blur)事件
(3)现在
改为提交按钮始终可用,去掉了置灰的状态
不过,点击提交按钮时会校验
但是还有一个问题:因为之前是校验通过才会计算价格
所以现在输入的过程中是不会实时校验价格的,那么就会存在一个问题:
用户输入ok之后,还没有失去焦点的时候,金额为0.00元,用户点击提交按钮,可以提交成功
解决方法:
在输入的过程中也校验,只是不显示错误提示;
在失去焦点后校验,显示错误提示.
后来一想,发现走了弯路,
最开始遇到的问题是:用户在输入的过程中,还没有输入完成就报错.
其实很容易解决:keyup事件不显示错误信息就ok了,提交按钮仍然实时判断是否置灰