利用JS驗證使用者名稱是否合法
阿新 • • 發佈:2019-02-14
驗證分為兩部分,第一部分是前端驗證(如下所示),另外一種是伺服器端驗證。以下程式碼只實現了驗證使用者名稱是否合法,如果不合法就阻止提交。
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> </td>
<td colspan="2" cellpadding><input type="submit" value="提交表單" ></td>
</tr>
</table>
</form>
</body>
</html>