JavaScript验证技巧:长度、汉字、英文、数字及邮箱
需积分: 7 177 浏览量
更新于2024-07-24
1
收藏 31KB DOCX 举报
"JavaScript验证大全,包括长度限制、汉字验证、英文验证、数字验证以及邮箱格式验证等实用的JavaScript代码示例。"
在网页表单处理中,验证用户输入的数据是确保数据质量和安全性的重要步骤。JavaScript作为客户端脚本语言,可以在用户提交数据前进行实时验证,提高用户体验并减轻服务器端的压力。以下是一些常见的JavaScript验证技术:
1. 长度限制:
这个示例用于检查用户在文本框内输入的字符数是否超过了50个。如果超过,将弹出警告提示,并使文本框保持焦点,不允许提交。实现方式是通过`document.a.b.value.length`获取文本框的值长度,然后与预设的限制进行比较。
```html
<script>
function test() {
if (document.a.b.value.length > 50) {
alert("不能超过50个字符!");
document.a.b.focus();
return false;
}
}
</script>
<form name="a" onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form>
```
2. 只能输入汉字:
这个输入框只允许用户输入汉字。通过`keyup`事件监听每个按键,然后使用正则表达式`/[\u4E00-\u9FA5]/g`匹配汉字,替换非汉字字符。
```html
<input onkeyup="this.value = this.value.replace(/[^\u4E00-\u9FA5]/g, '')">
```
3. 只能输入英文:
此输入框限制用户只能输入英文字符。`keydown`事件检测每个按键的`keyCode`,判断是否在ASCII英文字母范围内(65-90对应大写,97-122对应小写)。
```html
<script language="javascript">
function onlyEng() {
if (!(event.keyCode >= 65 && event.keyCode <= 90)) {
event.returnValue = false;
}
}
</script>
<input onkeydown="onlyEng();">
```
4. 只能输入数字:
这个例子允许用户输入数字,包括小键盘上的数字。同样使用`keydown`事件,通过`keyCode`检查是否在数字键范围内(48-57对应键盘上0-9,96-105对应小键盘上0-9)。
```html
<script language="javascript">
function onlyNum() {
if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) {
// 考虑小键盘上的数字键
event.returnValue = false;
}
}
</script>
<input onkeydown="onlyNum();">
```
5. 只能输入英文字符和数字:
该输入框允许输入英文和数字。通过`keyup`事件和正则表达式`/[\W]/g`,匹配并替换所有非字母和数字的字符。
```html
<input onkeyup="this.value = this.value.replace(/[\W]/g, '')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g, ''))">
```
6. 邮箱格式验证:
验证输入的字符串是否符合邮箱格式。使用JavaScript函数`isEmail`进行邮箱格式检查。
```html
<script LANGUAGE="javascript" RUNAT="Server">
function isEmail(emailStr) {
var reg = /^[\w\.-]+@[\w-]+(\.[\w-]+)+$/;
return reg.test(emailStr);
}
</script>
```
以上JavaScript验证方法可以单独或组合使用,以满足不同场景下的表单验证需求。记得在实际应用中根据实际情况调整代码,以确保验证的准确性和兼容性。
2008-11-28 上传
2024-03-21 上传
2023-05-16 上传
2023-03-16 上传
2023-06-08 上传
2023-05-23 上传
2023-12-12 上传
![](https://profile-avatar.csdnimg.cn/1cc48a58da0549778e183cebea2d5d36_u011792166.jpg!1)
Nikloas
- 粉丝: 7
- 资源: 1
最新资源
- Hadoop生态系统与MapReduce详解
- MDS系列三相整流桥模块技术规格与特性
- MFC编程:指针与句柄获取全面解析
- LM06:多模4G高速数据模块,支持GSM至TD-LTE
- 使用Gradle与Nexus构建私有仓库
- JAVA编程规范指南:命名规则与文件样式
- EMC VNX5500 存储系统日常维护指南
- 大数据驱动的互联网用户体验深度管理策略
- 改进型Booth算法:32位浮点阵列乘法器的高速设计与算法比较
- H3CNE网络认证重点知识整理
- Linux环境下MongoDB的详细安装教程
- 压缩文法的等价变换与多余规则删除
- BRMS入门指南:JBOSS安装与基础操作详解
- Win7环境下Android开发环境配置全攻略
- SHT10 C语言程序与LCD1602显示实例及精度校准
- 反垃圾邮件技术:现状与前景