<html>
<head>
<style>
#d1{
left:30;
top:30;
width:440;
height:300;
position:absolute;
background-color:#cccccc;
}
#d1_head{
height:30;
font-size:20pt;
color:white;
background-color:blue;
}
#d1_body{
padding-top:40;
padding-left:40;
}
.s1{
color:red;
}
.s2{
background-color:#ffee55;
}
</style>
<script>
function valiForm(){
return valiName() && valiPwd();
}
function valiName(){
//step1 先找到要操作的节点
var obj = document.getElementById('name');
//className属性：用于设置或者读取
//节点的class属性值。
obj.className='';
var msg = document.getElementById('name_msg');
msg.innerHTML='';
//step2 对节点的操作
//value属性 ： (input控件 + textarea)的值
var v1 = obj.value;
if(v1.length==0){
//innerHTML: 可以读取或者设置
//标记之间的内容
msg.innerHTML='名字不能为空';
obj.className='s2';
return false;
}else{
return true;
}
}
function valiPwd(){
var obj = document.getElementById('pwd');
obj.className='';
var msg = document.getElementById('pwd_msg');
msg.innerHTML='';
if(obj.value.length==0){
msg.innerHTML='密码不能为空';
obj.className='s2';
return false;
}else{
return true;
}
}
</script>
</head>
<body style="font-size:20pt;">
<div id="d1">
<div id="d1_head">表单数据验证</div>
<div id="d1_body">
<form action="" method="" onsubmit="return valiForm();">
<table>
<tr>
<td>name</td>
<td><input type="text" name="name" id="name"
onblur="valiName();"/>
<span class="s1" id="name_msg"></span>
</td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="pwd" id="pwd" onblur="valiPwd();"/>
<span class="s1" id="pwd_msg"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="confirm"/>
<input type="reset" value="reset"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
分享到：
相关推荐
压缩包中的"日记本"可能包含了一个简单的HTML表单和对应的JavaScript验证代码示例。学习这个案例可以帮助你理解如何将这些概念应用到实际项目中。你可以打开这些文件，查看并运行代码，了解其工作原理。 总的来说，...
本文将深入探讨“js通用表单验证代码”这一主题，以及如何利用JavaScript进行有效的表单验证。 首先，我们要理解JavaScript在表单验证中的角色。JavaScript是一种客户端脚本语言，它可以在用户的浏览器上运行，无需...
接着，我们编写JavaScript代码，这部分可能位于`validate.js`文件中，用于处理表单验证。密码验证通常包括以下几个方面： 1. **非空验证**：确保用户输入了密码。 2. **长度验证**：密码长度至少为6个字符，以提高...
以下是对"原生js简单的登录表单验证代码"的详细解释： 1. **表单元素**：首先，我们需要在HTML中创建一个登录表单，包含用户名(input[type="text"])和密码(input[type="password"])字段，以及提交按钮(input[type=...
本示例主要关注如何使用jQuery来创建吸引人的表单验证特效。 1. **基本概念**：jQuery表单验证的核心是通过监听用户的交互行为，如表单提交或输入字段失去焦点时，检查输入数据是否符合预设规则。这些规则可能包括...
"JavaScript表单验证控制代码大全"是一个集成了多种表单验证技术和策略的资源集合，帮助开发者有效地确保用户输入的数据质量和安全性。下面我们将深入探讨这个主题，了解JavaScript如何对表单数据进行验证以及常见的...
本文将深入探讨"javascript表单验证方式一"，介绍如何利用JavaScript进行表单验证，确保用户输入的数据符合预设规则，提高用户体验，同时也减轻了服务器端的压力。 首先，表单验证的基本目标是检查用户在HTML表单中...
1. **JavaScript表单验证**：在客户端进行表单验证可以提高用户体验，因为数据在提交服务器前就能得到即时反馈。JavaScript允许开发者添加自定义验证逻辑，例如检查邮箱格式、手机号码合法性等。 2. **轻量级框架**...
"JavaScript常见问题整理.txt"、"表单验证大全.txt"、"JavaScript表单验证控制代码大全.txt"、"JavaScript验证表单函数大全.txt"这些文件将提供更具体的信息和示例代码，帮助深入理解和掌握这一主题。
下面是一些常见的JavaScript表单验证代码示例： ##### 1. 必填项验证 ```javascript function validateRequiredFields(form) { var elements = form.elements; for (var i = 0; i ; i++) { if (elements[i]....
传统的验证方式往往需要编写大量的JavaScript代码，而这套框架通过提供配置文件和特定的标签使用，使得表单验证变得更加简单易行。 在使用**JS客户端表单验证框架**时，开发者不再需要手动编写复杂的JavaScript函数...
在IT行业中，前端开发是构建用户交互界面的关键环节，而表单验证是前端开发中必不可少的部分。本示例聚焦于使用jQuery库进行表单验证，特别是在百度注册页面的应用。jQuery是一个广泛使用的JavaScript库，它简化了...
### JavaScript 表单验证知识点详解 #### 一、引言 在Web开发中，表单验证是一项非常重要的任务。它确保用户输入的数据符合预期格式，从而避免错误...希望本文能帮助读者更好地理解和应用JavaScript表单验证技术。
6. **表单验证**：这个插件提供了强大的验证功能，能自动检查用户输入的数据是否符合预设规则，如电子邮件格式、手机号码格式等。通过使用代码示例，开发者可以轻松集成和自定义验证逻辑。 在实际应用中，开发者会...
本文将围绕"jQuery手机移动端注册表单验证代码.zip"这一主题，详细阐述jQuery在移动端注册表单验证中的应用，以及如何通过提供的资源进行实践操作。 首先，jQuery的核心优势在于其简洁的API和丰富的选择器，这使得...
为了提升开发效率和代码质量，本文提出了通过JavaScript（JS）文件来优化网站表单验证和提交代码的方案。以下是根据给定文件内容生成的详细知识点。 知识点一：JavaScript的表单验证和提交优化 JavaScript是一种...
jQuery formValidator是一款强大的JavaScript表单验证插件，它基于jQuery库，用于在用户提交表单前验证输入数据的正确性和格式。这个插件提供了一系列灵活的验证规则和自定义选项，使得开发者能够轻松地实现复杂的...
在这个名为"js正则表达式表单验证代码.zip"的压缩包中，包含了一个用于表单验证的JS代码实现，它能支持多种不同的验证条件和效果。 首先，`说明.htm`可能是一个详细说明文档，里面可能涵盖了如何使用这个验证代码，...
原生JavaScript表单验证插件是用于确保用户输入数据有效性和安全性的工具，它无需依赖任何外部库如jQuery，而是直接利用浏览器内置的API来实现。下面将详细解释这个主题。 原生JavaScript表单验证插件的核心在于...
本文将深入探讨如何使用jQuery（JQ）和纯JavaScript（JS）进行表单验证，并结合"JQ表单验证大全"这个资源，提供一些实用的验证方法和策略。 ### jQuery表单验证 jQuery提供了丰富的API，使得表单验证变得简单易行...