2. 程式人生 > >例項詳解js實現登入與註冊介面

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

阿新 • • 發佈：2018-12-26

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

 

 

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

使用者名稱6-12位

首字母不能是數字

只能包含字母和數字

密碼6-12位

註冊頁兩次密碼是否一致

html程式碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!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程式碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

*{

 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程式碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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程式碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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

執行結果如下：

相關推薦

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

本文主要為大家詳細介紹了js實現登入與註冊介面，具有一定的參考價值，感興趣的小夥伴們可以參考一下，希望能幫助到大家。     完成登入與註冊頁面的HTML+CSS+JS，其中的輸入項檢查包括： 使用者名稱6-12位 首字母不能是數字 只能包含字母和數字

例項詳解js閉包（一）閉包基本概念及其作用推導

　　在學習前端的過程中，不可避免的要學習到js閉包這個知識點，很多朋友感到對閉包很難理解，也不清楚它有什麼用。本文就詳細介紹一下閉包，並通過幾個小例子來說明下閉包的用處。  一、閉包的概念       閉包的英文單詞是Closure，我先給閉包可

例項詳解如何實現來電攔截及攔截後的提示音

先說下幾個要點：1. 電話攔截這個功能大家可能都知道了，就是利用反射原理呼叫ITelephony的隱藏方法來實現。這個就不說了，在附件的程式碼裡有。2.攔截後提示忙音/空號/已關機/已停機這個功能其實是要用到MMI指令，具體如何設定來電轉駁的指定可以參考這裡 http://

SpringBoot/SpringMVC整合Shiro：實現登入與註冊（MD5加鹽加密）

本文轉載於：https://blog.csdn.net/Colton_Null/article/details/78992836 ----------------------------------超級囂張的分割線---------------------------------------

Shiro安全框架入門篇（登入驗證例項詳解與原始碼）

一、Shiro框架簡單介紹 Apache Shiro是Java的一個安全框架，旨在簡化身份驗證和授權。Shiro在JavaSE和JavaEE專案中都可以使用。它主要用來處理身份認證，授權，企業會話管理和加密等。Shiro的具體功能點如下： （1）身份認證/登

SSO單點登入基本概念實現思路以及小的例項詳解

一、什麼是單點登入SSO（Single Sign-On） 　　SSO是一種統一認證和授權機制，指訪問同一伺服器不同應用中的受保護資源的同一使用者，只需要登入一次，即通過一個應用中的安全驗證後，再訪問其他應用中的受保護資源時，不再需要重新登入驗證。 二、單點登

fnmatch例項詳解（與readdir、opendir實現模糊查詢）

fnmatch：int fnmatch(const char *pattern, const char *string, int flags); man中是這麼寫道：The  fnmatch()  function checks whether the string arg

js內存空間 執行上下文 變量對象詳解 作用域鏈與閉包 全方位解讀this

變量 詳解 tail bsp pin 上下 AR detail net 內存空間：https://blog.csdn.net/pingfan592/article/details/55189622 執行上下文：https://blog.csdn.net/pingfan592

Linux用戶搶占和內核搶占詳解(概念, 實現和觸發時機)--Linux進程的管理與調度(二十）

amp 3.1 not 職責 mon 顯式 default hust ron 1 非搶占式和可搶占式內核 為了簡化問題，我使用嵌入式實時系統uC/OS作為例子 首先要指出的是，uC/OS只有內核態，沒有用戶態，這和Linux不一樣 多任務系統中, 內核負責管理各個任務, 或

[譯]例項詳解防抖與節流（乾貨！！！）

lodash原始碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文連結 作者：DAVID CORBACHO 本文來自一位倫敦前端工程師DAVID CORBACHO的技術投稿。我們在之前討論過這個話題（關於防抖與節流），但這次，DAVID CORBACHO通過生動的演示會將它們講的十分清晰，通俗易懂。

WebSocket安卓客戶端實現詳解(一)--連線建立與重連

前言 這裡特別說明下因為WebSocket服務端是公司線上專案所以這裡url和具體協議我全部抹去了,但我會盡力給大家講明白並且demo我都是測試過,還望各位看官見諒 我們先粗獷的講下流程,掌握個大概的方向,然後在深入講解細節的實現.這裡先解答一個疑惑,為啥我們這要用WebSocket而不

js事件監聽器用法例項詳解

本文例項講述了js事件監聽器用法。分享給大家供大家參考。具體分析如下： 1、當同一個物件使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆蓋掉，也就是說，在物件的onclick事件發生時，只會執行最後繫結的方法。而用事件監聽則不會有覆蓋的現象，每個繫結的事件都會被執行。

ssh證書登入(例項詳解)

http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646346.html 前言 本文基於實際Linux管理工作，例項講解工作中使用ssh證書登入的實際流程，講解ssh證書登入的配置原理，基於配置原理，解決實際工作中，wi

JAVA反射例項詳解與介紹

我們都知道Java反射很重要，這次我來拋個磚頭！！！ 一：反射    反射是在執行狀態中，對於任意一個類，都能夠知道這個類的所有屬性和方法；對於任意一個物件，都能夠呼叫它的任意一個方法和屬性。   使用java的反射，一般有下面三步：     1：獲得你想操作類

Struts2實現單檔案的上傳功能例項詳解及原始碼

  Struts2完成檔案的上傳功能例項 10級學員 郞志課堂筆記 在這裡通過一個例項簡單寫一下struts2實現檔案上傳的流程。 首先通過手寫的方式寫一個上傳的流程 第一步：建立相應的jsp頁面 <%@ page language="java" import="ja

java 加密之RSA演算法加密與解密的例項詳解

前言：  RSA是第一個比較完善的公開金鑰演算法，它既能用於加密，也能用於數字簽名。RSA以它的三個發明者Ron Rivest, Adi Shamir, Leonard Adleman的名字首字母命名，這個演算法經受住了多年深入的密碼分析，雖然密碼分析者既不能證明也不能否定R

TCP三次握手報文 例項詳解&&syn flood C/C++ 完整程式碼實現

在TCP/IP協議中，TCP協議提供可靠的連線服務，採用三次握手建立一個連線。 第一次握手： 建立連線時，客戶端傳送syn包到伺服器，並進入SYN_SENT狀態，等待伺服器確認；SYN：同步序列編號（Synchronize Sequence Numbers）。 第二次握手

一個應用例項詳解卡爾曼濾波及其演算法實現

為了可以更加容易的理解卡爾曼濾波器，這裡會應用形象的描述方法來講解，而不是像大多數參考書那樣羅列一大堆的數學公式和數學符號。但是，他的5條公式是其核心內容。結合現代的計算機，其實卡爾曼的程式相當的簡單，只要你理解了他的那5條公式。在介紹他的5條公式之前，先讓我們來根據下面的例子一步一步的探索。假設我們要研究的

爬蟲原理與會話保持（cookies、session）詳解--python實現

一、爬蟲原理     我們知道網際網路是由大量計算機和網路構成的複雜系統，我們可以將其形象的比喻成一張蜘蛛網。網路的節點是計算機，計算機中儲存著大量的資料。爬蟲程式就是通過網路去採集指定計算機中資料的工具。一般來說，我們採集的資料大多是網頁上的資料，

WinForm實現最小化到系統托盤方法例項詳解

本文例項講述了WinForm實現最小化到系統托盤方法。分享給大家供大家參考。具體分析如下： 有個叫NotifyIcon的控制元件 1、建個WinForm專案，其它操作略過。 2、拉個NotifyIcon控制元件，將屬性Visable設定成False，在Text屬性上隨便填些檔案。 3、實現Form的Size