代码如下~
内有详细解释，最后有照片！
|
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= "用户名只能由中文、英文、数字及'_'、'-'组成" ; 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 的文字 mail_mess.innerhtml= "请输入正确的邮箱地址，例如：x@x.x" ; //设置id mail_mess 字体的颜色 mail_mess.style.color= "red" ; //设置 id 为f1 里的 name 为 mail 文本框 内的文字颜色 f1.mail.style.color= "red" ; //设置文本框颜色以及框的大小 f1.mail.style.border= "1px solid red" ; mail_ok.style.visibility= "hidden" ; } } </script>
<!-- 以下为 class 标签的 应用函数 +++ --> <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 位字符，可由中文、英文、数字及 "_" 、 "-" 组成</div> </div>
<div class = "label" ><b class = "s" >*</b>设置密码：</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= "" >网易</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= "同意以下协议，提交" tabindex= "8" /> </form> </body> </html> |
以上所述是小编给大家介绍的java web 登录页面的实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
原文链接：https://blog.csdn.net/qq_41664272/article/details/88696087
查看更多关于Java Web 登录页面的实现代码实例的详细内容...