<%@ 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>
先贴源码。功能：检查用户名、密码是否已经输入，输入后跳转页面。
几个点要学习。
一：文本框失去焦点事件-----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，还不会那个。希望下午能弄出来。
3030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
