表单校验的多次迭代及思考

表单校验的多次迭代及思考

参考:

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了,提交按钮仍然实时判断是否置灰