自己写了个简单表单验证：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script language="javascript">
function checkUserNum(str){
if(str.length<3 || str.length>18){
document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号长度在3-18字符内</font>";
form1.password.focus();
return false;
}
var flag = str.match(/\D/)==null;
if(!flag==true){
document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号必须有0-9数字组成</font>";
form1.usernum.focus();
return false;
}
document.getElementById("usernumErr").innerHTML = "";
return true;
};
function checkUserName(username){
if(username.length == 0){
document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
form1.username.focus();
return false;
}
var patn = /^[a-zA-Z]+[a-zA-Z0-9]+$/;
if(!patn.test(username)){
document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)</font>";
form1.username.focus();
return false;
}
document.getElementById("usernameErr").innerHTML = "";
return true;
};
function checkPwd(str){
if(str.length<3 || str.length>18){
document.getElementById("passwordErr").innerHTML = "<font color='red'>密码长度在3-18字符内</font>";
form1.password.focus();
return false;
}
if(escape(str).indexOf("%u")!=-1){
document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能含有中文</font>";
form1.password.focus();
return false;
}
document.getElementById("passwordErr").innerHTML = "";
return true;
};
function confrimPwd(str){
var pwd = document.form1.password.value;
if(str!=pwd){
document.getElementById("password2Err").innerHTML = "<font color='red'>密码不一致!</font>";
form1.password2.value="";
form1.password2.focus();
return false;
}
document.getElementById("password2Err").innerHTML = "";
return true;
};
function checkEmail(email){
if(email==""){
document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";
form1.email.focus();
return false;
}
var reg=new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");
if(!reg.test(email)){
document.getElementById("emailErr").innerHTML = "<font color='red'>E-MAIL格式输入不正确!</font>";
form1.email.focus();
return false;
}
document.getElementById("emailErr").innerHTML = "";
return true;
};
function checkTel(tel){
var i,j,strTemp;
strTemp="0123456789-()#";
for(i=0;i<tel.length;i++){
j=strTemp.indexOf(tel.charAt(i));
if(j==-1){
document.getElementById("telErr").innerHTML = "<font color='red'>Tel格式输入不正确!</font>";
form1.tel.focus();
return false;
}
}
document.getElementById("telErr").innerHTML = "";
return true;
};
function checkForm(){
if(document.form1.usernum.value.length == 0){
document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号不能为空</font>";
form1.usernum.focus();
return false;
}
if(document.form1.username.value.length == 0){
document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
form1.username.focus();
return false;
}
if(document.form1.password.value.length == 0){
document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能为空</font>";
form1.password.focus();
return false;
}
if( !(form1.sex[0].checked || form1.sex[1].checked) ){
document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别</font>";
form1.sex[0].focus();
return false;
}
if(document.form1.email.value==""){
document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";
form1.email.focus();
return false;
}
document.getElementById("usernumErr").innerHTML = "";
document.getElementById("usernameErr").innerHTML = "";
document.getElementById("passwordErr").innerHTML = "";
document.getElementById("sexErr").innerHTML = "";
document.getElementById("emailErr").innerHTML = "";
return true;
};
</script>
</head>
<body>
<form name="form1" action="#" method="post" onsubmit="return checkForm();" >
<table width="0" border="1">
<tr>
<th scope="row">UserNumber:</th>
<td>
<input type="text" name="usernum" onblur="return checkUserNum(this.value);" />
<span id="usernumErr"></span>
</td>
</tr>
<tr>
<th scope="row">UserName:</th>
<td>
<input type="text" name="username" onblur="return checkUserName(this.value);" />
<span id="usernameErr"></span>
</td>
</tr>
<tr>
<th scope="row">PassWord:</th>
<td>
<input type="password" name="password" onblur="return checkPwd(this.value);" />
<span id="passwordErr"></span>
</td>
</tr>
<tr>
<th scope="row">ConfirmPassword:</th>
<td>
<input type="password" name="password2" onblur="return confrimPwd(this.value);" />
<span id="password2Err"></span>
</td>
</tr>
<tr>
<th scope="row">sex</th>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<span id="sexErr"></span>
</td>
</tr>
<tr>
<th scope="row">Email:</th>
<td>
<input type="text" name="email" onblur="return checkEmail(this.value);" />
<span id="emailErr"></span>
</td>
</tr>
<tr>
<th scope="row">Tel:</th>
<td>
<input type="text" name="tel" onblur="return checkTel(this.value);" />
<span id="telErr"></span>
</td>
</tr> <tr>
<th scope="row"> </th>
<td> </td>
</tr>
<tr>
<th scope="row"><input type="submit" value="submit" /></th>
<td><input type="reset" value="reset" /></td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
"正则表达式.chm"可能详细讲解了正则表达式的语法、特殊字符、元字符、量词、分组、零宽断言等核心概念，以及如何在JavaScript中使用正则表达式进行匹配和替换操作。 这些CHM文件是学习Web开发的宝贵资源，通过它们...
在前端开发中，正则表达式常用于验证表单输入、提取URL、格式化数据等场景。 1. **基本语法**：包括字符集（如\d表示数字，\w表示字母或数字），量词（*、+、?表示重复次数），以及锚点（^表示开头，$表示结尾）等...
本主题将深入探讨如何利用JavaScript和正则表达式进行有效的表单验证，以实现无刷新验证，提高用户体验。 首先，JavaScript是一种广泛应用于客户端的脚本语言，它可以直接在用户的浏览器上运行，处理用户与网页的...
文档会详细解释正则表达式的基础语法，如字符类、量词、分组、锚点等，并给出实际示例，帮助你掌握如何编写和使用正则表达式进行数据验证、数据提取等操作。例如，你可以学会如何用`\d{3}-\d{4}`匹配电话号码格式，...
正则表达式是一种强大的文本处理工具，用于匹配、查找、替换等操作，广泛应用于编程语言中。在IT行业中，正则表达式...无论是在网页表单验证、服务器端数据处理还是数据分析场景，正则表达式都是一个强大而灵活的工具。
这个资源包显然提供了一个全面的JS表单验证解决方案，包括了正则表达式和作者自编的验证逻辑，非常适合初学者学习和参考。 一、表单验证的重要性 在网页中，表单是用来收集用户数据的关键元素，如用户名、密码、...
### JavaScript正则表达式在表单验证中的应用详解 在Web开发中，表单验证是确保数据质量和用户体验的重要环节。JavaScript正则表达式提供了一种强大的工具，用于前端数据校验，确保用户输入的数据格式正确无误。...
在JavaScript中，正则表达式被广泛应用于表单验证、数据清洗和文本解析等场景。 ### 常用正则表达式示例 #### 验证中文字符 - **正则表达式**: `[\u4e00-\u9fa5]` - **应用场景**: 用于验证字符串中是否包含中文...
JavaScript正则表达式是用于匹配字符串模式的强大工具。在验证邮箱和手机号码时，我们需要创建符合特定规则的正则表达式。对于邮箱验证，通常的正则表达式如下： ```javascript var emailRegex = /^[a-zA-Z0-9._%...
本主题主要关注使用正则表达式进行表单验证，涉及到JavaScript和JSP两种技术。正则表达式是一种强大的文本处理工具，能够有效地匹配、查找、替换和验证各种模式。 首先，我们来看表单验证的基本概念。表单是网页中...
以下是一些常见的JavaScript正则表达式及其应用： 1. **匹配中文字符**：`[\u4e00-\u9fa5]` 这个正则表达式用于匹配Unicode范围内的中文字符，包括所有汉字。例如，如果你想在一个字符串中查找所有中文字符，可以...
结合"js大全正则表达式"这个压缩包，我们可以期待其中包含有关这些JavaScript函数和正则表达式的实例、教程、代码片段或完整的应用示例，帮助学习者深入理解和掌握这两个重要概念。通过实践这些示例，开发者能够提升...
比较实用的javascript做的表单验证，验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示...提交表单先进行必填项不能为空验证，再进行正则表达式匹配验证。
- MDN Web Docs: [JavaScript正则表达式](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions) - W3Schools: [JavaScript Form Validation]...
表单验证，验证用户输入的数据是否合法 ... c、规则与用户输入内容进行匹配，正则表达式 正则表达式规则.test(要验证的内容); d、给出明确的提示信息span标签中以及边框的颜色 2、用户点击提交按钮的时候要给出提示
正则表达式 `/^\w+([-\.]\w+)*@\w+([\.-]\w+)*\.\w{2,4}$/` 是一个常用的邮箱校验正则表达式，它可以匹配大多数的邮箱地址格式。下面是这个正则表达式的解释： * `^`：表示字符串的开始 * `\w+`：表示一个或多个...
几乎包含了所有的表单验证，通过JavaScript加上正则表达式实现 几乎包含了所有的表单验证，通过JavaScript加上正则表达式实现
### JavaScript经典正则表达式知识点解析 #### 一、概述 正则表达式是一种功能强大的文本处理工具，几乎在所有编程语言中都有提供。在JavaScript中，正则表达式主要用于字符串处理，包括但不限于： 1. **表单验证...