您的位置：首页 > Web前端 > JavaScript

javaScript实现简单的表单验证

2016-07-23 17:17 666 查看 
<!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{lmargin:0;
padding:0;}
.p1{font-size:12px;
text-align:right;
height:28px;
width:80px;
}
input{font-size:12px;
border:solid 1px #61b16a ;
width:150px;
height:20px;
}
.submit{
font-size:12px;
background-color:#eeeeee;
border:solid 1px #cccccc ;
width:60px;
height:23px;
padding-top:3px;
}
textarea{
font-size:12px;
border:solid 1px #61b16a ;
}
#mytable{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width:760px;
}
#main{border-left:solid 1px #7bcc87;
border-right:solid 1px #7bcc87;
background-color:#f9f8ff;
}
#center{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width:80%;
}
</style>
<script type="text/javascript">
function checkLoginUsername(){
var username = document.getElementById("username").value;
if(username.length==0){
document.getElementById("usernameInfo").innerHTML="用户名不能为空！";
return false;
}
return true;
}
function checkLoginPwd(){
var pwd = document.getElementById("pwd").value;
if(pwd.length==0){
document.getElementById("pwdInfo").innerHTML="密码不能为空！";
return false;
}
return true;
}
function checkLoginEmail(){
var email = document.getElementById("email").value;
if(email.length==0){
document.getElementById("emailInfo").innerHTML="email不能为空！";
return false;
}
return true;
}
function checkForm(){
if(checkLoginUsername()&&checkLoginPwd()&&checkLoginEmail()){
return true;
}
return false;
}

function clearInfo(spanId){
document.getElementById(spanId).innerHTML="";
}
</script>
</head>

<body>
<table id="mytable" border="0" cellspacing="0" cellpadding="0">
<form action="success.html" method="post" name="myform" onsubmit="return checkForm()"> <tr>
<td><img src="images/reg-top.jpg"></td>
</tr>
<tr>
<td id="main"><table id="center" border="0" cellspacing="0" cellpadding="0">
<tr><td class="p1"> 用户名：</td>
<td> <input id="username" type="text" onfocus="clearInfo('usernameInfo')" onblur="checkLoginUsername()"/> <span id="usernameInfo" style="color:#F00"></span></td>
</tr>
<tr><td class="p1" > 密  码：</td>
<td><input id="pwd" type="password" onfocus="clearInfo('pwdInfo')" onblur="checkLoginPwd()"> <span id="pwdInfo" style="color:#F00"></span></td>

</tr>
<tr><td class="p1" >E-mail：</td>
<td><input id="email" type="text" onfocus="clearInfo('emailInfo')" onblur="checkLoginEmail()"> <span id="emailInfo" style="color:#F00"></span></td>
</tr>
<tr><td class="p1"> 个人简介：</td>
<td><textarea id="intro" cols="30" rows="4"></textarea></td>
</tr>
</table>
</td>
</tr>
<tr>
<td background="images/reg-end.jpg" style="height:63px; text-align:center;"><input name="B1" type="submit" value="提交" class="submit">  
<input name="B2" type="reset" value="重置"class="submit" >
</td>
</tr></form>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航