<%@ 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验证表单大全,用JS控制表单提交 ,javascript提交表单
在JavaScript中，表单提交验证是确保用户输入的数据符合预设规则的重要环节，这有助于防止无效数据的提交，提升用户体验，以及保护服务器免受恶意数据的冲击。本篇将详细介绍JavaScript表单验证函数的一些关键知识点...
### JS提交表单及JS表单验证 在Web开发中，JavaScript经常被用来增强用户体验，其中一个重要的应用领域就是表单验证。通过JavaScript进行前端验证，可以及时反馈用户输入错误，提高交互效率。本文将详细解释如何...
该资源是一个基于HTML5的登录和注册网页模板，包含了JavaScript验证功能，以及可能的后台接口。这个模板设计简洁，适用...开发者可以依据此模板快速搭建自己的用户认证系统，同时学习和借鉴其中的设计思路和代码实现。
在网页开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期，从而防止错误数据的提交，提高用户体验并保护服务器免受恶意输入。本压缩包包含了一个名为"validateForm.js"的JavaScript文件以及一份...
"一个完美的js表单验证案例"利用JavaScript（特别是jQuery库）实现了这一功能，提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少...
在Vue.js应用中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预期的格式和规则，从而提高数据质量和用户体验。`validate.min.js`是一个强大的表单验证库，它可以让我们自定义验证规则并提供中文错误提示...
根据提供的文件信息，我们可以总结出一系列关于JavaScript在处理表单提交及验证方面的知识点。下面将对这些知识点进行详细的解析。 ### 1. 验证文本框输入长度不超过50个字符 ```javascript function test() { if...
原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
【标题】"js+css3用户反馈表单提交特效.zip"所包含的知识点主要集中在JavaScript（js）和CSS3的应用上，特别是在用户交互和表单处理方面。此压缩包提供了一个实现用户反馈表单提交时具有视觉特效的实例，这在网页...
本文将详细讲解如何使用HTML、CSS和JavaScript（JS）这三种核心技术来实现一个简单的用户登录界面。 首先，HTML（HyperText Markup Language）是网页的基础结构语言，用于定义页面的内容和布局。在实现登录界面时，...
在表单验证中，JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为，然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素，再利用`value`属性获取...
传统的表单验证方式通常在用户提交表单后进行，如果数据不符合要求，用户需要重新填写整个表单，这显然是不理想的。PHP与AJAX（Asynchronous JavaScript and XML）结合的表单验证技术可以实现无刷新验证，即在用户...
本资源提供的"完美表单验证js"就是一个全面的JavaScript解决方案，几乎涵盖了所有常见的表单验证需求，如电话、QQ、Email等。 JavaScript是一种客户端脚本语言，它可以直接在用户的浏览器上运行，无需服务器参与，...
JavaScript文件为网页提供了交互功能和动态效果，包括表单验证、动态内容加载、动画效果等，从而提升网页的用户体验。此外，该资源包还包含了一些实际的项目源码，供用户参考和实践。这些源码不仅展示了如何将HTML、...
2. 表单验证：服务器端的验证结果可以直接反馈到客户端，提升用户体验。 3. 数据编辑：用户可以在客户端修改表格数据，改动会实时反映到服务器，避免了传统表单提交的延迟。 4. 图形绘制：利用DWR调用服务器端的绘...
JavaScript不仅用于处理用户输入，还可以进行数据验证、页面动画、API调用等。通过AJAX（异步JavaScript和XML），JavaScript能够实现页面的无刷新更新，提升用户体验。 **jQuery Mobile** 是一个轻量级的前端框架，...
Check.js会监听表单的提交事件，当用户尝试提交表单时，它会遍历所有带`data-rule`属性的元素并执行相应的验证规则。如果验证失败，Check.js会通过弹出框展示错误信息。 此外，Check.js还支持AJAX验证。这允许...
在网页开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期，从而防止错误数据的提交，提升用户体验并保障数据安全。JavaScript作为浏览器端最常用的脚本语言，被广泛用于表单验证。本篇文章将深入...