javaScript实现简单的表单验证

来源：互联网发布：酒鬼蔷薇圣斗知乎编辑：程序博客网时间：2024/06/08 17:55
<!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" > 密&nbsp;&nbsp;码：</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">&nbsp;&nbsp;<input name="B2" type="reset" value="重置"class="submit" >    </td>  </tr></form></table></body></html>
0 0