1. 程式人生 > >利用JS驗證使用者名稱是否合法

利用JS驗證使用者名稱是否合法

驗證分為兩部分,第一部分是前端驗證(如下所示),另外一種是伺服器端驗證。以下程式碼只實現了驗證使用者名稱是否合法,如果不合法就阻止提交。
JS驗證使用者名稱是否合法

<html>
<head>
    <title>表單驗證</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type = "text/CSS"></style>
<script type="text/javascript"
>
/* 表單驗證 */ var flag = false; // flag 如果為true(即使用者名稱合法)就允許表單提交, 如果為false(即使用者名稱不合法)阻止提交 // 當滑鼠聚焦於使用者名稱 function focus_username() { // 找到後面的div, id = result_name var nameObj = document.getElementById("result_name"); nameObj.innerHTML = "使用者名稱不能包含特殊字元且為5~20位"; nameObj.style.color="#999"
; } // 當滑鼠不聚焦於使用者名稱input function blur_username() { // 找到id=result_name的div var nameObj = document.getElementById("result_name"); // 判斷使用者名稱是否合法 var str2 = check_user_name(document.form1.username.value); nameObj.style.color="red"; if ("該使用者名稱合法" == str2) { flag = true; nameObj.innerHTML = str2; } else
{ nameObj.innerHTML = str2; } } // 檢查使用者名稱是否合法 合法就返回"該使用者名稱合法" function check_user_name(str) { var str2 = "該使用者名稱合法"; if ("" == str) { str2 = "使用者名稱為空"; return str2; } else if ((str.length < 5) || (str.length > 20)) { str2 = "使用者名稱必須為5 ~ 20位"; return str2; } else if (check_other_char(str)) { str2 = "不能含有特殊字元"; return str2; } return str2; } // 驗證使用者名稱是否含有特殊字元 function check_other_char(str) { var arr = ["&", "\\", "/", "*", ">", "<", "@", "!"]; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < str.length; j++) { if (arr[i] == str.charAt(j)) { return true; } } } return false; } // 根據驗證結果確認是否提交 function check_submit() { if (flag == false) { return false; } return true; }
</script> </head> <body> <form name = "form1" action="login.php" onsubmit="return check_submit()"> <table border="1" cellspacing="0" cellpadding="5" bordercolor="#ccc"> <tr> <td width="200" align="right">請輸入使用者名稱:</td> <td width="200"><input type="text" name="username" onblur="blur_username()" onfocus="focus_username()"></td> <td width="300"><div id="result_name"></td> </tr> <tr> <td width="200" align="right">請輸入密碼:</td> <td width="200"><input type="password" name="userpwd" onblur="blur_userpwd()" onfocus="focus_userpwd()"></td> <td><div id="result_pwd"></td> </tr> <tr> <td>&nbsp;</td> <td colspan="2" cellpadding><input type="submit" value="提交表單" ></td> </tr> </table> </form> </body> </html>