利用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>
利用JS验证用户名是否合法

猜你喜欢
