*仿IT英才网注册(限时提示)

最新推荐文章于 2009-04-28 09:33:00 发布

facepp

最新推荐文章于 2009-04-28 09:33:00 发布

阅读量693

点赞数

分类专栏： javascript java 文章标签： search input class function div javascript

本文链接：https://blog.csdn.net/facepp/article/details/2705364

版权

java 同时被 2 个专栏收录

252 篇文章 0 订阅

订阅专栏

javascript

58 篇文章 0 订阅

订阅专栏

效果见 http://www.cnithr.com/personal/register/user_register_login.php?reg_from=raffle20080615_69&tta=45&ttu=978167

注册登陆像个组件一样
四种状态:
初始
foucus
lostfoucs 检测 right/wrong

login.jsp
<%@ page language="java" import="java.util.*" contentType="text/html; charset=GB2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="img/base.css" type=text/css rel=stylesheet>
<LINK href="img/personal.css" type=text/css rel=stylesheet>
<SCRIPT language=javascript src="img/userreg.js"></SCRIPT>
</HEAD>
<BODY>
<DIV id=plocation style="WIDTH: 550px">
<P>当前位置：<A title=首页 href="http://www.cnithr.com/">首页</A> > 注册个人会员</P></DIV>
<FORM name=userReg action=user_register_login.php method=post>
<DIV id=preg>
<DL>
<DT id=top><IMG src="img/preg01.gif"> </DT>
<DD>
<DIV>
<P class=th>用户名： </P>
<P>
<INPUT class=intext id=reg_pname οnblur=lostFocus(this) οnfοcus=intoFocus(this) name=userName>
</P></DIV>
<DIV>
<P class=right id=hint_reg_pname>合法的用户名应该由a-z的小写英文字母、0-9的数字或下划线组成，长度应在4-25个字符之间，请勿使用空格，选择不会引起歧义的用户名。</P></DIV></DD>
<DD>
<DIV>
<P class=th>密　　码：</P>
<P><INPUT class=intext id=reg_ppass1 οnblur=lostFocus(this)
οnfοcus=intoFocus(this) type=password name=user_passwd> </P></DIV>
<DIV> <P class=right id=hint_reg_ppass1>密码可使用任何英文字母及阿拉伯数字组合，不得少于6个字符，并区分英文字母大小写。</P></DIV></DD>
<DD>
<DIV>
<P class=th>确认密码：</P>
<P><INPUT class=intext id=reg_ppass2 οnblur=lostFocus(this)
οnfοcus=intoFocus(this) type=password name=password> </P></DIV>
<DIV>
<P class=right id=hint_reg_ppass2>再次输入密码</P></DIV></DD>
<DD>
<DIV>
<P class=th>电子邮件：</P>
<P><INPUT class=intext id=reg_pmail οnblur=lostFocus(this)
οnfοcus=intoFocus(this) name=emailaddress> </P></DIV>
<DIV>
<P class=right id=hint_reg_pmail>推荐使用<A style="COLOR: yellow"
href="http://mail.cn.yahoo.com/?id=40160"
target=_blank>Yahoo不限量邮箱</A>。</P></DIV> </DD>
<DD>
<DIV>
<P class=th>验证码：</P>
<P></P>
<DIV style="MARGIN-RIGHT: 2px">
<INPUT class=intext id=reg_code name="VerifyCode"
οnblur=lostFocus(this) style="WIDTH: 68px" οnfοcus=intoFocus(this)
name=check_code>
</DIV>
<DIV>
<img id=img_reg_code src="VerifyCode.jsp" style="cursor: hand">
</DIV>
<P></P></DIV>

<DIV>
<P class=right id=hint_reg_code>请输入验证码。<SPAN style="CURSOR: pointer"
οnclick=win_regcode_reload();><U class=yellowz>看不清？换一张</U></SPAN> </P></DIV>
<DT>
<DIV id=bottom><IMG src="img/preg05.gif"></DIV></DT></DL>
<DIV style="WIDTH: 100%; PADDING-TOP: 10px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center"><INPUT
οnclick="return check_reg_frm();" type=image alt=同意以下条款，提交注册信息
src="img/btn_psubmit1.gif">
</DIV></DIV>
</FORM>
<SCRIPT language=JavaScript type=text/JavaScript>
document.getElementById('reg_pname').focus();
</SCRIPT>
</BODY></HTML>

userreg.js
function intoFocus(obj){
win_into_input('hint_'+obj.id,'in'); //填写提示信息,和信息的样式控制

}
function check_reg_frm(){ //提交表单

if( !win_test_reg_pname() ) { return false; }
if( !win_test_reg_ppass1() ) { return false; }
if( !win_test_reg_ppass2() ) { return false; }
if( !win_test_reg_pmail() ) { return false; }
if( !win_test_reg_hangye() ) { return false; }
if( !win_test_reg_code() ) { return false; }
return true;
}

function lostFocus(obj){
eval("win_test_"+obj.id+"()"); //失去焦点后检测格式正确还是不正确
}
function win_test_reg_pname(){ //检查用户名是否正确

search_str=document.getElementById('reg_pname').value;

if(search_str==''){
  //window.alert("请输入用户名！");
  win_into_input('hint_reg_pname','error');
     return false;
}
    var re = new RegExp("^([//w//-//.]{4,25})$");
    if (search_str.search(re) == -1) {
        //window.alert ("请输入有效合法的用户名！");
  win_into_input('hint_reg_pname','error');
        return false;
    }
    win_into_input('hint_reg_pname','testing');
return true;
}
function win_test_reg_ppass1(){   //检查密码是否正确
    var search_str;
search_str=document.getElementById('reg_ppass1').value;
if(search_str==''){
  //window.alert("请输入用户密码！");
  win_into_input('hint_reg_ppass1','error')
     return false;
}
    var re = new RegExp("^([//w//-]{6,})$");
    if (search_str.search(re) == -1) {
        //window.alert ("请输入至少6位有效字符的用户密码！");
  win_into_input('hint_reg_ppass1','error')
        return false;
    }
win_into_input('hint_reg_ppass1','right');
return true;
}

function win_test_reg_ppass2(){ // //检查确认密码是否正确
var search_str;

search_str=document.getElementById('reg_ppass2').value;
if(search_str==''){
  //window.alert("请输入确认密码！");
  win_into_input('hint_reg_ppass2','error')
     return false;
}
    var re = new RegExp("^([//w//-]{6,})$");
    if (search_str.search(re) == -1) {
        //window.alert ("请输入请输入至少6位有效字符的确认密码！");
  win_into_input('hint_reg_ppass2','error')
        return false;
    }
search_str_1=document.getElementById('reg_ppass1').value;

if(search_str_1!=search_str){
  //window.alert ("确认密码不一致，请重新输入确认密码！");
  win_into_input('hint_reg_ppass2','error');
  return false;
}
win_into_input('hint_reg_ppass2','right');
return true;
}

function win_regcode_reload(){ //刷新验证码
//alert("test");
var obj_img=document.getElementById('img_reg_code');
//var d = new Date();
//var s =d.getHours()+"m"+d.getMinutes()+"s"+d.getSeconds();
obj_img.src="VerifyCode.jsp?aa="+Math.random()+100;

}

// in right error beused testing
//[0]提示；[1]正确；[2]错误；[3]已经存在；[4]判断中
var arr_hint_reg_pname= Array('合法的用户名应该由a-z的小写英文字母、0-9的数字或下划线组成，长度在4-25个字符之间，请勿使用空格键，请选择不会引起歧义的用户名',
'用户名可以使用。',
'　填写错误！合法的用户名应该由a-z的小写英文字母、0-9的数字或下划线组成，长度应在4-25个字符之间',
'　用户名已经存在！请重新填写新的用户名。','正在校验名称是否已经存在...' );

var arr_hint_reg_ppass1= Array('密码可使用任何英文字母及阿拉伯数字组合，不得少于6个字符，并区分英文字母大小写',
'填写正确。',
'　填写错误！密码可使用任何英文字母及阿拉伯数字组合，不得少于6个字符，并区分英文字母大小写',
'','' );
var arr_hint_reg_ppass2= Array('请重新输入一遍密码',
'填写正确','　填写错误！请重新输入一遍密码',
'','' );
var arr_hint_reg_pmail= Array('请填写有效的E-mail邮箱地址，便于接收注册信息及找回丢失密码。<br/>推荐使用<a href="http://mail.cn.yahoo.com/?id=40160" target="_blank" style="color:red">Yahoo不限量邮箱</a>。',
'填写正确。',
'　填写错误！请填写有效的E-mail邮箱地址，便于接收注册信息及找回丢失密码。推荐使用<a href="http://mail.cn.yahoo.com/?id=40160" target="_blank" style="color:red">Yahoo不限量邮箱</a>。',
'','' );
var arr_hint_reg_code= Array('请输入验证码。<A class=redz onClick="win_regcode_reload();"><U>看不清？换一张</U></A>',
'验证码已填写。<A class=redz onClick="win_regcode_reload();"><U>看不清？换一张</U></A>',
'　填写错误！请输入验证码。<A class=redz onClick="win_regcode_reload();"><U>看不清？换一张</U></A>',
'','' );

未完成
使用ajax检测用户名是否存在

facepp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
*仿IT英才网注册(限时提示)

效果见 http://www.cnithr.com/personal/register/user_register_login.php?reg_from=raffle20080615_69&tta=45&ttu=978167注册登陆像个组件一样四种状态:初始foucus lostfoucs 检测 right/wrong login.jsp当前位置：http://www.cnith
复制链接

扫一扫