JavaScript表单验证教程:必填、数字、字母、电话验证
需积分: 9 140 浏览量
更新于2024-09-15
收藏 14KB TXT 举报
“js表单验证”
在网页开发中,表单验证是必不可少的一环,它用于确保用户输入的数据符合预设的规则,从而提高数据的准确性和安全性。JavaScript(简称JS)是一种广泛使用的客户端脚本语言,非常适合进行实时的表单验证。以下是一些常见的JS表单验证方法:
1. 长度验证:这个例子检查文本区域(textarea)内的字符数是否超过50。如果超过,则弹出警告,并将焦点返回到该文本区域,防止表单提交。代码中的`length`属性用于获取字符串长度,`onsubmit`事件用于在表单提交时触发验证函数。
```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. 汉字验证:这个例子通过正则表达式只允许用户输入汉字。`onkeyup`事件监听键盘抬起时的输入,`replace`方法结合正则表达式`/[^[\u4E00-\u9FA5]/g`删除非汉字字符。
```html
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
```
3. 英文字母验证:此代码限制输入只能为英文字母。`onkeydown`事件在按键按下时触发,通过比较`keyCode`值判断是否为字母。如果不在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. 数字验证:这个例子只允许用户输入数字。`onkeydown`事件结合正则表达式检查按键码,阻止非数字键的输入。
```html
<script language="javascript">
function onlyNum() {
if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) // 数字键盘上的0-9
event.returnValue = false;
}
</script>
<input onkeydown="onlyNum();">
```
5. 电话号码验证:这个例子允许输入数字和空格,但不允许其他特殊字符。`onkeyup`事件处理输入后的情况,`onbeforepaste`事件处理粘贴内容时的验证。
```html
<input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
```
6. 邮箱格式验证:这个函数`isEmail`用于检查输入的字符串是否符合邮箱地址的格式。使用`search`方法和正则表达式`/^\w+((-\w+)|(\.\w+))*\@(\w+\.)+\w+$/`来验证。
```javascript
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@(\w+\.)+\w+$/) == -1)
return false;
else
return true;
}
```
以上就是一些基础的JavaScript表单验证技术,它们可以帮助开发者实现对用户输入的有效控制,确保数据质量。然而,为了增强用户体验和安全性,通常还会结合服务器端验证,因为客户端验证可以被绕过。同时,对于复杂的验证需求,可以使用现成的验证库,例如jQuery Validation Plugin,它提供了丰富的验证规则和自定义选项。
2018-11-05 上传
2011-01-27 上传
2021-01-19 上传
2010-03-20 上传
2024-11-08 上传
2024-11-08 上传
yuan_1992
- 粉丝: 0
- 资源: 1
最新资源
- 构建基于Django和Stripe的SaaS应用教程
- Symfony2框架打造的RESTful问答系统icare-server
- 蓝桥杯Python试题解析与答案题库
- Go语言实现NWA到WAV文件格式转换工具
- 基于Django的医患管理系统应用
- Jenkins工作流插件开发指南:支持Workflow Python模块
- Java红酒网站项目源码解析与系统开源介绍
- Underworld Exporter资产定义文件详解
- Java版Crash Bandicoot资源库:逆向工程与源码分享
- Spring Boot Starter 自动IP计数功能实现指南
- 我的世界牛顿物理学模组深入解析
- STM32单片机工程创建详解与模板应用
- GDG堪萨斯城代码实验室:离子与火力基地示例应用
- Android Capstone项目:实现Potlatch服务器与OAuth2.0认证
- Cbit类:简化计算封装与异步任务处理
- Java8兼容的FullContact API Java客户端库介绍