从用户登录学习js验证+js控制表单提交 .

<%@ 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" 
onsubmit="return checkAll(this.name.value, this.password.value);">
<table >
<tr>
<td>用户名</td>
<td><input type="text" name="name" id="name" onblur="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" onblur="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" 
   onsubmit="return checkAll(this.name.value, this.password.value);">
   <table >
    <tr>
     <td>用户名</td>
     <td><input type="text" name="name" id="name" onblur="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" onblur="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" onsubmit="return checkAll(this.name.value, this.password.value);">

四:也是想过但是还没实现的,当然对很多人来说很简单。就是在文本框失去焦点事件中查询数据库,在输入用户名之后就立即验证用户名是否存在。

网上说用ajax,还不会那个。希望下午能弄出来。

你可能感兴趣的:(表单提交)