JavaScript表单验证技巧集锦
需积分: 0 105 浏览量
更新于2024-07-31
收藏 48KB DOC 举报
"JavaScript验证代码大全"
在网页表单中,数据验证是非常重要的一环,它确保用户输入的数据符合预设的格式和规则,从而提高数据的准确性和安全性。JavaScript是一种常用的前端验证语言,可以在客户端实时检查用户输入,避免无效或不合法的数据提交到服务器。以下是一些JavaScript验证代码示例:
1. 长度限制:
这段代码用于限制文本输入框的字符长度。`test()` 函数会在表单提交时被调用,检查`b`字段的值是否超过50个字符。如果超过,则弹出警告,并使焦点返回到该输入框,阻止表单提交。
```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. 只能输入汉字:
这个输入框只允许用户输入汉字。`onkeyup`事件触发后,会使用正则表达式`/[^\\u4E00-\\u9FA5]/g`来匹配非汉字字符并替换为空。
```html
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
```
3. 只能输入英文:
此代码片段用于限制输入框只能输入英文字符。`onlyEng()` 函数在按键下落时执行,如果按键码不在英文字符范围内(A-Z,a-z),则阻止默认行为。
```html
<script language="javascript">
function onlyEng() {
if (!(event.keyCode >= 65 && event.keyCode <= 90)) // 大写字母
event.returnValue = false;
}
</script>
<input onkeydown="onlyEng();">
```
4. 只能输入数字:
这个输入框仅允许输入数字。`onlyNum()` 函数同样在按键下落后执行,检查按键码是否在数字键范围内,包括主键盘和小键盘。
```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. 只能输入英文和数字:
这个输入框允许用户输入英文字符和数字。`onkeyup`事件会替换掉所有非英文和数字的字符。
```html
<input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
```
6. 验证邮箱格式:
`isEmail()` 函数用于检查输入的邮箱地址是否符合标准的邮箱格式。如果匹配成功,函数返回`true`,否则显示警告。
```javascript
<SCRIPT LANGUAGE="javascript" RUNAT="Server">
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert("邮箱格式错误!");
}
</SCRIPT>
<input type="text" onblur="isEmail(this.value)">
```
以上这些JavaScript验证代码可以用于各种常见的表单字段,如限制输入长度、类型以及格式验证,有效地提高了用户体验和数据质量。
2009-01-14 上传
2012-09-09 上传
2011-03-24 上传
2021-01-21 上传
2011-09-08 上传
2009-10-05 上传
2010-01-05 上传
2007-10-26 上传
2012-01-06 上传
PhoenixSlade
- 粉丝: 28
- 资源: 35
最新资源
- 单片机串口通信仿真与代码实现详解
- LVGL GUI-Guider工具:设计并仿真LVGL界面
- Unity3D魔幻风格游戏UI界面与按钮图标素材详解
- MFC VC++实现串口温度数据显示源代码分析
- JEE培训项目:jee-todolist深度解析
- 74LS138译码器在单片机应用中的实现方法
- Android平台的动物象棋游戏应用开发
- C++系统测试项目:毕业设计与课程实践指南
- WZYAVPlayer:一个适用于iOS的视频播放控件
- ASP实现校园学生信息在线管理系统设计与实践
- 使用node-webkit和AngularJS打造跨平台桌面应用
- C#实现递归绘制圆形的探索
- C++语言项目开发:烟花效果动画实现
- 高效子网掩码计算器:网络工具中的必备应用
- 用Django构建个人博客网站的学习之旅
- SpringBoot微服务搭建与Spring Cloud实践