原生js验证简洁注册登录页面

其他 2018-12-22 17:08:10 阅读次数: 0

一个以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

猜你喜欢

转载自blog.csdn.net/qq_42058441/article/details/85159062
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022