用纯javascript和html编写仿淘宝注册页面（带源码）
本地javascript（纯天然代码）验证，本地验证主要分2部分：
一、和用户的表单交互
首先需要编写用于表单交互的函数，该函数需要在页面加载时加载，格式如下：window.onload=function (){}
接着用getElement的方法获取相应的标签在function函数里定义为全局变量。
然后在function内编写这些变量的事件，用到的三大事件分别为：onfocus（获取焦点事件）、onkeyup（键盘事件）、onblur（失去焦点事件）。
用法：以onfocus为例如下：
pwd.onfocus=function(){//变量pwd的获取焦点事件
pwd_msg.style.display="block";
pwd_msg.innerHTML='<i class="ati"></i>6-16个字符，请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号。 ';
}
二、点击提交按钮是对表单的检验
主要用到onsumit（表单提交前）事件，用法如下：
<form method="post" action="aupload.php" enctype="multipart/form-data" onsubmit="return check()">
需要在function外单独再编写check函数。
三、完整源代码及运行截图献上
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 验证码</title> <style type="text/css"> #header{ width:95%; height:100px; padding-left:5%; clear:both; border-bottom:#CCC dashed thin ;} #header img{width:80px; height:80px; float:left; border-radius:40px; margin-top:10px ;margin-bottom:10px; } #header h1{display:inline-block; margin-left:20px;} #main{ width:100%; height:auto;} body,div,dl,dd,ul,ol,li{ margin:0;padding:0; font:12px/1.5"宋体","Arial",color:#666;} body{background:url(uploads/0911454230045.png) no-repeat; background-size:700px,450px; background-position:50px 120px;} img{ border:none} input,select,img{ vertical-align:middle}/*有疑惑*/ lable{vertical-align:middle} form{ width:450px; height:500px; margin-top:130px; margin-right:80px;float:right; } form div{ overflow:hidden; clear:both} form div label{float:left; clear:both;} form div label .text{ width:152px; height:26px; padding:0 2px; border:1px solid #ccc } form div label b{ font-weight:normal; font-size:12px; color:#ccc; visibility:hidden}/*有疑惑*/ form div em{ display:inline-block; font-family:12px; text-align:center;color:#fff; vertical-align:middle; font-style:normal; width:53px;height:15px; line-height:15px; background-color:#ffd099} form div .active{ background-color:#ff6600} div span{ display:inline-block; width:80px; text-align:right} .submitBtn{width:135px; height:33px; background:url(); color:red; margin:20px 0 0 80px;}/*需完善*/ .changeimg{ width:22px; height:22px; display:inline-block; vertical-align:middle;background:url(uploads/img1.png) no-repeat 5px 1px}/*需完善*/ .msg{ line-height:14px; color:#999; float:left; margin-left:5px;margin-top:2px; display:none; } .msg i{ display:inline-block; vertical-align:middle; width:25px; height:20px; background:url(uploads/img1_1.png) no-repeat} /*.msg .ati{ background:0 -71px} .msg .err{background:0 -39px} .msg .ok{background:0 -99px} */ </style> <script type="text/javascript"> function getLength(str){ return str.replace(/[^\x00-xff]/g,"xx").length;//使用替换函数将正则值替换为xx } function findStr(str,n){//检测是否密码为连续的相同字符 var tmp=0; for(var i=0;i<str.length;i++){ if(str.charAt(i)==n){ tmp++; } } return tmp; } var code = ""; //验证码 //生成验证码 function createCode(){ code = "";//重新初始化验证码 var num = 4; //验证码位数 var codeList = new Array(1,2,3,4,5,6,7,8,9,0,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'); //验证码内容 //循环获取每一位验证码 for(var i = 0; i < num; i++){ //随机数 * 验证码候选元素数量 = 候选元素数组下标 code += codeList[Math.floor(Math.random() * codeList.length)]; } document.getElementById("txtCode").value = code; } window.onload=function (){ createCode(); //加载验证码 var alnput=document.getElementsByTagName('input'); var oName=alnput[0]; var pwd=alnput[1]; var pwd2=alnput[2]; var ma1=alnput[3]; var ma2=alnput[4]; var aP=document.getElementsByTagName('p');//ap中的P为大写 var name_msg=aP[0]; var pwd_msg=aP[1]; var pwd2_msg=aP[2]; var ma=aP[3]; var count=document.getElementById('count'); var aEm=document.getElementsByTagName('em'); var name_length=0; //1.数字、字母(不分大小写)、汉字、下划线 //2. 5-25字符，推荐使用中文 //\u4e00-\u9fa5(这是汉字的范围) var re=/[^\w\u4e00-\u9fa5]/g; var re_n=/[^\d]/g; var re_t=/[^a-zA-Z]/g; //用户名 oName.onfocus=function(){ name_msg.style.display="block"; name_msg.innerHTML='<i class="ati"></i>5-25个字符'; }//获取焦点事件 oName.onkeyup=function(){ count.style.visibility="visible";//有疑惑 name_length=getLength(this.value); count.innerHTML=name_length+"个字符"; if(name_length==0){ count.style.visibility="hidden"; } }//键盘事件 oName.onblur=function(){ //含有非法字符 var re=/[^\w\u4e00-\u9fa5]/g; if(re.test(this.value)){ name_msg.innerHTML='<i class="err"></i>含有非法字符'; } //不能为空 else if(this.value==""){ name_msg.innerHTML='<i class="err"></i>不能为空'; } //长度超过25个字符 else if(name_length>25){ name_msg.innerHTML='<i class="err"></i>长度超过25个字符'; } //长度少于6个字符 else if(name_length<6){ name_msg.innerHTML='<i class="err"></i>长度少于6个字符'; } //ok else{ name_msg.innerHTML='<i class="ok"></i>ok'; } }//失去焦点事件 //密码 pwd.onfocus=function(){ pwd_msg.style.display="block"; pwd_msg.innerHTML='<i class="ati"></i>6-16个字符，请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号。'; } pwd.onkeyup=function(){ //大于5字符"中" if(this.value.length>5){ aEm[1].className="active"; pwd2.removeAttribute("disabled");//移除禁用属性 pwd2_msg.style.display="block"; } else{ aEm[1].className=""; pwd2_msg.style.display="none"; pwd2.disabled="true";//重新设置为禁用状态 } //大于10个字符"强" if(this.value.length>10){ aEm[2].className="active"; pwd2_msg.style.display="block"; } else{ aEm[2].className=""; } } pwd.onblur=function(){ var m=findStr(pwd.value,pwd.value[0]); //不能为空 if(this.value==""){ pwd_msg.innerHTML='<i class="err"></i>不能为空'; } //不能用相同字符 else if(m==this.value.length){ pwd_msg.innerHTML='<i class="err"></i>不能使用相同字符'; } //长度应为6-16个字符 else if(this.value.length<6||this.value.length>16){ pwd_msg.innerHTML='<i class="err"></i>长度应为6-16个字符'; } //不能全为数字 else if(!re_n.test(this.value)){ pwd_msg.innerHTML='<i class="err"></i>不能全为数字'; } //不能全为字母 else if(!re_t.test(this.value)){ pwd_msg.innerHTML='<i class="err"></i>不能全为字母'; } //ok else{ pwd_msg.innerHTML='<i class="err"></i>ok'; } } //确认密码 pwd2.onblur=function(){ if(this.value!=pwd.value){ pwd2_msg.innerHTML='<i class="err"></i>两次输入密码不一致！'; } else{ pwd2_msg.innerHTML='<i class="err"></i>ok！'; } } //验证码 ma1.onblur=function(){ if(ma1.value==code){ ma.style.display="block"; ma.innerHTML='<i class="ati"></i>ok'; } else{ ma.style.display="block"; ma.innerHTML='<i class="ati"></i>验证码输入有误'; code = ""; createCode(); //生成新的验证码 } } } //下面为check函数进行提交前的验证 function check(){ var alnput=document.getElementsByTagName('input'); var oName=alnput[0]; var pwd=alnput[1]; var pwd2=alnput[2]; var ma1=alnput[3]; var ma2=alnput[4]; var subt=alnput[5]; var aP=document.getElementsByTagName('p');//ap中的P为大写 var name_msg=aP[0]; var pwd_msg=aP[1]; var pwd2_msg=aP[2]; var count=document.getElementById('count'); var aEm=document.getElementsByTagName('em'); var name_length=0; //1.数字、字母(不分大小写)、汉字、下划线 //2. 5-25字符，推荐使用中文 //\u4e00-\u9fa5(这是汉字的范围) var re=/[^\w\u4e00-\u9fa5]/g; var re_n=/[^\d]/g; var re_t=/[^a-zA-Z]/g; var k=1; var re=/[^\w\u4e00-\u9fa5]/g; //用户名 name_length=getLength(oName.value); if (oName.value==""){ name_msg.style.display="block"; name_msg.innerHTML='<i class="ati"></i>请输入用户名'; k=k+1; } else if(re.test(oName.value)){ name_msg.innerHTML='<i class="err"></i>含有非法字符'; k=k+1; } //长度超过25个字符 else if(name_length>25){ //name_msg.innerHTML='<i class="err"></i>长度超过25个字符'; k=k+1; } //长度少于6个字符 else if(name_length<6){ // name_msg.innerHTML='<i class="err"></i>长度少于6个字符'; k=k+1; } else{ k=k+0; } //密码 var m=findStr(pwd.value,pwd.value[0]); //不能为空 if(pwd.value==""){ pwd_msg.style.display="block"; // pwd_msg.innerHTML='<i class="ati"></i>不能为空'; k=k+1; } //不能用相同字符 else if(m==pwd.value.length){ k=k+1; } //长度应为6-16个字符 else if(pwd.value.length<6||pwd.value.length>16){ k=k+1; } //不能全为数字 else if(!re_n.test(pwd.value)){ k=k+1; } //不能全为字母 else if(!re_t.test(pwd.value)){ k=k+1; } //ok else{ k=k+0; } //确认密码 if(pwd2.value!=pwd.value){ pwd2_msg.innerHTML='<i class="err"></i>两次输入密码不一致！'; k=k+1; } else{ k=k+0; } //检验验证码输入是否有误 if(ma1.value!=ma2.value){ k=k+1; } else{ k=k+0; } //下面的操作计算check函数的返回值 if(k!=1){ return false; } else{ aEm[1].className=""; subt.value='正在提交'; subt.disabled='true'; return true; } } </script> </head> <body> <div id="header"> <img src="uploads/a1.jpg" /><h1>web学园</h1> </div> <div id="main"> <form method="post" action="aupload.php" enctype="multipart/form-data" onsubmit="return check()"> <div> <label> <span>会员名：</span><input type="text" class="text"/></label> <p class="msg"><i class="ati"></i>5-25个字符，一个汉字为2个字符，推荐使用中文会员名</p> </div> <div> <label> <span></span><b id="count">0个字符</b></label> </div> <div> <label><span>登录密码：</span><input type="password" class="text"/></label> <p class="msg" style="width:200px; height:50px;"><i class="err"></i>5-25个字符，一个汉字为2个字符，推荐使用中文会员名</p> </div> <div style="margin:3px 0 10px 0"> <label><span></span><em class="active">弱</em><em>中</em><em>强</em></label> </div> <div style="margin-bottom:20px;"> <label><span>确认密码：</span><input type="password" class="text" disabled=""/></label> <p class="msg"><i class="ati"></i>请在输入一次</p> </div> <div> <label><span>验证码：</span><input type="text" style="width:50px;"/><input id="txtCode" type="text" style=" width:60px;" readonly /><a href="#" class="changeimg" title="重新获取验证码" onClick="createCode()"></a></label> <p class="msg"><i class="ati"></i>验证码输入有误</p> </div> <div> <input class="submitBtn" type="submit" value="同意协议并注册" onclick=""/> </div> </form> </div> </body> </html>
