`
mylftnt
  • 浏览: 26531 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

从用户登录学习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，还不会那个。希望下午能弄出来。

分享到：
| js获取文本框值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics