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

weixin_45986454發表於2020-12-18
JS

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

參考blog：利用JS驗證使用者名稱是否合法

點選在伺服器上執行即可

完整程式碼示例：

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="red";  //#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" οnsubmit="return check_submit()">
<table  border="1" cellspacing="0" cellpadding="5" bordercolor="#ccc">
    <tr>
        <td width="200" align="right">請輸入使用者名稱：</td>  <!-- 點選事件，聚焦事件，呼叫不同的函式，而聚焦事件呼叫函式後，寫入到div中，通過id標識 -->
        <td width="200"><input type="text" name="username" onblur="blur_username()" onkeyup="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()" onkeyup="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>

相關文章