码迷,mamicode.com
首页 > 其他好文 > 详细

完成登录与注册页面的前端

时间:2017-11-01 22:51:38      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:登录   账号   innerhtml   ext   name   get   lan   turn   密码   

  

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

function fnLogin(){
   var oUname=document.getElementById("unmae");
   var oUpass=document.getElementById("upass");
   var oError=document.getElementById("error_box");
   oError.innerHTML ="<br>"
   //uname
   if (oUname.value.length>20 || oUname.value.length <6){
       oError.innerHTML ="name:6-20";
       return;
   }else if ((oUname.value.charCodeAt(0)>=18)&&(oUname.value.charCodeAt(0)<=57){
      oError.innerHTML ="first number";
      return;
   }else for(var i=0;i<oUname.value.length;i++){
     if((oUname.value.charCodeAt(i)<48 ||oUname.value.charCodeAt(i)>57)&&( )){
          oError.innerHTML ="only letter or number.";
          return;
    }
    }

   //upass
   if(oUpass.value.length>20|| oUpass.value.length <6){
    oError.innerHTML ="password:6-20";
      return;
   }
   windoe.alert("登录成功!")
   }

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
   <link href="../static/css/0082.css " rel="stylesheet" type="text/css">
   <script>
       document.write(Date())
           </script>
    <script src=".../static/js/q.js ">

    </script>
</head>
<body bgcolor="#87ceeb">

    <div class="box">
        <h2>注册页面</h2>

        <div class="input-box" >

            请输入账号: <input id="name" type="text" placeholder="name"><br>
            请输入密码: <input id="password" type="password" placeholder="密码"><br>
            再输入密码: <input id="password1" type="password1" placeholder="密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="lg2" >
         
         <button type="submit" onclick=window.alert("是否取消注册!")>取消</button>
          <br>

       </div>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="myLogin()">注册</button>
        </div>
    </div>

</body>
</html>

 

完成登录与注册页面的前端

标签:登录   账号   innerhtml   ext   name   get   lan   turn   密码   

原文地址:http://www.cnblogs.com/lishanting/p/7760681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!