⽤纯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个字符';}//okelse{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个字符，请使⽤字母加数字或符号的组合密码，不能单独使⽤字母、数字或符号。
