表单校验的多次迭代及思考
参考:
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了,提交按钮仍然实时判断是否置灰
相关推荐
原生JS经典小项目-form表单校验
通用的表单校验JS,只需要导入Js文件就行。
公共JS校验,提供了常见的JS前台表单校验
表单校验文件下载 解压后上myeclipse可以直接运行
这个前端的jquery的表单校验插件,使用起来很方便,可以大大的减少我们开发者对于表单校验的工作。而且支持自定义验证规则,功能强大。
jQuery的表单校验插件validate
依赖jQuery的表单校验脚本,在使用此脚本之前请先引入jQuery文件
我看到过的表单校验最好的插件 里面涵盖挺多方面的,很实用!
jquery的基础使用和表单校验插件的使用。
JS校验工具类,已经过测试。包含: 1.校验特殊字符 2.限制表单输入长度 3.是否包含小数 4.校验是否身份证号码 5.校验是否是中文 6.校验是否包含数字
JavaScript的form表单验证中的身份证校验
jQuery表单校验插件validate实例代码集 有多个表同的表单,来共同展现表单验证插件的各种用法,包括判断字符、输入为空、类型判断、适时Ajax方式提示等,通过这些实例可快速掌握验证的方法和要点,此前,源码爱好者...
传 参 ,校验表单,支持正则,文本长度,ajax, 自定义函数校验。
校验表单,支持远程校验
通用的js表单校验脚本
ext_表单提交_数据校验 ext_表单提交_数据校验
简单的网页用户注册表单的校验,提供给大家学习,借鉴,完整代码已经打包,欢迎下载。截取一部分代码,如下: function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...
用于动态的表单信息校验,不利于传统的校验
你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select...
jquery表单前台校验,但是不兼容IE8,自己另寻解决办法