首页 > web前端 > js教程 > javascript如何实现用户注册界面(附代码)

javascript如何实现用户注册界面(附代码)

不言
发布: 2018-08-27 11:16:00
原创
13087 人浏览过

本篇文章给大家带来的内容是关于javascript如何实现用户注册界面(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

*{

        margin: 0;

        padding: 0;

    }

    .block{

        position: relative;

        margin: 0 auto;

        margin-top: 80px;

        width: 710px;

        height: 500px;

        border: 1px solid rgba(29, 29, 29, 0.64);

        background: url("./img/logo2396.jpg")no-repeat;

        background-size: 100%;

    }

    .photo {

        position: absolute;

        z-index: 1;

        width: 710px;

        height: 500px;

        background-color: rgba(0, 0, 0, 0.71);

    }

    .biao{

        margin-top: 20px;

        position: absolute;

        z-index: 2;

        margin-left: 150px;

    }

    li{

        position: relative;

        padding-left:20px ;

        list-style: none;

        line-height: 70px;

        width: 400px;

        border: 1px solid white;

        margin:5px auto;

    }

    li input[type=text]{

        padding-left: 20px;

        border-style: none;

        background: none;

    }

    input[type=submit]{

        margin-left: 150px;

        border-style: none;

        font-size: 25px;

        color: white;

        background: none;

    }

    .d{

        background-color: rgba(222, 53, 3, 0.71);

    }

   .txt{

       line-height: 50px;

       width: 280px;

       font-size: 15px;

       color: white;

   }

   .error {

       position: absolute;

       z-index: 2;

       left: 150px;

       color: rgba(253, 253, 253, 0.4);

       font-size: 14px;

   }

登录后复制

2.html代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<div class="block">

    <div class="photo"></div>

    <div class="biao">

        <form name="form">

            <ul>

                <li><label style="color: white">账  号:</label><input class="txt" type="text"></li>

                <li><label style="color: white">密  码:</label><input class="txt" type="text"></li>

                <li><label style="color: white">确认密码:</label><input class="txt" type="text"></li>

                <li><label style="color: white">电话号码:</label><input class="txt" type="text"></li>

                <li><label style="color: white">邮  箱:</label><input class="txt" type="text"></li>

                <li class="d"><input id="sub" type="submit" value="注册"></li>

            </ul>

        </form>

    </div>

</div>

登录后复制

3.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

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

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

var sub=document.getElementById("sub");

 var txt=document.getElementsByClassName("txt");

  var li=document.getElementsByTagName("li");

 document.forms.form.onsubmit=function(){

     yan();

     var errl=document.getElementsByClassName("error").length;

     if(!errl){

         return true;

     }

     return false;

 };

 function yan(){

     for(var i=0;i<txt.length;i++){

         txt[i].focus();

     }

     sub.focus();

 }

 for(var i=0;i<txt.length;i++)

 {

 txt[i].index=i;

 txt[i].onfocus=function (){

 if(this.parentElement.children[2]==undefined) return;

 this.parentElement.children[2].remove();

 };

 txt[i].onblur=function (){

 switch (this.index){

     case 0:

         if(this.value==""){

             var s=document.createElement("span");

             s.innerHTML="请输入账号";

             s.className="error";

             li[this.index].appendChild(s)

         }

         else{

             var s=document.createElement("span");

             s.innerHTML="";

             s.className="sucess";

             li[this.index].appendChild(s)

         }

         break;

     case 1:

         if(this.value==""){

             var s=document.createElement("span");

             s.innerHTML="请输入密码";

             s.className="error";

             li[this.index].appendChild(s)

         }

         else if(this.value.length<6||this.value.length>11) {

             var s=document.createElement("span");

             s.innerHTML="密码错误";

             s.className="error";

             li[this.index].appendChild(s);

            txt[this.index].value="";

         }

          else{

                 var s=document.createElement("span");

                 s.innerHTML="";

                 s.className="sucess";

                 li[this.index].appendChild(s)

             }

         break;

     case 2:

         if(this.value==""){

             var s=document.createElement("span");

             s.innerHTML="请再次确认密码";

             s.className="error";

             li[this.index].appendChild(s);

             txt[this.index].value="";

         }

         else if(this.value!=txt[1].value){

             var s=document.createElement("span");

             s.innerHTML="请重新输入";

             s.className="error";

             li[this.index].appendChild(s);

             txt[this.index].value="";

         }

         else{

             var s=document.createElement("span");

             s.innerHTML="";

             s.className="sucess";

             li[this.index].appendChild(s)

         }

         break;

     case 3:

         if(this.value==""){

             var s=document.createElement("span");

             s.innerHTML="请输入号码";

             s.className="error";

             li[this.index].appendChild(s)

         }

         else if(this.value.length!=11){

             var s=document.createElement("span");

             s.innerHTML="号码格式错误";

             s.className="error";

             li[this.index].appendChild(s)

             txt[this.index].value="";

         }

         else{

             var s=document.createElement("span");

             s.innerHTML="";

             s.className="sucess";

             li[this.index].appendChild(s)

         }

         break;

     case 4:

         if(this.value==""){

             var s=document.createElement("span");

             s.innerHTML="请输入邮箱";

             s.className="error";

             li[this.index].appendChild(s)

         }

         else{

             var s=document.createElement("span");

             s.innerHTML="";

             s.className="sucess";

             li[this.index].appendChild(s)

         }

         break;

     }

   }

 }

登录后复制

相关推荐:

js实现登录与注册界面

ajax实现注册用户名全套流程

使用Ajax和forms实现注册用户所需功能

以上是javascript如何实现用户注册界面(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板