DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 客戶端驗證用戶名和密碼的方法詳解
客戶端驗證用戶名和密碼的方法詳解
編輯:關於JavaScript     

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>

以上所述是小編給大家介紹的客戶端驗證用戶名和密碼的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved