使用javascript及正则表达式实现表单验证(CSS，js练习)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用javascript及正则表达式实现表单验证(CSS，js练习)相关的知识，希望对你有一定的参考价值。
<!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">
body{margin:0px;padding:0px;}
.zc{
width:380px;
height:600px;
margin:0 auto;
line-height:40px;
}
.main{
font-size:20px;
border:1px solid #000;
padding:10px;
background-color:#FFC;
}
.top{
font-size:30px;
font-weight:bold;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<div class="zc">
<div>
<p class="top">用户注册</p>
</div>
<div class="main">
<form action="" method="get" onSubmit="return checkForm()">
账 号：<input type="text" id="userId" name="userId" value="" />
<div id="point1" style="display:inline; color:#0CF;"></div><br />
密 码：<input type="password" id="userPw" name="userPw" value="" />
<div id="point2" style="display:inline; color:#0CF;"></div><br />
确认密码：<input type="password" id="userPw1" name="userPw1" value="" />
<div id="point3" style="display:inline; color:#0CF;"></div><br />
姓 名：<input type="test" id="name" name="name" value="" />
<div id="point4" style="display:inline; color:#0CF;"></div><br />
性 别：<input type="radio" name="sex" value="" checked="checked" /> 男
<input type="radio" name="sex" value="" /> 女<br />
年 龄：<input type="test" id="age" name="age" value="" />
<div id="point5" style="display:inline; color:#0CF;"></div><br />
电子邮件：<input type="test" id="email" name="email" value="" />
<div id="point6" style="display:inline; color:#0CF;"></div><br />
固定电话：<input type="test" id="tel" name="tel" value="" />
<div id="point7" style="display:inline; color:#0CF;"></div><br />
手机号码：<input type="test" id="phone" name="phone" value="" />
<div id="point8" style="display:inline; color:#0CF;"></div><br />
<input type="submit" value="注 册" style="color:#F08080;width:150px;height:50px;font-size:30px;position:relative;top:10px;left:100px;" />
</form>
</div>
</div>
<script language="javascript">
function checkForm(){
var id=document.getElementById("userId").value;//获取值
var mm=document.getElementById("userPw").value;
var mm1=document.getElementById("userPw1").value;
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var email=document.getElementById("email").value;
var tel=document.getElementById("tel").value;
var phone=document.getElementById("phone").value;
var point1=document.getElementById("point1"); //获取指向
var point2=document.getElementById("point2");
var point3=document.getElementById("point3");
var point4=document.getElementById("point4");
var point5=document.getElementById("point5");
var point6=document.getElementById("point6");
var point7=document.getElementById("point7");
var point8=document.getElementById("point8");
var idReg=/^[a-zA-Z]{1}(\w){7,15}$/;//正则表达式规则
var mmReg=/^(\w){8,16}$/;
var nameReg=/^(\w){4,10}$/;
var ageReg=/^[1-9]{1}[0-9]{0,1}$/;
var emailReg=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
var telReg=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
var phoneReg=/^[1]{1}[0-9]{10}$/;
if(!idReg.test(id)){ //idReg.test(id)验证值是否满足规则，满足返回true,不满足返回false。
alert("请输入以字母开头且由字母、数字及下划线组成的8-16位账号");
return false;
}
point1.innerHTML="输入正确"; //提示在后面显示
if(!mmReg.test(mm)){
alert("请输入由字母、数字及下划线组成的8-16位密码");
return false;
}
point2.innerHTML="输入正确";
if(mm!=mm1){
alert("两次输入不正确");
return false;
}
point3.innerHTML="输入正确";
if(!nameReg.test(name)){
alert("请输入由字母、数字及下划线组成的4-10位姓名");
return false;
}
point4.innerHTML="输入正确";
if(!ageReg.test(age)){
alert("请输入正确的数字");
return false;
}
point5.innerHTML="输入正确";
if(!emailReg.test(email)){
alert("请输入正确的email地址");
return false;
}
point6.innerHTML="输入正确";
if(!telReg.test(tel)){
alert("请输入正确的电话号码");
return false;
}
point7.innerHTML="输入正确";
if(!phoneReg.test(phone)){
alert("请输入正确的手机号码");
return false;
}
point8.innerHTML="输入正确";
return true;
}
</script>
</body>
</html>
以上是关于使用javascript及正则表达式实现表单验证(CSS，js练习)的主要内容，如果未能解决你的问题，请参考以下文章