最近,遇到一个平时也最常遇到的输入框输入验证问题,比如验证时间必须为13:00这种格式。折腾整理出来两种用js验证的。
第一种:
<input class="input-text" name="endtime" type="text" onkeyup="this.value=this.value.replace(/[^\d\:]/g,'')"
直接采用键盘弹起事件,利用正则表达式替换掉非法的字符,即使输入了,也会立即被替换成空。
第二种
<input class="input-text" name="endtime" type="text" onkeydown="checkKeyForTime(this.value,event)"/>
<script type="text/javascript">
function checkKeyForTime(value,e){
var isOK = false;
var key = window.event ? e.keyCode : e.which;
if ((key > 95 && key < 106) || //小键盘上的0到9
(key > 47 && key < 60) || //大键盘上的0到9
key==186 || key == 8 || key == 9 || key == 46 || key == 37 || key == 39 //不影响正常编辑键的使用(186:冒号 8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
isOK = true;
} else {
if (window.event) //IE
{
e.returnValue = false; //event.returnValue=false 效果相同.
}
else //Firefox
{
e.preventDefault();
}
}
return isOK;
}
</script>
第二种,是直接在其按下按键的时候判断输入的字符的ascii码是否在合法的范围,不在则不让其触发事件,让其无法输入。
问题:第二种方式有个问题,就是在于在不同的输入法状态下,非法字符的ascii码值不是相同的,所以导致上面第二种在某种输入法状态下还是无法过滤非法的字符,所以,最好的方式直接采用正则表达式来过滤替换 :wink:
分享到:
相关推荐
为了简化开发过程,有许多优秀的前端验证插件和库,比如`jQuery Validation Plugin`、`FormValidation.io`、`Vee Validate`等。这些工具提供了丰富的验证规则和友好的API,可以快速集成到项目中。比如,`blog.csdn...
jQuery,作为一款广泛使用的JavaScript库,提供了许多工具和插件来帮助开发者实现前端验证。本文将详细介绍jQuery的前端验证框架,并通过具体的Demo实例进行解析。 **一、jQuery基础知识** jQuery是由John Resig于...
### JS验证数字方法详解 #### 一、背景介绍 在Web开发中,经常需要对用户输入的数据进行合法性检查,特别是当涉及到数字时。JavaScript作为前端脚本语言,提供了丰富的工具来帮助开发者完成这一任务。本文将详细...
本文将深入探讨JavaScript(js)中的前端验证方法,包括纯前端的验证码插件、滑动验证和计算验证等,以及如何结合jQuery进行高效实现。 一、JavaScript基础验证 JavaScript作为浏览器内置的脚本语言,可以方便地在...
前端验证可以防止无效数据提交,但不能防止恶意用户绕过前端验证。因此,任何敏感数据的提交都应配合后端验证。 总结来说,这个资源集合提供了一系列关于JavaScript表单验证的方法和实例,包括基础的输入验证、电子...
在JavaScript(JS)中,正则表达式是一种强大的工具,用于匹配、查找、替换和验证字符串中的模式。本文将深入探讨如何使用正则表达式来限制用户在HTML文本框中只能输入数字和字母。 首先,我们需要理解正则表达式的...
本资源提供的"js表单验证插件"正是一款专注于前端验证的工具,它包含了多种常见的验证功能,如邮箱验证、中文汉字验证、手机号码验证以及数字验证。 1. **邮箱验证**:JavaScript 邮箱验证通常通过正则表达式实现,...
JavaScript是一种广泛应用于网页和网络应用的轻量级编程语言,尤其在前端开发中扮演着重要角色。在网页表单中,数字验证是确保用户输入数据有效性和安全性的关键环节。本话题将深入探讨如何使用JavaScript编写数字...
验证码一般为4-6位数字,有时会带有时间限制,用户需要在规定时间内输入接收到的验证码。 在前端部分,这个demo会涉及以下几个关键知识点: 1. **表单设计**:界面应包含输入手机号的文本框和获取验证码的按钮。...
- 尽管前端验证提高了用户体验,但不能完全依赖它,服务器端验证仍然是必要的,以防恶意用户绕过前端验证。 - 保护用户隐私,不要在前端验证中暴露敏感信息,如密码哈希等。 9. **性能优化**: - 避免不必要的...
在JavaScript(js)中,进行数据验证是前端开发中的一项基本任务。这涉及到对用户输入进行检查,确保其符合特定的格式或规则,以保证数据的准确性和安全性。本篇文章将详细探讨身份证、汉字、数字以及电话号码的验证...
总的来说,这个"验证数据js插件"简化了前端验证的过程,使得开发者无需从零开始编写验证逻辑,提高开发效率。同时,其提供的自定义验证功能也保持了灵活性,能满足多样化的应用场景。在实际项目中,结合良好的文档和...
根据给定的文件标题、描述、标签以及部分内容,本文将详细介绍如何使用...以上就是使用JavaScript进行常见数据验证的一些基本方法,这些函数可以广泛应用于网页表单的前端验证中,提高用户体验,减少无效数据的提交。
- **减轻服务器压力**:前端验证可以过滤掉无效请求,减少不必要的服务器资源消耗。 - **提高数据质量**:确保提交到服务器的数据格式正确,有利于后端逻辑处理。 #### 三、核心验证逻辑解析 根据提供的部分内容,...
例如,使用jQuery Validate,你可以设置自定义规则来验证数字: ```javascript $("#myForm").validate({ rules: { numberField: { required: true, number: true } }, messages: { numberField: "请输入...
JavaScript是Web开发中不可或缺的一部分,尤其在前端交互和数据验证方面扮演着重要角色。本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高...
3. **安全性考虑**:除了前端验证外,还需在后端对数据进行再次验证,以防恶意攻击。 #### 三、总结 通过本篇文章的学习,我们不仅了解了如何使用JavaScript实现基本的邮箱格式验证,还探讨了一些可能的改进方案。...
这个【标题】"修改密码时,js验证提示"暗示我们将探讨如何在用户更改密码时,利用JavaScript进行有效的前端验证。 **前端验证的目的** 前端验证的主要目标是减少无效数据的提交,提高服务器性能,同时为用户提供...
JavaScript验证在IT行业中...总的来说,"js验证大全"是一个综合性的学习资源,涵盖了JavaScript验证的各种技巧和特效,对于前端开发者而言,理解和掌握这些知识能够提高他们的工作效率,保证应用程序的稳定性和安全性。