註冊頁面設計

舉個例子：咱們若是須要驗證表單是否符合要求。通常的咱們能夠用彈窗，可是這樣不美觀，咱們能夠用簡單的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";
      }
    }
   }