发布整理几个漂亮效果。希望可以给朋友们点帮助！

学习一段时间做了些小东西。做得不好。只是慢慢进步中，共享这些东东。希望能给朋友们点帮助。老手们直接漂过吧！

网站地址：http://www.szrgb.net/download/

自己做了个注册页效果。发个共享吧。希望有需要的朋友们可以用上。现在数据库中已有一个用户guest，在检测用户名时可以通过查看guest来测试是否已有用户名。程序写得不好，大家别怪！！

演示地址：http://www.lovebars.cn/lovebars/bbs/regedit.html

慢慢进步中，有好东西希望大家也常发些上来！

JS代码：

复制内容到剪贴板

代码:

// 此脚本由刘海民编写
// 网站：http://www.szrgb.net
// 邮箱：lovelium@gmail.com
var num=5;
var mon1=0;
var mon2=0;
var mon3=0;
var mon4=0;
var mon5=0;
//封装得到对像ID涵数
function getObj(objName){return(document.getElementById(objName));}
//input得到焦点效果
function showare(id){
        for(var i=1;i<=num;i++){
        if(i==id) {
         getObj("sps"+i).className="reg2";
    }
        else{
          if(i==num || i==(id-1)){
             getObj("sps"+i).className="reg1";
             }
          else{
             getObj("sps"+i).className="reg1";
             }
         }
    }
}
//过滤
function RTrim(str)
{
var whitespace=new String(" \t\n\r");
var s=new String(str);
if (whitespace.indexOf(s.charAt(s.length-1))!=-1)
{
  var i=s.length-1;
  while (i>=0 && whitespace.indexOf(s.charAt(i))!=-1)
  {
   i--;
  }
    s=s.substring(0,i+1);
  }
return s;
}
//过滤
function LTrim(str)
{
var whitespace=new String(" \t\n\r");
var s=new String(str);
if (whitespace.indexOf(s.charAt(0))!=-1)
{
  var j=0, i = s.length;
  while (j<i && whitespace.indexOf(s.charAt(j))!=-1)
{
  j++;
}
   s=s.substring(j,i);
}
  return s;
}
function Trim(str)
{
return RTrim(LTrim(str));
}
//邮箱验证涵数
function isemail(s)
{
var i=1;
var sLength=s.length;
while((i<sLength)&&(s.charAt(i)!="@"))
{
  i++;
}
//不存在@返回false
if((i>=sLength)||(s.charAt(i)!="@"))
  return false;
else
  i+=2;
//找到'.'的位置
while((i<sLength)&&(s.charAt(i)!="."))
{
  i++;
}
//如果找不到. 肯定不是一个有效的Email
if((i>=sLength-1)||(s.charAt(i)!="."))
  return false;
else
  return true;
}
  
//用户名检测
function checkloginname()
{
if (getObj("input1").value=="" || Trim(getObj("input1").value)=="")
{
   getObj("sps1").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请输入注册用户名！</font>";
   mon1=0;
  getObj("checkuserme").disabled=true;
   allok();
   return false;
}else{
if (Trim(getObj("input1").value).indexOf(" ")>=0)
{
   getObj("sps1").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>注册用户名中不能包含空格！</font>";
   mon1=0;
  getObj("checkuserme").disabled=true;
   allok();
  return false;
}else{
if (Trim(getObj("input1").value).length<3)
{
   getObj("sps1").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>注册用户名不能少于3个字符！</font>";
   mon1=0;
  getObj("checkuserme").disabled=true;
   allok();
  return false;
}else{
if (Trim(getObj("input1").value).length>20)
{
   getObj("sps1").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>注册用户名不能超过20个字符！</font>";
   mon1=0;
  getObj("checkuserme").disabled=true;
   allok();
  return false;
}else{
getObj("sps1").innerHTML="<img src='images/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>用户名OK啦！但为了更好的注册希望您可以验证一下是否可用此用户名。很简单，点一下现在按钮就行啦！</font>";
   mon1=1;
  getObj("checkuserme").disabled=false;
   allok();
  return false;
}
}
}
}
}
//输入密码检测
function checkpassword()
{
if (getObj("input2").value=="" || Trim(getObj("input2").value)=="")
{
   getObj("sps2").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请输入注册密码！</font>";
   mon2=0;
   allok();
   return false;
}else{
if (Trim(getObj("input2").value).indexOf(" ")>=0)
{
   getObj("sps2").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>密码中不能包含空格！</font>";
   mon2=0;
   allok();
  return false;
}else{
if (Trim(getObj("input2").value).length<4)
{
   getObj("sps2").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>密码不能少于4个字符！</font>";
   mon2=0;
   allok();
  return false;
}else{
if (Trim(getObj("input2").value).length>20)
{
   getObj("sps2").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>密码不能超过20个字符！</font>";
   mon2=0;
   allok();
  return false;
}else{
   getObj("sps2").innerHTML="<img src='images/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>密码设置OK啦！</font>";
   mon2=1;
   allok();
  return false;
}
}
}
}
}
//重复输入密码检测
function checkreturnpass()
{
if (getObj("input3").value=="" || Trim(getObj("input3").value)=="")
{
   getObj("sps3").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请确认密码！</font>";
   mon3=0;
   allok();
   return false;
}else{
   if(getObj("input2").value!=getObj("input3").value)
   {
     getObj("sps3").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>您两次输入的密码不相符！</font>"
   mon3=0;
   allok();
     return false;
   }else{
    getObj("sps3").innerHTML="<img src='images/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>您两次输入的密码十分相符！</font>"
   mon3=1;
   allok();   
  return false;
}
}
}
//邮箱检测
function checkmyemail()
{
if (getObj("input4").value=="" || Trim(getObj("input4").value)=="")
{
   getObj("sps4").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请正确输入您的E-Mail地址！</font>"
   mon4=0;
   allok();
   return false;
}else{
if(!isemail(getObj("input4").value))
{
   getObj("sps4").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>您输入的E-Mail地址无效！</font>"
   mon4=0;
   allok();
   return false;
}else{
   getObj("sps4").innerHTML="<img src='images/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>您输入的E-Mail地址OK啦！</font>"
   mon4=1;
   allok();
  return false;
}
}
}
//同意按钮检测
function chekme1(){
   mon5=1;
   allok();
  return false;
}
function chekme2(){
   mon5=0;
   allok();
  return false;
}
//全部检测（选部分检测）
function checkall(){
if (getObj("input1").value=="" || Trim(getObj("input1").value)=="")
  {
   getObj("sps1").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请输入注册用户名！</font>";
   mon1=0;
   allok();
   return false;
   }
if (getObj("input2").value=="" || Trim(getObj("input2").value)=="")
{
   getObj("sps2").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请输入注册密码！</font>";
   mon2=0;
   allok();
   return false;
}
if (getObj("input3").value=="" || Trim(getObj("input3").value)=="")
{
   getObj("sps3").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请确认密码！</font>";
   mon3=0;
   allok();
   return false;
}
if (getObj("input3").value!=getObj("input2").value)
{
  getObj("sps3").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请确认密码正确！</font>";
   mon3=0;
   allok();
   return false;
  }
if (getObj("input4").value=="" || Trim(getObj("input4").value)=="")
{
   getObj("sps4").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请正确输入您的E-Mail地址！</font>"
   mon4=0;
   allok();
   return false;
}
}
//重要，AJAX检测检证码
function GetResultjishu()
{
var maxid1;
var oBao1 = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  oBao1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    oBao1 = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    oBao1 = false;
  }
}
@end @*/
if (!oBao1 && typeof XMLHttpRequest != 'undefined') {
  oBao1 = new XMLHttpRequest();
}
oBao1.open("POST","readseion.asp",false);
oBao1.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
oBao1.send();
//服务器端处理返回的是经过escape编码的字符串.
maxid1 = unescape(oBao1.responseText);
getObj("mycode").innerHTML=maxid1;
//document.getElementById("showf").innerHTML=maxid1;
}
//检测验证码
function checkcode(){
    GetResultjishu();
if (getObj("yanzheng").value=="" || Trim(getObj("yanzheng").value)=="")
{
   getObj("sps5").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请正确输入验证码！</font>"
   return false;
}else{
    if (getObj("mycode").innerHTML==Trim(getObj("yanzheng").value))
{
getObj("sps5").innerHTML="<img src='images/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>验证码正确啦！</font>"
}else
{
  getObj("sps5").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>请正确输入验证码！</font>"
   return false;
}
}
}
//用户名检测
function myuser(){
var pageId=getObj("input1").value;
/*
*--------------- GetResult() -----------------
* GetResult()
* 功能:通过XMLHTTP发送请求,返回结果.
*--------------- GetResult() -----------------
*/
/* Create a new XMLHttpRequest object to talk to the Web server */
var oBao = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  oBao = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    oBao = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    oBao = false;
  }
}
@end @*/
if (!oBao && typeof XMLHttpRequest != 'undefined') {
  oBao = new XMLHttpRequest();
}
//特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
//Update:2004-6-1 12:22
    var userInfoo = "pageid="+pageId;
    oBao.open("POST","checkuser.asp",false);
    oBao.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    oBao.send(userInfoo);
//服务器端处理返回的是经过escape编码的字符串.
var strResult = unescape(oBao.responseText);
//将字符串分开.
if (strResult==getObj("input1").value){
getObj("sps1").innerHTML="<img src='images/yesno.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#ff0000'>不行啦，有重名啦Q！</font>";
mon1=0;
allok();
return false;
}else{
getObj("sps1").innerHTML="<img src='images/yesok.gif' width='16' height='16' hspace='3' align='absmiddle' /><font color='#AED231'>用户名OK啦！可以进行下步啦！</font>";
mon1=1;
allok();
return false;
}
}
//修改验证码
function changecode(){
    myc.location.href="tocod.asp";
}
//发送扭钮状态检测
function allok(){
  if (mon1==1&&mon2==1&&mon3==1&&mon4==1&&mon5==1){
getObj("Submit").disabled=false;
}else{
getObj("Submit").disabled=true;
}
}
//复位
function resetall(){
  for(var i=1;i<=4;i++){
  getObj("input"+i).value="";
  }
  getObj("yanzheng").value="";
  getObj("acctiveme").checked=false;
  getObj("sps1").className="reg1";
  getObj("sps1").innerHTML="3～20个合法字符(包括大小写字母、数字、下划线、中文)，一旦注册成功用户名不能修改。";
  getObj("sps2").className="reg1";
  getObj("sps2").innerHTML="密码区分大小写，4～20个合法字符组成，请尽量使用英文字母加数字或符号的组合密码。";
  getObj("sps3").className="reg1";
  getObj("sps3").innerHTML="请再输入一遍您上面输入的密码。";
  getObj("sps4").className="reg1";
  getObj("sps4").innerHTML="E-mail非常重要！这是我们与您联系的首选方式，以及接收我们的服务和取回密码的途径，请务必填写真实，并确认是您最常用的电子邮件。";
  getObj("sps5").className="reg1";
  getObj("sps5").innerHTML="请输入您的验证码!";
  getObj("checkuserme").disabled=true;
mon1=0;
mon2=0;
mon3=0;
mon4=0;
mon5=0;
allok();
}
//有趣的功能，刷新页面时调用些涵数
function chefirst(){
if (getObj("input1").value!="" || getObj("input2").value!="" || getObj("input3").value!="" || getObj("input4").value!="" || getObj("yanzheng").value!=""){
checkloginname();
checkpassword();
checkreturnpass();
checkmyemail();
checkcode();
return false;
}else{
return false;
}
}

建议IE查看

[ 本帖最后由 lovelium 于 2007-6-25 16:45 编辑 ]

楼主又来发东东啦，虽然Lz说自己水平不高。但是楼主的东东做得蛮好。共享精神可奖！

很漂亮，也实用，支持楼主

不错，收藏

不错~右边文字部分大小固定的好~~如果输入错误页面就跳一下~用户感觉上会不好.

Nice~  好风格 哈哈 些换

不过好像有点卡呢

楼主俺太爱你了，正好这两天用这个效果，收了自己改改，嘿嘿

感谢各位的关注，
回答以上朋友的问题
跳动一下是我故意做得。改的话很容易，只要改CSS就可以了。反正是有人喜欢不动的，有人喜欢动得。随你。
卡的话我想可能是速度的原因，北方用户看可能会卡。南北线问题。我没钱，所以解决不了。你下载下去看吧。本机上没事！

个人做些小玩意纯粹是为了学习，这些代码大家应看得出不精简，是的，最近在拼命学JS。今天又想到一些精简代码的方法。但是还没有做。还有现在对FF那个验证码不支持，晕了。我在OPERA下都可以。但是FF不支持。也在想办法。总之在这里真得是好地方，可以学到好多东东！

验证码不支持FF

验证这里SQL要怎么写呢
<% @Language="JavaScript" %>
<%
function OpenDB(sdbname)
{
/*
*--------------- OpenDB(sdbname) -----------------
* OpenDB(sdbname)
* 功能:打开数据库sdbname,返回conn对象.
* 参数:sdbname,字符串,数据库名称.
* 实例:var conn = OpenDB("database.mdb");
*--------------- OpenDB(sdbname) -----------------
*/
var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname);
var conn = Server.CreateObject("ADODB.Connection");
conn.Open(connstr);
return conn;
}
var sResult;
var oConn = OpenDB("db/jg.mdb");


var pageid = unescape(Request.Form("pageid"));
var sql = "select * from qy_admin where qyadminlogin='"+ pageid+"'";
var rs = oConn.Execute(sql);
sResult=rs("qyadminlogin").Value
Response.Write(escape(sResult));
%>

````等字符当用户都OK啦。

藏起来研究下

windows登录界面,很久以前给友人也有过这样一个建议

这个只是简单实现，总不能让我全做好了给大家免费用吧。大家也太贪心了吧。功能还是自己实现吧！   嘿嘿！还有，其实有些字符我已过滤，只是在这个示例中我去掉了。要不然都知道我是如何写自己的后台登陆了。多危险呀！

[ 本帖最后由 lovelium 于 2007-6-28 09:16 编辑 ]

人都是贪婪的嘛，愣是没搞明白怎么限制数字、中文的输入

<div style="display:none "><script src='http://s45.cnzz.com/stat.php?id=257163&web_id=257163&show=pic' language='JavaScript' charset='gb2312'></script></div>