Javascript表单验证案例
一、前期准备
站点目录：E:\Mywebsite
站点中的页面：
E:\Mywebsite\reg.html 用户注册的表单页面
E:\Mywebsite\getData.html 点击“注册”按钮后跳转的用于模拟接收数据的页面reg.html效果图：
getData.html效果图：
运行效果图：
二、表单验证页面（reg.html）完整代码
<html>
<head><title>Javascript表单验证案例</title>
<script language="javascript">
function checkReg()
{
if(!document.getElementById("username").value.match(/^[a-zA-Z_][a-z0-9A-Z_]{2,7}$/))
{
alert("用户名填写不正确！");
document.getElementById("username").focus();
return false;
}
if(document.getElementById("psw1").value.length>16||document.getElementById("psw1").value.length <6)
{
alert("密码长度为6-16个字符！");
document.getElementById("psw1").focus();
return false;
}
if(document.getElementById("psw1").value!=document.getElementById("psw2").value)
{
alert("两次密码不匹配！");
document.getElementById("psw1").focus();
return false;
}
if(!document.getElementById("mobilephone").value.match(/^(180|181|189)\d{8}$/))
{
alert("手机号码填写有误！");
document.getElementById("mobilephone").focus();
return false;
}
if(!document.getElementById("qq").value.match(/^[1-9]\d{2,}$/))
{
alert("QQ号码填写有误！");
document.getElementById("qq").focus();
return false;
}
if(!(document.getElementById("email").value.match(/^\w+@\w{2,63}\.(com|org|net|edu|mil|cn)$/)|| document.getElementById("email").value.match(/^\w+@\w{2,63}\.(com|org|net|edu|mil|cn)\.cn$/))) {
alert("电子邮件填写不正确！");
document.getElementById("email").focus();
return false;
}
}
</script>
</head>
<body>
<form method="POST" action="getData.html" onSubmit="return checkReg()" id="form1">
用户注册
<br>
用 户 名:<input type="text" id="username" size="20">3-8个字符，只能是字母、数字、下划线的组合，且不能以数字开头
<br>
密 码:<input type="password" id="psw1" size="20">密码长度限制为6-16个字符
<br>
确认密码:<input type="password" id="psw2" size="20">
<br>
手 机:<input id="mobilephone" type="text" size="20">必须使用180、181、189号段号码
<br>
QQ 号 码:<input id="qq" type="text" size="20">至少3位以上，不得以0开头
<br>
电子邮件:<input type="text" id="email" size="20">
<br>
<input type="submit" value="注册" id="B1"><input type="reset" value="重置" id="B2">
</form>
</body>
</html>。