代码如下~

内有详细解释，最后有照片！

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";

}

}

.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="8"/>

以上所述是小编给大家介绍的java web 登录页面的实现详解整合，希望对大家有所帮助

希望与广大网友互动？？

点此进行留言吧！