表单校验的多次迭代及思考
参考:
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了,提交按钮仍然实时判断是否置灰
相关推荐
自1993年万维网联盟(W3C)提出HTML标准以来,它经历了多次迭代升级,而HTML5则在2008年开始被广泛讨论,并于2014年最终定稿。它的诞生,旨在弥补前几代HTML标准在多媒体、表单、离线存储等方面的功能不足,提供更...
这在需要多次迭代处理同一任务的情况下非常有用。 **1.3.3 并行(Parallel)** 并行流转模型允许多个任务节点同时执行,提高了流程的并发处理能力。这种方式适用于那些可以同时进行多个独立任务的场景。 **1.3.4 ...
- **token防止表单重复提交**:使用`<s:token>`标签可以生成一个隐藏字段,防止用户多次提交同一个表单。 通过以上内容的学习,可以全面了解Struts2.1框架的核心特性和使用方法,这对于开发者来说是非常宝贵的资源...
这个库的版本号9.06表明它已经经过了多次迭代与优化,以适应不断变化的技术需求和提高用户体验。 首先,我们要理解nrCommPro的核心功能。它是一个面向对象的库,提供了一系列类来处理串行通信的各种任务,如打开、...
4. **数据完整性校验**:在数据保存或更新时,增加数据完整性校验,确保关键字段如IMDB链接不被遗漏。 5. **文档更新**:随着问题的发现和修复,更新相关的使用文档和开发者指南,让用户了解可能遇到的问题及其解决...
B2C在线支付接口经历了多个版本迭代,各版本主要特性如下: - **1.0.0.0**:基础支付功能。 - **1.0.0.1**:新增中英文界面支持。 - **1.0.0.3**:通知方式优化。 - **1.0.0.4**:支持特定商户的基金直销业务,限制...
《深入剖析ligerUI1.1.9》 在IT领域,前端开发是不可或缺的一部分,而优秀的前端框架能极大地提高开发效率和用户体验。ligerUI作为一个轻量级、功能...随着技术的不断迭代,我们期待ligerUI在未来能带来更多的惊喜。
MD5(Message-Digest Algorithm 5)是一种广泛用于数据安全的哈希函数,它能将任意长度的信息转化为固定长度的...在实际应用中,更推荐使用更安全的哈希算法,如SHA-256,甚至结合加盐(salt)和多次迭代来增强安全性。
它通过对原始数据进行多次运算生成不可逆的散列值,常用于验证文件完整性或密码存储。在ASP.NET中,可以使用`System.Security.Cryptography`命名空间下的`SHA1CryptoServiceProvider`类来实现SHA1加密。 MD5...
MD5(Message-Digest Algorithm 5)是一种广泛使用的哈希函数,主要应用于数据的完整性校验和密码存储。...在PHP MVC框架中,MD5可以作为基础的密码哈希手段,但应结合盐值(salt)和多次迭代提高安全性。
- **知识点拓展**:学习Python中列表与迭代器的区别及应用场景。 **题目18:列表交集快速获取** - **知识点20:Python列表交集操作** - 可以使用集合(set)的数据结构来快速获取两个列表的交集。 - 示例代码:...
11 FTP之创建文件夹及MD5校验思路 第33章 01 操作系统历史 02 进程的概念 03 线程的概念 04 线程的调用以及join方法 05 setDaemon方法和继承式调用.baiduyun.downloading 05 setDaemon方法和继承式调用 第34章 ...
9. **数据校验**:使用Java Bean Validation框架进行表单数据的前端和后端校验,避免无效数据的提交。 10. **错误处理与日志记录**:设置统一的错误页面,并合理使用日志工具如Log4j,便于调试和问题定位。 11. **...
- **POST**:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。 - **PUT**:请求服务器存储一个资源,覆盖原位置上的任何现存内容。 - **DELETE**:请求服务器删除指定的页面。 ...
Web框架如Django还提供了表单验证功能,可以设置字段的最小长度、最大长度、是否为唯一值等规则。 密码处理是用户安全的核心部分。在Python中,我们通常不会直接存储明文密码,而是使用哈希算法如bcrypt、scrypt或...
- **变量存储**:用于存储数据值,可在项目中多次引用。 - **实例应用**:如存储用户的输入信息,用于后续操作。 - **3.3.6 OnPageLoad事件** - **页面加载事件**:当页面加载完成时触发的事件,可用于初始化...
当客户机第一次调用一个Stateful Session Bean 时,容器必须立即在服务器中创建一个新的Bean实例,并关联到客户机上,以后此客户机调用Stateful Session Bean 的方法时容器会把调用分派到与此客户机相关联的Bean实例...