原生js用户注册界面

闲来无事看了一下以前写的代码，总结了一个可能用到的上传一下： 

1.<!--邮箱注册 开始-->
<div id="reg">
<div id="wel">欢迎注册***</div>
<div class="reg1">
<form name="logForm" method="post" action="" onsubmit="return checkForm()">
  <div class="regCon">
    <em>用户名：</em>
    <span>＊</span>
    <input type="text" name="username" onblur="checkUser()">
    <strong id='str1'></strong>
    <p id='us'>用户名要求6～20个字符，可使用字母、数字、下划线</p>
   </div>
   <div class="password">
      <em>设置密码：</em>
      <span>＊</span>
      <input type="password" name="pwd" onblur="checkPass()">
      <strong id='str2'></strong>
      <p id='pa'>密码由字母、数字、特殊符号组成，区分字母大小写，长度在8-20位</p>
   </div>
   <div>
      <em>确认密码：</em>
      <span>＊</span>
      <input type="password" name="repwd" id="" onblur="checkRepass()">
      <strong id='str3'></strong>
      <p id="repa">请再输入一次密码</p>
   </div>
   <div>
      <em>手机号码：</em>
      <span>＊</span>
      <input type="text" name="phone" id="" onblur="checkPhone()">
      <strong id='str4'></strong>
      <p id="tel">请输入11位有效的手机号码</p>
   </div>
   <div>
      <em>验证码：</em>
      <span>＊</span>
      <input type="text" name="code" onblur="">
      <img onclick="this.src=this.src+'?'+Math.random()" src="<{:U('User/selfverify')}>">
      <p id='co'>请填写验证码</p>
   </div>
   
  <div id="regBut"><input type="submit" value="立即注册"></div>
</form>
    </div>
</div>

<script>


function checkUser(){
var user = document.logForm.username.value;
var us=document.getElementById('us');
var str1=document.getElementById('str1');
if( user.length<6){
us.innerHTML='用户名不得少于6个字符';
str1.style.backgroundPosition='3px -3px';
str1.style.display='inline-block';
us.style.color='red';return false;
}else if(user.length >20){
us.innerHTML='用户名不得多于20个字符';
str1.style.backgroundPosition='3px -3px';
str1.style.display='inline-block';
us.style.color='red';return false;
}else if(!isNaN(user)){
us.innerHTML='用户名不能全为数字！';
str1.style.backgroundPosition='3px -3px';
str1.style.display='inline-block';
us.style.color='red';return false;
}else{
us.innerHTML='输入正确！'; 
str1.style.backgroundPosition='3px 30px';
str1.style.display='inline-block';
us.style.color="green";
return true;
}
}
function checkPass(){
var pwd = document.logForm.pwd.value;
var pa = document.getElementById('pa');
var str2 = document.getElementById('str2');
if(pwd.length <8){
pa.innerHTML='密码不得小于8位！';
str2.style.backgroundPosition='3px -3px';
str2.style.display='inline-block';
pa.style.color='red';return false;
}else if(pwd.length >20){
str2.style.backgroundPosition='3px -3px';
str2.style.display='inline-block';
pa.innerHTML='密码不得小于8位！';
pa.style.color='red';return false;
}
else if(!isNaN(pwd)){
str2.style.backgroundPosition='3px -3px';
str2.style.display='inline-block';
pa.innerHTML='密码太弱：试试数字、字母混合！';
pa.style.color='red';return false;
}else{
str2.style.backgroundPosition='3px 30px';
str2.style.display='inline-block';
pa.innerHTML='输入正确！'; 
pa.style.color="green";
return true;
}
}
function checkRepass(){
var pwd = document.logForm.pwd.value;
var repa = document.getElementById('repa');
var repwd = document.logForm.repwd.value;
var str3 = document.getElementById('str3');
if(repwd != pwd){
str3.style.backgroundPosition='3px -3px';
str3.style.display='inline-block';
repa.innerHTML='两次密码不一致！';
repa.style.color='red';return false;
}else{
str3.style.backgroundPosition='3px 30px';
str3.style.display='inline-block';
repa.innerHTML='输入正确！'; 
repa.style.color="green";
return true;
}
}
function checkPhone(){
var phone =document.logForm.phone.value;
var tel = document.getElementById('tel');
var str4=document.getElementById('str4');
  if(phone.match(/^1[3|4|5|7|8]\d{9}$/)==null){
  str4.style.backgroundPosition='3px -3px';
str4.style.display='inline-block';
tel.innerHTML='手机号码格式错误！';
tel.style.color='red';return false;
}else{
str4.style.backgroundPosition='3px 30px';
str4.style.display='inline-block';
tel.innerHTML='输入正确！';
tel.style.color='green';
return true;
}
}
function checkForm(){
return checkUser() && checkPass() && checkRepass() && checkPhone();
}
</script>

其中的css样式：

*{font-family: 微软雅黑;}
#reg{
width:665px;height:600px;
border:1px solid #DBDBDB;
margin:0 auto;padding:45px 88px;
margin:50px auto;
line-height:28px;font-size:14px;
position: relative;
}
#wel{
margin:30px;text-align:center;font-size:24px;
width:160px;height:50px;line-height:50px;
cursor:pointer;margin-bottom:-1px;
border:dashed 1px #ccc;
}
em{
font-size:14px;float:left;
display:inline;width:100px;
text-align:right;
}
span{
float:left;width:20px;
height:28px;color:#f01904;
font:15px/30px "microsoft yahei";
}
p{
line-height:20px; font-size:12px;
clear:left; padding-left:120px; color:#999;
}
input{
width:222px;line-height:18px;
padding:5px;background-color:#fff;
border:1px solid #cbcccc;
}
#regBut input{
width:165px;height:40px;
background-color:#cf0500;
border:none;color:#fff;cursor:pointer;
}
#regBut{ 
padding-top:15px;text-align:center;
}
.reg1{
padding-top:18px;color:#333;
border-top:dashed 1px #ccc;
}
.regCon div{
zoom:1; overflow:hidden;padding:3px 0;
}
strong{
background-image:url('./2.png');
display: none;
float:right;
width:30px;
height:30px;
position:absolute;overflow:hidden;
}