<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head><%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>用户登录</title>
</head>
<body>
<form action="/BBS/JSP/Login/MyJsp.jsp" id="myform" method="post"
οnsubmit="return checkAll(this.name.value, this.password.value);">
<table >
<tr>
<td>用户名</td>
<td><input type="text" name="name" id="name" οnblur="checkName(this.value);"/></td>
<td><font color="red"><span id="spanName"></span></font></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password" οnblur="checkPassword(this.value)"/></td>
<td><font color="red"><span id="spanPassword"></span></font></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登录">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
/*检查用户名*/
function checkName(name)
{
/*未输入,则提示此项为必填*/
if (name=="")
{
document.all('spanName').innerText = "此项为必填";
return false;
}
/*输入后,将提示删除*/
else
{
document.all('spanName').innerText = "";
}
return true;
}
/*检查密码*/
function checkPassword(password)
{
/*未输入,则提示此项为必填*/
if (password == "")
{
document.all('spanPassword').innerText = "此项为必填";
return false;
}
/*输入后,将提示删除*/
else
{
document.all('spanPassword').innerText = "";
}
return true;
}
/*检查用户名、密码是否输入正确,再提交*/
function checkAll(name, password)
{
var result = true;//验证结果
/*检查用户名*/
if (!checkName(name))
{
result = false;
}
/*检查密码*/
if (!checkPassword(password))
{
result = false;
}
return result;
}
</script>
</body>
</html>
<title>用户登录</title>
</head>
<body>
<form action="/BBS/JSP/Login/MyJsp.jsp" id="myform" method="post"
οnsubmit="return checkAll(this.name.value, this.password.value);">
<table >
<tr>
<td>用户名</td>
<td><input type="text" name="name" id="name" οnblur="checkName(this.value);"/></td>
<td><font color="red"><span id="spanName"></span></font></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password" οnblur="checkPassword(this.value)"/></td>
<td><font color="red"><span id="spanPassword"></span></font></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="登录">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
/*检查用户名*/
function checkName(name)
{
/*未输入,则提示此项为必填*/
if (name=="")
{
document.all('spanName').innerText = "此项为必填";
return false;
}
/*输入后,将提示删除*/
else
{
document.all('spanName').innerText = "";
}
return true;
}
/*检查密码*/
function checkPassword(password)
{
/*未输入,则提示此项为必填*/
if (password == "")
{
document.all('spanPassword').innerText = "此项为必填";
return false;
}
/*输入后,将提示删除*/
else
{
document.all('spanPassword').innerText = "";
}
return true;
}
/*检查用户名、密码是否输入正确,再提交*/
function checkAll(name, password)
{
var result = true;//验证结果
/*检查用户名*/
if (!checkName(name))
{
result = false;
}
/*检查密码*/
if (!checkPassword(password))
{
result = false;
}
return result;
}
</script>
</body>
</html>
先贴源码。功能:检查用户名、密码是否已经输入,输入后跳转页面。
几个点要学习。
一:文本框失去焦点事件-----onblur。
二:提示文字,用span,在js中用document.getElementByID(‘spanid’),或者document.all('spanid')来获得span,并通过.innerText赋值。
三:也是最纠结的一点,js控制表单提交,试了好久才弄通。网上很多例子说在js中用document.forms[]数组来得到form,并通过.submit提交,但事实上很多浏览器都不支持这种方式。最好的办法还是将input按钮的type改为submit。<input type="submit" value="登录">。然后在表单form提交时验证,
<form action="/BBS/JSP/Login/MyJsp.jsp" id="myform" method="post" οnsubmit="return checkAll(this.name.value, this.password.value);">
四:也是想过但是还没实现的,当然对很多人来说很简单。就是在文本框失去焦点事件中查询数据库,在输入用户名之后就立即验证用户名是否存在。
网上说用ajax,还不会那个。希望下午能弄出来。