关于原生js前端注册页面的相关验证

最新推荐文章于 2024-05-06 17:40:24 发布

fasslook

最新推荐文章于 2024-05-06 17:40:24 发布

阅读量1.8k

点赞数

分类专栏： web html js 文章标签： web前端开发我个人的理解 js html 注册验证

本文链接：https://blog.csdn.net/fasslook/article/details/51621805

版权

js 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

web

7 篇文章 0 订阅

订阅专栏

html

6 篇文章 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 checkname()
{
   var name=document.getElementById("username");
   document.getElementById("div").innerHTML="";
   if(name.value=="")
   {
      document.getElementById("div").innerHTML="名字不能为空";
      name.focus();
      return false;
      }
      for(var i=0;i<name.value.length;i++)
      {
         var char=name.value.substring(i,i+1);
         if(isNaN(char)==false)
         {
            document.getElementById("div").innerHTML="名字不能包含数字";
            name.select();
            return false;
            }
         }
         return true;
   }
   var pwd,pwd1
   function checkpwd()
   {
       pwd=document.getElementById("pwd")
       
      document.getElementById("div1").innerHTML="";
      
      if(pwd.value.length<=6)
      {
         document.getElementById("div1").innerHTML="密码必须等于或大于6个字符";
         pwd.focus();
         return false; 
         }
         return true;
         
      }
      function checkpwd1()
      {
         pwd1=document.getElementById("pwd1")
         document.getElementById("div2").innerHTML="";
         if(pwd.value!=pwd1.value)
         {
            document.getElementById("div2").innerHTML="两次输入的密码不一致";
            pwd1.select();
            return false;
            }
            return true;
         }
         
         function checkemail()
         {
            var email=document.getElementById("email");
               document.getElementById("div3").innerHTML="";
               if(email.value.indexOf("@")==-1||email.value.indexOf(".")==-1)
               {
         document.getElementById("div3").innerHTML="Email格式不正确，必须包含@和.";
         email.select()
         return false
                  }
                  return true
}
</script>
</head>

<body>
<table id="mytable" border="0" cellspacing="0" cellpadding="0">
  <form action="register.html" method="post" name="myform" οnsubmit="return (checkname()&&checkpwd()&&checkpwd1()&&checkemail())"><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" οnblur="checkname()"><div id="div" style="color:#F00; display:inline">*</div></td>
  </tr>
  <tr><td class="p1"> 密&nbsp;&nbsp;码：</td>
    <td><input id="pwd" type="password" οnblur="checkpwd()"><div id="div1" style="color:#F00; display:inline">*</td>
  </tr>
   <tr><td class="p1" > 再次输入密码：</td>
    <td><input id="pwd1" type="password" οnblur="checkpwd1()"><div id="div2" style="color:#F00; display:inline">*</td>
  </tr>
  <tr><td class="p1" >E-mail：</td>
    <td><input id="email" type="text" οnblur="checkemail()"><div id="div3" style="color:#F00; display:inline">*</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>

fasslook

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
关于原生js前端注册页面的相关验证

html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">xmlns="http://www.w3.org/1999/xhtml">http-equiv="Content-Type" content="text/html; cha
复制链接

扫一扫