java实现修改密码页面,批改密码的jsp页面，类似于javaeye修改密码的界面及验证...

修改密码的jsp页面，类似于javaeye修改密码的界面及验证

这两天做了个修改密码的jsp界面，基本上模仿了javaeye修改密码的验证方式。就是提示错误的隐藏层背景没有javaeye做的漂亮，算是基本上达到验证的目的了吧！

不足：

1.js中有很多代码可以重用，由于技术还存在缺陷，并没有把可重用的代码逐一进行分离。

2.代码没能很好的注释。可能写的有些随意，不利于后期的维护！

页面代码如下(欢迎各位网友使用及评论并且指出不足之处)：

显示文本框的值

//旧密码调用鼠标跟随效果

function old_pass(status,ev,id,label){

var lab=document.getElementById(label).innerText;

if(lab==1){

old_pass_confirm(status,ev,id)

}

}

//旧密码验证跟随效果

function old_pass_confirm(status,ev,id){

var value=document.getElementById(id).value;

var object=document.getElementById(id);

var var_length=value.length;

if(var_length==0){

var lab9='请填写值';

document.getElementById('lable1').innerText=lab9;

fu(status,ev);

object.setAttribute("className","input");

}else{

var show = document.getElementById('showlianxi');

show.style.display='none';

object.setAttribute("className","");

}

}

//密码框调用鼠标跟随效果

function showlianxi(status,ev,id,label){

var lab=document.getElementById(label).innerText;

if(lab==1){

yanzheng(status,ev,id);

}

}

function yanzheng(status,ev,id){

var value=document.getElementById(id).value;

var object=document.getElementById(id);

var var_length=value.length;

var reg_small=new RegExp("^[a-z][a-z]*$");

var reg_big=new RegExp("^[A-Z][A-Z]*$");

var reg_num=new RegExp("^[0-9][0-9]*$");

if(var_length==0){

var lab1='请填写值';

document.getElementById('lable1').innerText=lab1;

fu(status,ev);

object.setAttribute("className","input");

}else if(var_length<6&&var_length>0){

var lab2='最小长度为6,当前长度为'+var_length+'.';

document.getElementById('lable1').innerText=lab2;

fu(status,ev);

object.setAttribute("className","input");

} else if(var_length>20){

var lab3='最大长度为20,当前长度为'+var_length;

document.getElementById('lable1').innerText=lab3;

fu(status,ev);

object.setAttribute("className","input");

}else if(value.match(reg_small)||value.match(reg_big)){

var lab4='密码不能只包含小写或大写字母';

document.getElementById('lable1').innerText=lab4;

fu(status,ev);

object.setAttribute("className","input");

}else if(value.match(reg_num)){

var lab5='密码不能只包含数字';

document.getElementById('lable1').innerText=lab5;

fu(status,ev);

object.setAttribute("className","input");

}

else{

var show = document.getElementById('showlianxi');

show.style.display='none';

object.setAttribute("className","");

}

}

//确认密码调用鼠标跟随效果

function showdiv(status,ev,id,conf_id,label){

var lab=document.getElementById(label).innerText;

if(lab==1){

confirm_pass(status,ev,id,conf_id);

}

}

//验证再次输入的密码效果

function confirm_pass(status,ev,id,conf_id){

var value1=document.getElementById(id).value;

var value2=document.getElementById(conf_id).value;

var object=document.getElementById(conf_id);

var var_length=value2.length;

if(var_length==0){

var lab6='请填写值';

document.getElementById('lable1').innerText=lab6;

fu(status,ev);

object.setAttribute("className","input");

}else if(value1!=value2){

var lab7='两次填写不一致，请重新填写';

document.getElementById('lable1').innerText=lab7;

fu(status,ev);

object.setAttribute("className","input");

}else{

var show = document.getElementById('showlianxi');

show.style.display='none';

object.setAttribute("className","");

}

}

//鼠标跟随效果

function fu(status,ev){

var e= ev||window.event;

var show = document.getElementById('showlianxi');

var obj=e.target||e.srcElement;

switch(status){

case 'over':

show.style.position='absolute';

if(e.pageX){

show.style.left=e.pageX+20+'px';

show.style.top=e.pageY+'px';

}

else{

show.style.left=e.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft+5;

show.style.top=e.clientY + document.body.scrollTop+ document.documentElement.scrollTop+5;

}

show.style.display='block';

break;

case 'out':

show.style.display='none';

break;

}

}

//旧密码的onblur事件调用此方法。

function old_psss_onblur(test,label){

var value= document.getElementById(test).value;

var object= document.getElementById(test);

var var_length=value.length;

document.getElementById(label).innerText=1;

if(var_length==0){

object.setAttribute("className","input");

return false;

}else{

object.setAttribute("className","");

return true;

}

}

//密码的onblur事件调用此方法。

function func(test,label){

var reg_small=new RegExp("^[a-z][a-z]*$");

var reg_big=new RegExp("^[A-Z][A-Z]*$");

var reg_num=new RegExp("^[0-9][0-9]*$");

var value= document.getElementById(test).value;

var object= document.getElementById(test);

var var_length=value.length;

document.getElementById(label).innerText=1;

if(value==null||value==''){

object.setAttribute("className","input");

return false;

}else if(var_length<6&&var_length>0){

object.setAttribute("className","input");

return false;

}else if(var_length>20){

object.setAttribute("className","input");

return false;

}else if(value.match(reg_small)||value.match(reg_big)){

object.setAttribute("className","input");

return false;

}else if(value.match(reg_num)){

object.setAttribute("className","input");

return false;

}else{

object.setAttribute("className","");

return true;

}

}

//确认密码的onblur事件调用此方法

function new_password_confirm(new_password,new_password_confirmation,label){

var new_passvalue=document.getElementById(new_password).value;

var new_pass_confirmvalue=document.getElementById(new_password_confirmation).value;

var new_pass_confirm_obj=document.getElementById(new_password_confirmation);

document.getElementById(label).innerText=1;

if(new_pass_value.length==0){

new_pass_confirm_obj.setAttribute("className","input");

return false;

}else if(new_pass_value!=new_pass_confirm_value){

new_pass_confirm_obj.setAttribute("className","input");

return false;

}else{

return true;

}

}

function tijiao(){

if(old_psss_onblur('username','old_pass')&&func('new_password','new_password_control')&&new_password_confirm('new_password','new_password_confirmation','new_password_confirmation_control')){

document.reform.submit();

}

}

.input{

border-color:#FF0000;

border-style:solid;

}

旧密码：
新密码：		密码不允许纯数字或字母，长度大于5
确认新密码：

0

0

0