客戶端驗證用戶名和密碼

1.概述

     在動態網站的用戶注冊頁面中，經常需要對用戶輸入的用戶名和密碼的位數及成員組成進行判斷，這樣可以規范用戶的注冊信息。例如本實例，要求用戶名由3-10位的字母、數字和下划線組成，密碼由6-20位的字母、數字、下划線和點“.”組成並且首字符為字母，這時就需要對用戶的輸入進行判斷，因此筆者編寫了兩個函數，分別用於驗證用戶輸入的用戶名和密碼是否合法。

 

2.技術要點

驗證用戶名是否由3-10位的字母、數字和下划線組成的正則表達式如下：

/^(\w){3,10}$/

驗證密碼是否由6-20位的字母、數字、下划線和點“.”組成的正則表達式如下：

/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$/

 

3.具體實現代碼

（1）使用JavaScript編寫一個用於驗證用戶名是否合法的函數checkeusername ()，該函數只有一個參數username，用於獲取輸入的用戶名，返回值為true或false。代碼如下：

<script language="javascript">
function checkeusername(username){
      var str=username;
       //在JavaScript中，正則表達式只能使用"/"開頭和結束，不能使用雙引號
      var Expression=/^(\w){3,10}$/; 
      var objExp=new RegExp(Expression);          //創建正則表達式對象
      if(objExp.test(str)==true){                   //通過正則表達式驗證
            return true;
      }else{
            return false;
      }
}
</script>

（2）使用JavaScript編寫一個用於驗證密碼是否合法的函數checkePWD()，該函數只有一個參數PWD，用於獲取輸入的密碼，返回值為true或false。代碼如下：

<script language="javascript">
function checkePWD(PWD){
      var str=PWD;
       //在JavaScript中，正則表達式只能使用"/"開頭和結束，不能使用雙引號
      var Expression=/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,19}$/; 
      var objExp=new RegExp(Expression);          //創建正則表達式對象
      if(objExp.test(str)==true){                   //通過正則表達式驗證
            return true;
      }else{
            return false;
      }
}
</script>

（3）調用checkeusername()函數和checkePWD()函數分別判斷用戶輸入的用戶名和密碼是否合法，如果不合法，將給予提示信息。關鍵代碼如下：

<script language="javascript">
function check(myform){
     if(myform.username.value==""){
      alert("請輸入用戶名!");myform.username.focus();return;
     }
     if(!checkeusername(myform.username.value)){
      alert("您輸入的用戶名不合法!");myform.username.focus();return;
     }
     if(myform.PWD.value==""){
      alert("請輸入密碼!");myform.PWD.focus();return;
     }
     if(!checkePWD(myform.PWD.value)){
      alert("您輸入的密碼不合法!");myform.PWD.focus();return;
     }
     if(myform.PWD1.value==""){
      alert("請確認密碼!");myform.PWD1.focus();return;
     }
     if(myform.PWD1.value!=myform.PWD.value){
      alert("您兩次輸入的密碼不一致，請重新輸入!");myform.PWD.focus();return;
     }
     myform.submit();
}
</script>