2. 程式人生 > >原生js驗證簡潔註冊登入頁面

原生js驗證簡潔註冊登入頁面

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

一個以js驗證表單的簡潔的註冊登入頁面，不多說直接上圖

效果

 

主要檔案

  

完整程式碼

1 sign_up.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

32

33

34

35

36

37

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset

="UTF-8">

 <title>sign-up</title>

 <link rel="stylesheet" href="css/common_form.css">

</head>

<body>

 <header>

 <div class="header-line"></div>

 </header>

 <div class="content">

 <img class="content-logo"

src="img/form_logo.png" alt="logo">

 <h1 class="content-title">建立賬戶</h1>

 <div class="content-form">

  <form method="post" action="" onsubmit="return submitTest()">

  <div id="change_margin_1">

   <input class="user" type

="text" name="user" placeholder="請輸入使用者名稱" onblur="oBlur_1()" onfocus="oFocus_1()">

  </div>

  <!-- input的value為空時彈出提醒 -->

  <p id="remind_1"></p>

  <div id="change_margin_2">

   <input class="password" type="password" name="password" placeholder="請輸入密碼" onblur="oBlur_2()" onfocus="oFocus_2()">

  </div>

  <!-- input的value為空時彈出提醒 -->

  <p id="remind_2"></p>

  <div id="change_margin_3">

   <input class="content-form-signup" type="submit" value="建立賬戶">

  </div>

  </form>

 </div>

 <div class="content-login-description">已經擁有賬戶？</div>

 <div><a class="content-login-link" href="log_in.html">登入</a></div>

 </div>

<script src="js/common_form_test.js"></script>

</body>

</html>

 2 log_in.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

32

33

34

35

36

37

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>log-in</title>

 <link rel="stylesheet" href="css/common_form.css">

</head>

<body>

 <header>

 <div class="header-line"></div>

 </header>

 <div class="content">

 <img class="content-logo" src="img/form_logo.png" alt="logo">

 <h1 class="content-title">登入</h1>

 <div class="content-form">

  <form method="post" action="" onsubmit="return submitTest()">

  <div id="change_margin_1">

   <input class="user" type="text" name="user" placeholder="請輸入使用者名稱" onblur="oBlur_1()" onfocus="oFocus_1()">

  </div>

  <!-- input的value為空時彈出提醒 -->

  <p id="remind_1"></p>

  <div id="change_margin_2">

   <input class="password" type="password" name="password" placeholder="請輸入密碼" onblur="oBlur_2()" onfocus="oFocus_2()">

  </div>

  <!-- input的value為空時彈出提醒 -->

  <p id="remind_2"></p>

  <div id="change_margin_3">

   <input class="content-form-signup" type="submit" value="登入">

  </div>

  </form>

 </div>

 <div class="content-login-description">沒有賬戶？</div>

 <div><a class="content-login-link" href="sign_up.html">註冊</a></div>

 </div>

<script src="js/common_form_test.js"></script>

</body>

</html>

3 common_form.css 表單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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

/*重置樣式*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,

acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub

, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,

tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,

hgroup, menu, nav, output, section, summary, time, mark, audio, video {

 margin: 0;

 padding: 0;

 border: 0

}

body {

 font-family: "微軟雅黑";

 background: #f4f4f4;

}

 

/*header*/

.header-line {

 width: 100%;

 height: 4px;

 background: #0dbfdd;

}

 

/*content*/

.content {

 width: 28%;

 margin: 70px auto 0;

 text-align: center;

}

.content-logo {

 width: 80px;

 height: 80px;

}

.content-title {

 margin: 10px 0 25px 0;

 font-size: 2em;

 color: #747474;

 font-weight: normal;

}

.content-form {

 width: 100%;

 padding: 36px 0 20px;

 border: 1px solid #dedede;

 text-align: center;

 background: #fff;

}

.content-form form div {

 margin-bottom: 19px;

}

.content-form form .user,

.content-form form .password {

 width: 77%;

 height: 20px;

 padding: 10px;

 font-size: 1em;

 border: 1px solid #cccbcb;

 border-radius: 7px;

 letter-spacing: 1px;

}

.content-form form input:focus {

 outline: none;

 -webkit-box-shadow: 0 0 5px #0dbfdd;

  box-shadow: 0 0 5px #0dbfdd;

}

.content-form-signup {

 width: 84%;

 margin: 0 auto;

 padding: 10px;

 border: 1px solid #cccbcb;

 border-radius: 7px;

 font-size: 1em;

 font-weight: bold;

 color: #fff;

 background: #0dbfdd;

 cursor: pointer;

}

.content-form-signup:hover {

 background: #0cb3d0;

}

.content-form-signup:focus {

 outline: none;

 border: 1px solid #0cb3d0;

}

.content-login-description {

 margin-top: 25px;

 line-height: 1.63636364;

 color: #747474;

 font-size: .91666667rem;

}

.content-login-link {

 font-size: 16px;

 color: #0dbfdd;

 text-decoration: none;

}

 

/*輸入框無內容便提示*/

#remind_1,

#remind_2 {

 width: 76%;

 margin: 0 auto 2px;

 text-align: left;

 font-size: .2em;

 color: #f00;

}

 4 common_form_test.js 註冊登入指令碼

?

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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

// 全域性變數a和b，分別獲取使用者框和密碼框的value值

var a = document.getElementsByTagName("input")[0].value;

var b = document.getElementsByTagName("input")[1].value;

 

//使用者框失去焦點後驗證value值

function oBlur_1() {

 if (!a) { //使用者框value值為空

 document.getElementById("remind_1").innerHTML = "請輸入使用者名稱！";

 document.getElementById("change_margin_1").style.marginBottom = 1 + "px";

 } else { //使用者框value值不為空

 document.getElementById("remind_1").innerHTML = "";

 document.getElementById("change_margin_1").style.marginBottom = 19 + "px";

 }

}

 

//密碼框失去焦點後驗證value值

function oBlur_2() {

 if (!b) { //密碼框value值為空

 document.getElementById("remind_2").innerHTML = "請輸入密碼！";

 document.getElementById("change_margin_2").style.marginBottom = 1 + "px";

 document.getElementById("change_margin_3").style.marginTop = 2 + "px";

 } else { //密碼框value值不為空

 document.getElementById("remind_2").innerHTML = "";

 document.getElementById("change_margin_2").style.marginBottom = 19 + "px";

 document.getElementById("change_margin_3").style.marginTop = 19 + "px";

 }

}

 

//使用者框獲得焦點的隱藏提醒

function oFocus_1() {

 document.getElementById("remind_1").innerHTML = "";

 document.getElementById("change_margin_1").style.marginBottom = 19 + "px";

}

 

//密碼框獲得焦點的隱藏提醒

function oFocus_2() {

 document.getElementById("remind_2").innerHTML = "";

 document.getElementById("change_margin_2").style.marginBottom = 19 + "px";

 document.getElementById("change_margin_3").style.marginTop = 19 + "px";

}

 

//若輸入框為空，阻止表單的提交

function submitTest() {

 if (!a && !b) { //使用者框value值和密碼框value值都為空

 document.getElementById("remind_1").innerHTML = "請輸入使用者名稱！";

 document.getElementById("change_margin_1").style.marginBottom = 1 + "px";

 document.getElementById("remind_2").innerHTML = "請輸入密碼！";

 document.getElementById("change_margin_2").style.marginBottom = 1 + "px";

 document.getElementById("change_margin_3").style.marginTop = 2 + "px";

 return false; //只有返回true表單才會提交

 } else if (!a) { //使用者框value值為空

 document.getElementById("remind_1").innerHTML = "請輸入使用者名稱！";

 document.getElementById("change_margin_1").style.marginBottom = 1 + "px";

 return false;

 } else if (!b) { //密碼框value值為空

 document.getElementById("remind_2").innerHTML = "請輸入密碼！";

 document.getElementById("change_margin_2").style.marginBottom = 1 + "px";

 document.getElementById("change_margin_3").style.marginTop = 2 + "px";

 return false;

 }

}

 5 form_logo.png Logo照片

到這裡，一個簡單的註冊登入頁面就完成了，後面會持續更新，使之更強大。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援指令碼之家。

 

來源：https://www.jb51.net/article/100355.htm

相關推薦

原生js驗證簡潔註冊登入頁面

一個以js驗證表單的簡潔的註冊登入頁面，不多說直接上圖 效果   主要檔案    完整程式碼 1 sign_up.html 登錄檔單 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1

一個簡單的註冊登入頁面（包括阿里大於的手機驗證）html+JS+AJAX+PHP

        背景：非計算機專業，在校學習期間，接觸過linux，perl,C語言。今年畢業以後學了一段時間的html/css/javascript，最近找到一份PHP程式設計師工作。面試的時候，HR讓我回去做個註冊登入頁面，花了三天時間做了個簡單的註冊登入頁。現在把程式

H5+css3+js搭建帶驗證碼的登入頁面

login.html <!DOCTYPE HTML> <html> <head> <title>EasyBuy後臺管理系統</title> <meta charset="utf-8">

SpringMVC中模擬郵件驗證實現註冊登入

第一步：安裝郵箱伺服器和客戶端 第二步：專案匯入郵件jar包      (  密碼:mben) 第三步：專案中使用程式碼傳送郵件 我的資料庫user表： 專案中傳送郵件的程式碼體現在servic

android -簡單註冊登入頁面應用

小白今天寫了一段註冊登入程式碼與大家分享不足請指出 首先寫一個javabean package com.my.domain; public class User {private String account;//賬號private String password;//密碼

10分鐘搞定Java帶token驗證的註冊登入

這是spring boot框架下的登入註冊功能，並且帶有token驗證，可以用於生產環境的例項原理太簡單，直接上程式碼，讓你知道什麼叫拿來主義！！1，java中專案介紹 2，resources 中的內容3，用法：建立好所有的需要的類，，資料庫中建立好需要的資料庫，程式碼複製貼上，啟動，就可以用了實際程式碼：&

後臺返回狀態碼，js驗證跳轉登入

<script type="text/javascript"> $(document).ajaxComplete(function (event, xhr, options) {    

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

text 先來 helloword 郵箱 用戶名 就是 lac round 外部 一．JavaScript正則表達式1.exec檢索字符串中指定的值，返回找到的值，並確定其位置2.test檢索字符串中指定的值，返回true或false3.正則表達式對象的創建：（1）方式一：

css+js模擬使用者 註冊和登入頁面

製作一個註冊頁面使用者名稱不能為空並且（6-20位英文字母數字下劃線） 密碼 重複密碼 6位以上英文字母數字下劃線 密碼和重複密碼必須一致 身份證號：舊身份證號為15位數字 新身份證號為18位數字， 或17位數字，最末位為x或X email正常的郵箱規則 使用者註冊： <!DO

JS實現註冊登入傳送簡訊驗證碼動態顯示60S倒計時完整案例

通常在web專案中都會遇到賬戶註冊或者忘記密碼時需要傳送簡訊驗證碼的功能，雖然說這種功能很常見，但是實際開發過程中很多人還會遇到不少坑。筆者經過整理把最近專案中的用到的這個傳送簡訊驗證碼動態顯示60S倒計時的完整實現過程分享給廣大開發者朋友。 1、頁面傳送簡訊驗證碼的表

前端每日一小練2---京東註冊頁面（無JS驗證）

       今天的demo主要涉及了以下幾個小知識點：               1.使用label標籤來對input標籤進行文字提示以及對齊的方式；               2.使用posi

js實現登入頁面驗證碼

主要用到的是js生成隨機數 Math.floor();//向下取整  Math.random();  //0.0 ~ 1.0 之間的一個偽隨機數。【包含0不包含1】 <!DOCTYPE html> <html> <head lang="en"> <meta

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。 下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

js驗證登錄註冊

AD click 登陸 parseint 隨機 整數 int .html ima js驗證登錄註冊的優勢，在前臺直接驗證，不需要在後臺讀取返回數據驗證，減輕服務器壓力。 登陸驗證得必要性，攔截惡意腳本的登錄註冊攻擊。 js代碼如下：$(document).ready(fun

node.js+myslq簡單得登入註冊

http 17. src 模塊 node.js nbsp 註冊 info com 一、引入相關得模塊 二、創建服務 三、鏈接數據庫 四、寫myslq語句 五、鏈接得測試端口 node.js+myslq簡單得登入註冊

原生js獲取到頁面上所有的checkbox

har NPU doctype ble script 原生js ati -c wid <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &l

JavaWeb-登入的驗證與自動跳轉到登入頁面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%-- 本行程式碼可以防止亂碼出現 --%> <% String path = req

原生 JS 實現手機驗證碼倒計時

可以使用 pointer-events 來阻止元素成為滑鼠事件的 target。html5 新增操作元素 class 類名的方式 classList。 classList 方法 add(value)：在元素中新增一個或多個類名。如果值已經存在，就不添加了。 contains(value): 返回

js 捕捉回車鍵觸發登入，並驗證輸入內容

js 捕捉回車鍵觸發登入，並驗證輸入內容 有時候我們會遇到 web 頁面中捕捉按鍵，觸發一些效果， 比如常見的回車鍵觸發登入，並驗證輸入內容，下面會介紹，截圖： 一、最簡單的捕捉回車鍵：判斷按下的是不是回車鍵，jsEnter.html: 提示：回車鍵的鍵值為 13 <!DOCTYPE html

註冊登入（設計圖片驗證碼）

圖片驗證碼的實現 （註冊、下單、支付均有涉及） 1. 目的: 1) 驗證操作者是否是人，不是機器。 2) 防止表單重複提交。每次提交要判斷驗證碼的正確與否 生成驗證碼的要點: 1) 使用java程式碼生成圖片物件 2) 使用Random生成隨機字串 3) 將圖片物件用 Imag