代碼如下~
內(nèi)有詳細解釋，最后有照片！
|
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
<html><script type="text/javascript">function inuser(){ username_mess.style.visibility="visible";}function outuser(){ //獲取name 為 usesrname 的文本 u=f1.username.value; f1.username.style.border="1px solid aaaaaa"; if(u==""){ username_mess.style.visibility="hidden"; return; } //正則表達式 reg=/.{4,20}/; if(!reg.test(u)){ username_mess.innerhtml="用戶名長度只能在4-20位字符之間"; username_mess.style.color="red"; f1.username.style.color="red"; f1.username.style.border="1px solid red"; username_ok.style.visibility="hidden"; return; } reg=/^[\u4e00-\u9fa5 \w-]{4,20}$/; if(reg.test(u)){ username_ok.style.visibility="visible"; username_mess.innerhtml=""; f1.username.style.color="black"; }else{ username_mess.innerhtml="用戶名只能由中文、英文、數(shù)字及'_'、'-'組成"; username_mess.style.color="red"; f1.username.style.color="red"; f1.username.style.border="1px solid red"; username_ok.style.visibility="hidden"; } }function inmail(){ mail_mess.style.visibility="visible";}function outmail(){ v=f1.mail.value; f1.mail.style.border="1px solid aaaaaa"; if(v==""){ mail_mess.style.visibility="hidden"; return; } reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; if(reg.test(v)){ mail_ok.style.visibility="visible"; mail_mess.innerhtml=""; f1.mail.style.color="black"; }else{ //更改id mail_mess 的文字 //設(shè)置id mail_mess 字體的顏色 mail_mess.style.color="red"; //設(shè)置 id 為f1 里的 name 為 mail 文本框 內(nèi)的文字顏色 f1.mail.style.color="red"; //設(shè)置文本框顏色以及框的大小 f1.mail.style.border="1px solid red"; mail_ok.style.visibility="hidden"; } }</script> <!-- 以下為 class 標簽的 應(yīng)用函數(shù) +++ --><style type="text/css">.label{ position:absolute ; right:70%;} .fi{ position:relative ; left:30%;}.clr{ height:20px ; color:aaaaaa; font-size:12px; visibility:hidden;} .s{ font-weight:lighter ; color:red;} .text{ font-family:宋體; width:200px;} .v{ color:cccccc; font-size:12px ;} a{ font-size:12px ;} .btn-img{ position:relative ; left:30%;}.ok{ background-image:url('ok.jpg'); width:17px; height:16px; visibility:hidden;} </style><body> <form id="f1"> <div class="label"><b class="s">1*</b>用戶名：</div> <div class="fi"> <input type="text" name="username" class="text" tabindex="1" onfocus="inuser()" onblur="outuser()"/><label id="username_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label><br/><div id="username_mess" class="clr">4-20位字符，可由中文、英文、數(shù)字及"_"、"-"組成</div> </div> <div class="label"><b class="s">*</b>設(shè)置密碼：</div> <div class="fi"> <input type="password" name="pwd" class="text" tabindex="2"/> <input type="checkbox" name="visi" id="viewpwd"/> <label class="v">顯示密碼字符</label><br/> <div class="clr"></div> </div> <div class="label"><b class="s">*</b>確認密碼：</div> <div class="fi"> <input type="password" name="pwd2" class="text" tabindex="3"/><br/><div class="clr"></div> </div> <div class="label"><b class="s">*</b>郵箱：</div> <div class="fi"> <input type="text" name="mail" class="text" tabindex="4" onfocus="inmail()" onblur="outmail()"/> <label id="mail_ok" class="ok"><img src="ok.jpg" width=17px height=16px/></label> <label class="v">免費郵箱：</label> <a href="">搜狐</a> <a href="">網(wǎng)易</a><br/> <div id="mail_mess" class="clr">請輸入正確的郵箱地址</div> </div> <div class="label">推薦人用戶名：</div> <div class="fi"> <input type="text" name="referrer" class="text"value="可不填" tabindex="5"/><br/> <div class="clr"></div> </div> <input type="button" class="btn-img" id="registsubmit"value="同意以下協(xié)議，提交" tabindex="8"/> </form> </body></html> |
以上所述是小編給大家介紹的java web 登錄頁面的實現(xiàn)詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對服務(wù)器之家網(wǎng)站的支持！
原文鏈接：https://blog.csdn.net/qq_41664272/article/details/88696087
