javascript表单验证大全
JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在客户端运行,为用户提供实时交互体验。在HTML表单中,JavaScript常用于实现前端验证,即在用户提交数据之前检查其输入的有效性,以减少无效数据的提交和服务器的负担。以下是一些常见的JavaScript表单验证方法: 1. **长度限制**: 这个示例限制了文本区域(textarea)的字符长度,如果超过50个字符,将弹出警告,并聚焦到该字段,不允许提交。 ```html <form name="a" onsubmit="return test()"> <textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea> <input type="submit" name="Submit" value="check"> </form> <script> function test() { if (document.a.b.value.length > 50) { alert("不能超过 50 个字符!"); document.a.b.focus(); return false; } } </script> ``` 2. **只能是汉字**: 此代码片段使用正则表达式 `/[^^\u4E00-\u9FA5]/g` 来检查输入值,只允许输入汉字。 ```html <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 3. **只能是英文**: 这里通过监听键盘事件(keydown),只允许输入英文字符。 ```html <input onkeydown="onlyEng();"> <script> function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) event.returnValue = false; } </script> ``` 4. **只能是数字**: 这个例子同样使用键盘事件,但只允许输入数字,包括主键盘和小键盘上的数字。 ```html <input onkeydown="onlyNum();"> <script> function onlyNum() { if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) // 考虑小键盘上的数字键 event.returnValue = false; } </script> ``` 5. **只能是英文字符和数字**: 这个示例用正则表达式 `/[\W]/g` 来替换非字母和数字的字符。 ```html <input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 6. **验证邮箱格式**: 使用正则表达式检查输入的字符串是否符合电子邮件地址的格式。 ```html <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("oh"); } </SCRIPT> <input type="text" onblur="isEmail(this.value)"> ``` 7. **屏蔽关键字**: 如果输入值以特定关键词开头(例如 "***" 或 "****"),则显示警告并聚焦到该字段。 ```html <form name="a" onsubmit="return test()"> <input type="text" name="b"> <input type="submit" name="Submit" value="check"> </form> <script> function test() { if ((a.b.value.indexOf("***") == 0) || (a.b.value.indexOf("****") == 0)) { alert(":)"); a.b.focus(); return false; } } </script> ``` 8. **两次输入密码是否相同**: 当用户在两个输入框中输入的密码不一致时,会弹出警告并清空输入。 ```html <FORM METHOD="POST" ACTION=""> <input type="password" id="input1"> <input type="password" id="input2"> <input type="button" value="test" onclick="check()"> </FORM> <script> function check() { with (document.all) { if (input1.value != input2.value) { alert("false"); input1.value = ""; input2.value = ""; } else document.forms[0].submit(); } } </script> ``` 除了上述验证,还有其他常见的表单验证,如检查电话号码、日期格式、网址等。JavaScript表单验证可以极大地提高用户体验,因为错误反馈是即时的,但为了确保数据安全,服务器端验证仍然是必要的。此外,现代Web开发中,库和框架如jQuery和React也提供了更高级和灵活的表单验证解决方案。
























剩余16页未读,继续阅读

- #完美解决问题
- #运行顺畅
- #内容详尽
- #全网独家
- #注释完整

- 粉丝: 18
- 资源: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 垃圾图像数据集.zip
- 「 C#简单银行管理系统含源码(.net C# web)」
- 校园失物招领-校园失物招领系统-校园失物招领系统源码-校园失物招领管理系统-基于springboot的校园失物招领系统-java
- BMS动力电池管理系统仿真:涵盖多种算法模型的闭环测试与自定义优化验证,BMS动力电池管理系统仿真:探究电池平衡控制策略与物理模型的闭环测试及算法优化,bms动力电池管理系统仿真 Battery Si
- 数据文档文档文档文档文档
- 爱心跳动-HTML实现.rar
- ft_phase_screen (2)_大气仿真_激光传输_光传输_大气传输_大气湍流_
- CINA数据集 CINA Libsvm数据集 cina逻辑回归数据集
- 基于Keil编译器与Proteus仿真的51单片机交通灯设计:功能丰富,包括红绿灯时间显示、按键设置与交通管制功能 ,基于Keil编译器与Proteus仿真的51单片机交通灯设计原理图和程序报告,支持
- 【2024新春发布】A股公司WACC加权平均资本成本数据2023-2002 面板格式
- C#上位机控制STM32实现LED串灯控制 包含STM32下位机源代码和C#上位机源代码
- 实用python 代码实现微信自动发送回息消息
- 基于Matlab实现四自由度机械臂轨迹规划仿真(源码+内容介绍).rar
- Rocky DEM 22R1 Tutorial guide(全套官方案例).rar
- 基于Qt的视觉工具连线Demo:支持连线、单选删除与多选删除功能,可保存加载图像状态,基于Qt的视觉工具连线Demo:支持连线操作、单选删除与多选删除功能,可保存加载设计图,基于qt的视觉工具连线de
- 微信小程序-奶茶店小程序源码及项目截图


