Use JS to verify whether the user name is legal

The verification is divided into two parts, the first part is the front-end verification (as shown below), and the other is the server-side verification. The following code only implements the verification of whether the username is valid, and prevents the submission if it is not valid.
JS to verify whether the user name is legal

<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>

Use JS to verify whether the user name is legal

Guess you like