<html>
<head>
<title>javascript实现的表单验证的动态效果</title>
</head>
<script language="javascript">
function formValidate(){
/*验证用户名不能为空，如果为空，则显示用户名不能为空*/
if(document.getElementById("userName").value==""){
//alert("用户名不能为空");
document.getElementById("userNameErr").innerHTML="<font color='red'>用户名不能为空啊</font>";
document.f1.userName.focus();
return false;
}else{
document.getElementById("userNameErr").innerHTML="";
return true;
}
}
function passwordValidate(){
/*验证用户密码不能为空，如果为空怎显示用户密码不能为空*/
if(document.getElementById("paw").value==""){
document.getElementById("passwordErr").innerHTML="<font color='red'>密码不能空</font>";
document.f1.paw.focus();
return false;
}else{
document.getElementById("passwordErr").innerHTML="";
document.f1.paw.focus();
return true;
}
}
</script>
<body>
<div align="center">
用户信息<br/><br/><br/>
<form name="f1">
<table border="1">
<tr>
<td>用户姓名：</td>
<td >
<input type="text" name="userName" id="userName" onblur="formValidate()"/>
<%--通过javascript将错误信息追加到该行的后面 注意这里的span也可以换成div，唯一不同的是显示的效果--%>
<span id="userNameErr"></span>
</td>
</tr>
<tr>
<td>用户密码：</td>
<td>
<input type="password" name="paw" id="paw" onblur="passwordValidate()" />
<%--通过javascript将错误信息追加到该行的后面 --%>
<span id="passwordErr"></span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="tijiao" value="提 交"/>
<input type="reset" name="chongshe" value="重 设"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
分享到：
相关推荐
jQuery作为一个轻量级的JavaScript库，因其简洁的API和丰富的插件库，常被用于实现各种动态效果，包括弹出式表单。本文将深入探讨如何使用jQuery创建弹出式表单效果，以及涉及到的关键技术点。 首先，"jQuery弹出式...
在这个"jQuery弹出式表单效果.zip"压缩包中，我们主要关注的是如何使用jQuery来实现交互式的弹出式表单效果。这种效果可以提升用户体验，使用户在不离开当前页面的情况下填写和提交表单。 首先，让我们深入理解...
《jQuery+Bootstrap构建弹出式表单的深度解析》 在网页设计中，用户交互体验是至关重要的元素，其中注册、登录等表单的设计更是直接影响到用户的使用感受。本篇文章将详细探讨如何利用jQuery和Bootstrap框架创建弹...
在这个特定的场景中，我们关注的是ASP.NET中的表单验证以及如何结合使用第三方库artDialog来创建弹出对话框。 **表单验证**在ASP.NET中扮演着关键角色，确保用户输入的数据符合预设的业务规则。ASP.NET提供了一系列...
Bootstrap响应式弹出式窗口表单代码是一种利用Bootstrap框架创建的多用途表单设计，它具有高度可定制性和良好的用户体验。Bootstrap是Twitter开发的一个开源前端框架，用于简化Web开发过程，提供一套完整的网格系统...
此外，如果你的表单包含更复杂的交互或需要进行数据验证，可以利用jQuery和其他插件，如Bootstrap的Modal插件，或者使用轻量级的SweetAlert2来创建更美观的弹出式表单。在实际应用中，可能还需要考虑表单的关闭逻辑...
在本主题“JAVA脚本弹出式标签验证”中，我们主要关注的是利用JavaScript进行数据验证，确保用户输入的数据符合特定的格式或规则。这在web开发中至关重要，因为良好的数据验证可以提高用户体验，防止错误数据的提交...
- **显示/隐藏**：使用JavaScript的`addEventListener`方法监听触发弹出层的按钮点击事件，然后改变弹出层的显示状态。 - **数据验证**：在用户点击提交按钮之前，执行表单验证。这可能包括非空检查、格式验证（如...
"表单将会弹出"这个标题暗示了我们将讨论的是一个动态出现的表单，可能是通过点击按钮、触发事件或者某种特定操作后弹出。表单在网页、应用程序和软件设计中扮演着至关重要的角色，因为它们是用户与系统之间交流信息...
本文将深入探讨“弹出式登录框”这一主题，它是一种常见的JavaScript应用，用于创建更加友好的用户体验。 标题“弹出式登陆框”指的是在用户与网页交互时，通过JavaScript动态生成并显示的登录界面。这种登录框通常...
总的来说，JavaScript弹出对话框是网页交互中的基础工具，正确地使用它们可以增强用户体验，但也要注意其局限性和安全性。随着前端技术的发展，现代Web应用更倾向于使用自定义组件和库来构建更加灵活和安全的对话框...
本文将详细介绍标题和描述中提到的三个jQuery插件：表单验证、图片弹出层全屏左右翻页以及弹出层。 1. **jQuery表单验证插件** 表单验证是Web开发中的关键部分，确保用户输入的数据有效和符合规范。jQuery提供了...
总的来说，这个项目是一个基于ASP.NET的弹出式登录界面，通过CSS和JavaScript实现了类似QQ登录的视觉效果，并通过C#处理后端逻辑。它涉及了前端UI设计、用户交互、后端验证以及数据存储等多个IT领域的知识点，是学习...
标题中的"DHTML+JavaScript弹出式日历选单.rar"是一个使用DHTML（Dynamic HTML）和JavaScript技术实现的交互式日历组件。DHTML是一种在网页上动态展示内容的技术，结合了HTML、CSS和JavaScript，使得网页内容可以不...
为了提供更好的用户体验，我们可以创建自定义的错误提示，而不仅仅是弹出警告框。这可以通过改变DOM元素的样式或插入新的元素来实现。 6. **表单验证API**： HTML5引入了新的表单验证API，如`checkValidity()`和`...
JavaScript是Web开发中不可或缺的一部分，特别是在处理用户交互和表单验证时。表单验证是确保用户输入的数据符合预期格式和规则的关键步骤，可以减少服务器端的处理负担，提高用户体验。以下是一些关于JavaScript...
总之，JavaScript表单验证是构建交互式Web应用的关键技术，它可以提高数据质量，防止无效数据的提交，同时也能提供良好的用户交互体验。通过编写和组合不同的验证函数，开发者可以创建出适应各种场景的表单验证机制...
总的来说，创建一个ASP.NET弹出式登录框涉及前端的HTML、CSS和JavaScript，以及后端的ASP.NET控件和验证机制。通过熟练掌握这些技术，开发者可以构建出既美观又实用的Web应用登录界面。在实际项目中，还可以根据需求...
Bootstrap的模态（Modal）组件就是我们实现弹出式表单的关键。 在"jQuery+Bootstrap弹出式注册登录等表单代码.zip"这个压缩包中，我们可以看到三个主要文件：style.css、index.html和assets目录。`style.css`包含了...