利用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> td>
        <td colspan="2" cellpadding><input type="submit" value="提交表单" >td>
    tr>

table>
form>
body>
html>

你可能感兴趣的:(前端)