首頁 >web前端 >js教程 >實例詳解js實現登入與註冊介面

實例詳解js實現登入與註冊介面

小云云原創: 2018-05-18 14:25:448681瀏覽

本文主要為大家詳細介紹了js實現登入與註冊介面，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助大家。

完成登入與註冊頁面的HTML+CSS+JS，其中的輸入項目檢查包括：

使用者名稱6-12位元

首字母不能是數字

只能包含字母和數字

密碼6-12位元

註冊頁兩次密碼是否一致

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="../static/css/lx.css">

</head>
<body>
<p class="box">
 <h2>登陆</h2>

 <p class="input_box">
  <input id="uname" type="text" name="user" placeholder="请输入用户名">
 </p>
 <p class="input_box">
  <input id="upass" type="password" name="psw" placeholder="请输入密码">
 </p>
 <p id="error_box"><br></p>
 <p class="input_box">
  <button type="button" class="btn btn-primary" onclick="fnLogin()">登陆</button>&nbsp&nbsp&nbsp&nbsp
  <a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="注册"></a>
 </p>



</p>
</body>
</html>

css程式碼：

*{
 margin: 0;
 padding: 0;
 font-family: 微软雅黑;
 font-size: 12px;
}
.box{
 width: 390px;
 height: 320px;
 border: solid 1px #ddd;
 background: #FFF;
 position: absolute;
 left: 50%;
 top:42%;
 margin-left: -195px;
 margin-top: -160px;
 text-align: center;
}
.box h2{
 font-weight: normal;
 color:#666;
 font-size: 16px;
 line-height: 40px;
 overflow: hidden;
 text-align: center;
 border-bottom: solid 1px #ddd;
 background: #f7f7f7;
}
.input_box{
 width:350px;
 padding-bottom: 15px;
 margin: 0 auto;
 overflow: hidden;
}

javascript程式碼：

function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 var isError = true;
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "用户名请输入6-20位字符";
  isError = false;
  return;
 }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
  oError.innerHTML = "首字符必须为字母";
  return;
 }else for(var i=0;i<oUname.value.charCodeAt(i);i++){
  if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
   oError.innerHTML = "必须为字母跟数字组成";
   return;
  }
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "密码请输入6-20位字符"
  isError = false;
  return;
 }
 window.alert("登录成功")
}

註冊介面html程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>欢迎你，请先登陆！</title>
 <script type="text/javascript" src="../static/jsp/lx.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p id="container" style="width: 400px" align="center">
 <p id="header" style="background-color: aquamarine">
  <h2 align="center">注册</h2>
 </p>
 <p id="content">
  <p align="center">账号:
   <input id="uname" type="text" name="user" placeholder="账号首字符为字母">
  </p>
  <p align="center">密码:
   <input id="upass" type="password" name="psw" placeholder="请输入密码">
  </p>
  <p id="error_box"><br></p>
  <br>

  <button onclick="fnLogin()" class="btn btn-info">注册</button>
 </p>
 <p style="background-color: aquamarine">
  <i>版权信息@</i>
 </p>
</p>
</body>
</html>

執行結果如下：

#相關推薦：

實例分享JavaScript登入驗證基礎教學

詳解Ajax實作漂亮、安全的登入介面的方法

css和js實作彈出登入居中介面教學

以上是實例詳解js實現登入與註冊介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css ajax html JS

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：實例詳解vue打包後顯示空白正確處理方法下一篇：實例詳解vue打包後顯示空白正確處理方法

看更多