注册页面设计

举个例子：咱们若是须要验证表单是否符合要求。通常的咱们能够用弹窗，可是这样不美观，咱们能够用简单的js调用，来实现。下面是一个文本框，注意id 要写上，这里是email。另一个是chknew_email 这个是用来显示错误信息的。

<td height="30" align="left"><input name="email" type="text"
       id="email" size="30" onBlur="chkreginfo(form_reg,3)" /> <font color="#FF0000">*</font>&nbsp;
                  <div id="chknew_email" style="color:#FF0000"></div></td>

js文件以下：这里有几个比较特殊的，一个是电话号码，一个是邮箱，这个须要用正则表达式，验证下。其余就没什么了。

function checkregtel(regtel){
 var str=regtel;
 var Expression=/^13(\d{9})$|^15(\d{9})$|^189(\d{8})$/;
 var objExp=new RegExp(Expression);
 if(objExp.test(str)==true){
  return true;
 }else{
  return false;
 }
}
function checkregemail(emails){
 var str=emails;
 var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
 var objExp=new RegExp(Expression);
 if(objExp.test(str)==true){
  return true;
 }else{
  return false;
 }
}
function chkreginfo(form,mark){
  if(mark==0 || mark=="all"){
     if(form.username.value==""){
    chknew_username.innerHTML="请输入登陆名！";
    form.username.style.backgroundColor="#FF0000";
    return false;
     }else{
       chknew_username.innerHTML="";
    form.username.style.backgroundColor="#FFFFFF";
     }
   }
  if(mark==1 || mark=="all"){
     if(form.password.value==""){
    chknew_password.innerHTML="请输入密码！";
    form.password.style.backgroundColor="#FF0000";
    return false;
     }else{
       chknew_password.innerHTML="";
    form.password.style.backgroundColor="#FFFFFF";
     }
   }
  if(mark==2 || mark=="all"){
      if(form.password2.value==""){
     chknew_password2.innerHTML="请输入确认密码！";
     form.password2.style.backgroundColor="#FF0000";
     return false;
      }else if(form.password.value!=form.password2.value){
       chknew_password2.innerHTML="密码与确认密码不一致！";
     form.password2.style.backgroundColor="#FF0000";
     return false;
      }else{
        chknew_password2.innerHTML="";
     form.password2.style.backgroundColor="#FFFFFF";
      }
  }
  if(mark==3 || mark=="all"){
     if(form.email.value==""){
    chknew_email.innerHTML="请输入E-mail地址！";
    form.email.style.backgroundColor="#FF0000";
    return false;
     }else if(!checkregemail(form.email.value)){
      chknew_email.innerHTML="邮箱地址的格式不正确！";
      form.email.style.backgroundColor="#FF0000";
      return false;
    }else{
       chknew_email.innerHTML="";
       form.email.style.backgroundColor="#FFFFFF";
    }
   }
  if(mark==4 || mark=="all"){
  if(form.tel.value==""){
      chknew_tel.innerHTML="请输入电话号码！";
      form.tel.style.backgroundColor="#FF0000";
      return false;
      }else if(!checkregtel(form.tel.value)){
      chknew_tel.innerHTML="电话号码的格式不正确！";
      form.tel.style.backgroundColor="#FF0000";
      return false;
      }else if(isNaN(form.tel.value)){
         chknew_tel.innerHTML="电话号由数字组成！";
      form.tel.style.backgroundColor="#FF0000";
      return false;
      }else{
         chknew_tel.innerHTML="";
      form.tel.style.backgroundColor="#FFFFFF";
      }
    }
   }