表单信息验证
<!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=gb2312" />
<title>表单信息验证</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
328px;
height:232px;
z-index:1;
left: 490px;
top: 40px;
}
span {
font-size: 12px;
color: #FF0000;
}
-->
</style>
</head>
<script type="text/javascript">
var flag=false;
function affirm_user()
{
var u =document.getElementById("001");
var v =u.value;
var s =document.getElementById("s1");
if(v==null||v=="")
{
flag=false;
s.style.color="red";
s.innerText="昵称不能为空";
//alert("昵称不能为空");
}else if(v.length<3||v.length>10)
{
flag=false;
s.style.color="red";
s.innerText="昵称长度在3到10个之间";
//alert("昵称长度在3到10个字符之间");
}else{
s.style.color="green";
flag=true;
s.innerText="昵称可以使用";
}
}
var password;
function affirm_password()
{
var s =document.getElementById("s2");
var p =document.getElementById("002");
password=p.value;
if(password==null||password=="")
{
flag=false;
s.style.color="red";
s.innerText="密码不能为空";
//alert("密码不能为空");
}else if(password.length<6||password.length>13)
{
flag=false;
s.style.color="red";
s.innerText="密码长度在6到13之间";
//alert("密码长度在6到13之间");
}else{
s.style.color="green";
flag=true;
s.innerText="密码强度一般";
}
}
function affirm_again()
{
var s =document.getElementById("s3");
var str =document.getElementById("003");
var a_password=str.value;
if(a_password==null||a_password=="")
{
flag=false;
s.style.color="red";
s.innerText="确认密码不能为空";
//alert("确认密码不能为空");
}else if(password != a_password)
{
flag=false;
s.style.color="red";
s.innerText="二次输入密码不正确，请重新输入！";
//alert("二次输入密码不正确，请重新输入！");
}else{
s.style.color="green";
s.innerText="密码一致";
flag=true;
}
}
/*
以下功能是在验证条件下都符合的情况下
*/
function submitForm()
{
var form =document.getElementById("form1");
if(flag==true)
{
form.action="s.html";
form.submit();
// alert("跳转到s.html成功 并插入数据库成功！");
}else
{
form.reset();
alert("不能提交");
}
}
</script>
<body>
<div id="Layer1">
<form id="form1" name="form1" method="post" >
<label>昵称
<input type="text" id="001" name="user" onblur="affirm_user()"/>
<span id="s1"></span>
</label>
<p>
<label>密码
<input type="password" name="password" id="002" onblur="affirm_password()"/>
<span id="s2"></span>
</label>
</p>
<p>
<label>确认密码
<input type="password" name="affirm" id="003" onblur="affirm_again()"/>
<span id="s3"></span>
</label>
</p>
<p>
<label>
<div>
<input type="submit" name="Submit" value="立即注册" onclick="submitForm()" />
</div>
</label>
</p>
</form>
</div>
</body>
</html>