java web登录代码_Java Web 登录页面的实现代码实例
代码如下~
内有详细解释，最后有照片！
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="请输入正确的邮箱地址，例如：[email protected]";
//设置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";
}
}
.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;
}
显示密码字符
免费邮箱：
搜狐
网易
value="可不填" tabindex="5"/>
value="同意以下协议，提交" tabindex="8"/>
以上所述是小编给大家介绍的java web 登录页面的实现详解整合，希望对大家有所帮助
希望与广大网友互动？？
点此进行留言吧！