验证分为两部分,第一部分是前端验证(如下所示),另外一种是服务器端验证。以下代码只实现了验证用户名是否合法,如果不合法就阻止提交。
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>