javaScript实现简单的表单验证

最新推荐文章于 2020-12-07 19:39:34 发布

Spring......

最新推荐文章于 2020-12-07 19:39:34 发布

阅读量311

点赞数

文章标签： javascript Html

本文链接：https://blog.csdn.net/qq_27399407/article/details/52005501

版权

html 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascrapt

4 篇文章 0 订阅

订阅专栏

<!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>

Spring......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现简单的表单验证

<!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-Ty
复制链接

扫一扫

专栏目录