### JavaScript验证大全知识点详解 #### 一、简介 在网页开发过程中,JavaScript 是实现客户端验证的重要工具之一。通过JavaScript进行验证不仅可以提升用户体验,还可以减轻服务器端的压力。本文将详细介绍一个包含多种常见验证功能的JavaScript脚本集合,这些验证涵盖了表单输入、字符限制等多个方面。 #### 二、具体验证函数及应用场景 ##### 1. 验证是否包含特殊字符 ```javascript // 验证是否包含特殊字符 function checkTitle() { var v = document.getElementById('My_id').value; if (/[@%&!*RG]/gi.test(v)) { alert('只允许输入字母!'); document.getElementById('My_id').value = ""; } } ``` **应用场景:** - 当需要确保用户输入的数据只包含字母时,可以使用此函数。 - 常见于用户名或特定文本字段的验证。 **注意事项:** - 正则表达式`/[@%&!*RG]/gi`中的特殊字符可以根据实际需求进行调整。 - 使用`gi`标志表示全局匹配且不区分大小写。 ##### 2. 自动跳转到下一个表单项 ```javascript // 自动跳转到下一个表单项 function Enter2Tab(e) { try { var ob = IsFireFox ? e.target : event.srcElement; if (ob.tagName == "INPUT" && ( ob.type == "text" || ob.type == "password" || ob.type == "checkbox" || ob.type == "radio" ) || ob.tagName == "SELECT") { var key = IsFireFox ? e.which : event.keyCode; if (key == 13) { if (IsFireFox) { event.which = 9; } else { event.keyCode = 9; } } } } catch (E) {} } ``` **应用场景:** - 在表单填写过程中,用户按下回车键时自动跳转到下一个表单项。 - 提升用户体验,减少鼠标操作。 **注意事项:** - `IsFireFox`变量用于判断当前浏览器是否为Firefox,以便适配不同的事件处理方式。 - 只有当输入框类型为文本、密码、单选按钮或下拉列表时才生效。 ##### 3. Ajax请求处理 ```javascript // Ajax请求处理 function AjaxLib() { try { if (typeof ActiveXObject != "undefined") { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } catch (a) {} return null; } ``` **应用场景:** - 实现异步数据请求,无需刷新页面即可获取服务器数据。 - 适用于动态加载数据、实时更新信息等场景。 **注意事项:** - 兼容IE和现代浏览器,确保了代码的广泛适用性。 - 返回`XMLHttpRequest`对象或`ActiveXObject`对象,方便后续的请求发送与结果处理。 ##### 4. 用户名格式验证 ```javascript // 用户名格式验证 function UserNameIsOk(ssn) { var re = /^[0-9a-z][\w-.]*[0-9a-z]$/i; return re.test(ssn) ? true : false; } ``` **应用场景:** - 验证用户输入的用户名是否符合规定格式。 - 适用于注册、登录等场景。 **注意事项:** - 正则表达式`/^[0-9a-z][\w-.]*[0-9a-z]$/i`表示用户名必须以数字或小写字母开头和结尾,中间可以包含字母、数字、下划线、破折号和点。 - 使用`i`标志表示不区分大小写。 ##### 5. 表单全选功能 ```javascript // 表单全选功能 function SelectAll() { var empty; var f = document.forms[0]; for (var i = 0; i < f.length; i++) { empty = f[i]; if (empty.type == "checkbox" && empty.disabled == false) { empty.checked = true; } } } ``` **应用场景:** - 提供给用户一键选择所有复选框的功能。 - 适用于需要批量操作的场景。 **注意事项:** - 仅对非禁用状态下的复选框起作用。 ##### 6. 表单反选功能 ```javascript // 表单反选功能 function SelectReverse() { var empty; var f = document.forms[0]; for (var i = 0; i < f.length; i++) { empty = f[i]; if (empty.type == "checkbox" && empty.disabled == false) { if (empty.checked == true) { empty.checked = false; } else { empty.checked = true; } } } } ``` **应用场景:** - 提供给用户一键反选所有复选框的功能。 - 适用于需要批量反转选择状态的场景。 **注意事项:** - 仅对非禁用状态下的复选框起作用。 ##### 7. 跳转至指定页面 ```javascript // 跳转至指定页面 function GoPage(pn) { try { document.forms[0].page.value = pn; document.forms[0].submit(); } catch (E) { document.forms[1].page.value = pn; document.forms[1].submit(); } } ``` **应用场景:** - 在表单提交时,根据用户选择的参数值跳转至不同的页面。 - 适用于分页查询、搜索结果跳转等场景。 **注意事项:** - 尝试访问`document.forms[0]`,如果不存在,则尝试访问`document.forms[1]`,增强了代码的健壮性。 以上就是《JavaScript验证大全》中的一些关键知识点的详细介绍。通过这些实用的验证函数,开发者可以更轻松地实现各种复杂的验证逻辑,提高应用程序的质量和用户体验。
//验证输入的内容是否包含特殊字符。
function checkTitle(){
var v = document.getElementById('My_id').value;
if(/[@%&!*RG]/gi.test(v)) {
alert('只能输入字母,数字,汉字');
document.getElementById('My_id').value="";
}
}
//可以写在一行上的
onblur=\"if(/[@%#&!*RG]/gi.test(this.value)){ alert('只能输入字母,数字,汉字'); this.value=''}
***********************************************************************************/
[code]
var IsFireFox = document.getElementById &&! document.all;//判断是否为FireFox
//页面里回车到下一控件的焦点
function Enter2Tab(e)
{
try
{
var ob = IsFireFox ? e.target : event.srcElement;
if(ob.tagName == "INPUT" &&
(
ob.type == "text" ||
ob.type == "password" ||
ob.type == "checkbox" ||
ob.type == "radio"
) ||
ob.tagName == "SELECT")
var key = IsFireFox ? e.which : event.keyCode;
if (key == 13)
{
if (IsFireFox)
{
event.which = 9;
}
else
{
event.keyCode = 9;
}
}
}
}
catch(E){}
}
//打开此功能请取消下行注释
//document.onkeydown = Enter2Tab;
//ajax对象创建
function AjaxLib()
{
try
{
if (typeof ActiveXObject != "undefined")
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
剩余62页未读,继续阅读
- 粉丝: 1
- 资源: 18
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- asm-西电微机原理实验
- Arduino-arduino
- C语言-leetcode题解之70-climbing-stairs.c
- C语言-leetcode题解之68-text-justification.c
- C语言-leetcode题解之66-plus-one.c
- C语言-leetcode题解之64-minimum-path-sum.c
- C语言-leetcode题解之63-unique-paths-ii.c
- C语言-leetcode题解之62-unique-paths.c
- C语言-leetcode题解之61-rotate-list.c
- C语言-leetcode题解之59-spiral-matrix-ii.c