JavaScript表单验证大全资源-CSDN文库

需积分: 3 92 浏览量 2011-10-20 21:09:41 上传评论收藏 28KB TXT 举报

### JavaScript表单验证大全 #### 一、简介在网页开发中，表单验证是非常重要的一个环节。良好的表单验证不仅能够提升用户体验，还能有效防止非法数据提交到服务器端，从而减轻服务器负担并提高安全性。本文将详细介绍几种常见的JavaScript表单验证方法，包括但不限于字符长度限制、输入类型控制（如仅限中文、英文或数字输入）、特定格式验证（例如电子邮件地址）等。 #### 二、常见表单验证实例详解 ##### 1. 字符长度限制在实际应用中，经常需要对用户输入的文本长度进行限制，以确保数据的有效性和安全性。例如，限制文本框内的字符长度不超过50个字符： ```javascript function test() { if (document.a.b.value.length > 50) { alert("超过50个字符"); document.a.b.focus(); return false; } } ``` 对应的HTML表单代码为： ```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> ``` 这里通过`onsubmit`事件触发`test`函数，当输入的字符长度超过50时，弹出提示并阻止表单提交。 ##### 2. 仅限中文输入有时候我们需要限制用户只能输入中文字符，可以通过正则表达式实现这一功能： ```javascript <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"> ``` 这里的正则表达式`[^\u4E00-\u9FA5]`用于匹配非中文字符，并将其替换为空字符串，从而达到仅允许中文输入的效果。 ##### 3. 仅限英文输入限制用户只能输入英文字符： ```javascript function onlyEng() { if (!(event.keyCode >= 65 && event.keyCode <= 90)) { event.returnValue = false; } } ``` ```html <input onkeydown="onlyEng();"> ``` 通过检测键盘按键的键码值来判断是否为英文字符，并阻止非法输入。 ##### 4. 仅限数字输入限制用户只能输入数字，包括常规的数字键和小键盘上的数字键： ```javascript function onlyNum() { if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) { event.returnValue = false; } } ``` ```html <input onkeydown="onlyNum();"> ``` 同样通过检测按键的键码值来实现。 ##### 5. 仅限英文和数字输入限制用户只能输入英文或数字： ```html <input onkeyup="value=value.replace(/[\W]/g,"\'')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g,''))"> ``` 这里结合了正则表达式和`onbeforepaste`事件，确保用户无论通过键盘还是粘贴的方式输入的数据都符合要求。 ##### 6. 邮箱格式验证验证用户输入的邮箱地址是否符合标准格式： ```javascript 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("邮箱格式不正确"); } } ``` ```html <input type="text" onblur="isEmail(this.value)"> ``` 利用正则表达式来匹配标准的电子邮件格式。 ##### 7. 特殊字符限制有时需要限制用户输入的文本以特定字符开头： ```javascript function test() { if ((a.b.value.indexOf("***") == 0) || (a.b.value.indexOf("****") == 0)) { alert("请输入正确的格式"); a.b.focus(); return false; } } ``` ```html <form name="a" onsubmit="return test()"> <input type="text" name="b"> <input type="submit" name="Submit" value="check"> </form> ``` 通过检测输入文本的开头是否包含指定的特殊字符来判断。 ##### 8. 密码一致性验证在注册或更改密码时，通常需要确认两次输入的密码是否一致： ```html <form method="post" action=""> <input type="password" id="input1"> <input type="password" id="input2"> <input type="button" value="test" onclick="check()"> </form> ``` ```javascript function check() { with (document.all) { if (input1.value != input2.value) { alert("密码不一致"); input1.value = ""; input2.value = ""; } else { document.forms[0].submit(); } } } ``` 通过比较两次输入的密码是否相同来实现。 #### 三、其他安全措施除了以上介绍的验证方法外，还可以采取以下措施进一步增强表单的安全性： - **禁用右键菜单**：通过设置`oncontextmenu="return false"`可以禁止用户在页面上点击右键弹出菜单。 - **禁用拖拽和选择**：通过设置`ondragstart="return false"`和`onselectstart="return false"`可以禁止用户在页面上的拖拽操作和选择文本。例如： ```html <body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"> ``` 这些措施有助于保护敏感数据不受非法操作的影响。 #### 四、总结通过上述示例可以看出，JavaScript表单验证涵盖了多种场景下的需求，包括但不限于字符长度控制、输入类型限制以及特定格式的验证等。合理运用这些技术手段，可以显著提升Web应用程序的功能性和用户体验。同时，在设计验证逻辑时，也应注意平衡易用性和安全性之间的关系，以提供更加健壮和友好的解决方案。

资源推荐

资源详情

资源评论

1¡¢²»ÄÜ³¬¹ı50¸ö×Ö·û

<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. Ö»ÄÜÊÇºº×Ö

<input onkeyup="value="/oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')">

3. Ö»ÄÜÊÇÓ¢ÎÄ

<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}