avaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
function validate_required(field,alerttxt){
with (field)
{
if (value==null||value=="")
{alert(alerttxt)return false}
else {return true}
}
}
下面是连同 HTML 表单的代码：
<html><head>
<script type="text/javascript">function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt)return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus()return false}
}
}</script>
</head>
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
function validate_email(field,alerttxt){
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt)return false}
else {return true}
}
}
下面是连同 HTML 表单的完整代码：
<html><head>
<script type="text/javascript">function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt)return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus()return false}
}
}</script>
</head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
我就简单的写个 希望可以帮助您==================================
<!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/htmlcharset=gb2312" />
<title>测试页面</title>
<script type="text/javascript">
function checkform(){
//验证用户名
if($("username").value == ""){
$("n_msg").innerHTML ="用户名不可以为空"
$("username").select()
$("username").focus()
return false
}else{
if($("username").value.length <6){
$("n_msg").innerHTML = "用户名必须大于6个字符"
$("username").select()
$("username").focus()
return false
}
}
//验证密码
if($("password").value == ""){
$("p_msg").innerHTML ="密码不可以为空"
$("password").select()
$("password").focus()
return false
}else{
if($("password").value.length <10){
$("p_msg").innerHTML = "密码必须大于10个字符"
$("password").select()
$("password").focus()
return false
}
}
//.....（下面的可以以此类推）
return true
}
function $(id){
return document.getElementById(id)
}
</script>
<style type="text/css">
body{ font:12px 宋体}
.c_red{ color:#f00}
</style>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<form method="post" onsubmit="return checkform()">
<tr>
<td width="89">用户名</td>
<td width="223"><input name="username" type="text" id="username" /></td>
<td width="188" id="n_msg" class="c_red"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="password" type="password" id="password" /></td>
<td id="p_msg" class="c_red"></td>
</tr>
<tr>
<td colspan="3"><input name="sub" type="submit" id="sub" value="提交" /></td>
</tr>
</form>
</table>
</body>
</html>
===========================
上面的为代码部分 我已经调试没问题 希望可以帮助您
祝早日解决~
