今天讲javascript第四次课，主要还是讲了一些例子。
一.表单的验证，这要实现的功能1.防止注册的账号或密码为空 2.验证密码强度
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
span{
color:red;
}
.s{
width:200px;
height:20px;
}
.strong{
width:40px;
height:20px;
display:inline;
margin:0px;
padding:0px;
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<form action="a.jsp" id="form">
账号 <input type="text" name="" id="user" autocomplete="off"/>
<span id="user-s"></span>
<br />
密码 <input type="password" name="" id="psd" />
<span id="psd-s"></span>
<div class="s">
<div class="strong" id="s1"></div>
<div class="strong" id="s2"></div>
<div class="strong" id="s3"></div>
</div>
<div class="clear"></div>
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var user=document.getElementById("user");
var psd=document.getElementById("psd");
var user_s=document.getElementById("user-s");
var psd_s=document.getElementById("psd-s");
var s1=document.getElementById("s1");
var s2=document.getElementById("s2");
var s3=document.getElementById("s3");
var score=0;
function check(){
if(user.value.trim()==""){
user.value="";
user.focus();
user_s.innerHTML="用户名不能为空";
return false;
}
if(psd.value.trim()==""){
psd.value="";
psd.focus();
psd_s.innerHTML="密码不能为空";
return false;
}
};
user.onblur=check;
psd.onblur=function(){
check();
strongCheck();
};
document.getElementById("form").onsubmit=check();
user.onkeydown=function(){
user_s.innerHTML="";
};
psd.onkeydown=function(){
psd_s.innerHTML="";
strongCheck();
};
function strongCheck(){
score=0;
var reg1=/^\d+$/;
var reg2=/^[a-zA-z]+$/;
var reg3=/^\w+$/;
var reg4=/\w*[!@#$%^&*()~ ]+\w*/;
if(psd.value.length<6){
score+=10;
}else{
score+=30;
}
if(reg1.test(psd.value)){
score+=10;
}else if(reg2.test(psd.value)){
score+=20;
}else if(reg3.test(psd.value)){
score+=30;
}else if(reg4.test(psd.value)){
score+=40;
}
if(score<=50){
s1.style.backgroundColor="red";
s2.style.backgroundColor="#fff";
s3.style.backgroundColor="#fff";
}else if(score<=60){
s1.style.backgroundColor="red";
s2.style.backgroundColor="blue";
s3.style.backgroundColor="#fff";
}else{
s1.style.backgroundColor="red";
s2.style.backgroundColor="blue";
s3.style.backgroundColor="green";
}
};
</script>
</body>
</html>
2.省市级联
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<select name="" id="province">
<option value="choose">请选择省份</option>
<option value="hn">河南</option>
<option value="sd">山东</option>
<option value="gd">广东</option>
</select>
<select name="" id="city">
<option value="choose">请选择城市</option>
</select>
<script type="text/javascript">
var province=document.getElementById("province");
var citys=[["济源","焦作","新乡"],["菏泽","济南","青岛"],["广州","珠海","深圳"]];
province.onchange=function(){
var index=province.selectedIndex-1;
document.getElementById("city").length=1;
for(var i in citys[index]){
var city=citys[index][i];
var option=new Option(city,city);
document.getElementById("city").options.add(option);
}
}
</script>
</body>
</html>
最后还讲了一些正则表达式，因为我以前写过关于正则表达式的博客，所以在这里就不多说了
分享到：
相关推荐
本课程“JavaScript第三课”将深入探讨这个强大脚本语言的一些关键概念和技术。在本篇内容中，我们将主要围绕JavaScript的基础语法、变量、数据类型、控制流程、函数、对象以及与网页交互的方式进行讨论。 1. **...
本课件“javaScript课件第5课”延续了第4课的深入浅出讲解风格，旨在帮助初学者更好地掌握JavaScript的核心概念和技术。 在JavaScript实例部分，你将学习到如何将理论知识应用到实际项目中。JavaScript的实例化是...
JavaScript编程起步第四课主要讲解了两个关键概念：for循环和数据类型转换。在JavaScript中，循环是程序控制流程的重要部分，而for循环是最常见的循环结构之一。它通过初始化表达式、条件判断和更新表达式来控制循环...
在本课程“精通JavaScript+jQuery第8课”中，我们将深入探讨JavaScript这门强大的脚本语言及其与jQuery库的结合应用。JavaScript，作为Web开发的基础，是实现网页动态交互的关键，而jQuery则以其简洁易用的API大大...
### JavaScript编程起步（第四课）知识点详解 #### 一、课程概述 本次课程主要介绍了JavaScript中的两种重要概念：循环结构和数据类型。其中重点讲解了`for`循环以及`for...in`循环，并且深入探讨了JavaScript中...
第4课 第一页 JavaScript高级教程- 第4天 第二页 图象映射与JavaScript 第三页 预装图象 - 是什么? 第四页 预装图象 - 怎么做? 第五页 对象的优点 第六页 创建你自己的对象 第七页 你的面向对象的虚拟宠物 ...
第4课 - CSS进阶 - [精通JavaScript+jQuery] 第5课 - DOM模型 - [精通JavaScript+jQuery] JavaScript开发进阶 第6课 - JavaScript事件 - [精通JavaScript+jQuery] 第7课 - 表格与表单 - [精通JavaScript+jQuery]...
**第4课：DOM操作与事件** - Document Object Model（DOM）的概念，DOM树的结构 - 使用JavaScript操作DOM元素，包括选择元素（getElementById、getElementsByTagname等）、添加删除元素 - 属性操作，修改元素的样式...
在"JavaScript第一课"中，我们将初步了解JavaScript的基础知识，主要涵盖三个方面：如何在网页中插入JavaScript、JavaScript的数据类型以及JavaScript的三个基本对话框。首先，让我们详细探讨如何在HTML页面中添加...
HTML5+JavaScript 节课总结 HTML5 是一种基于 XHTML 的标记语言，用于创建结构良好的网页内容。JavaScript 是一种脚本语言，用于添加交互性和动态效果到网页中。本节课总结中，我们将了解 HTML5 和 JavaScript 的...
第4课 JavaScript BOM基础 学习浏览器对象模型“BOM”，可以对浏览器窗口进行访问和操作，与浏览器“对话” 第5课 JavaScript实现轮播特效 综合运用JavaScript知识，做出轮播图、tab页切换等实用特效 第6课 ...
4. 第四章：正则表达式 - 了解正则表达式的起源和作用。 - 构建和理解简单的正则表达式和复杂的正则表达式模式。 5. 第五章：字符串处理 - 学习JavaScript提供的各种字符串处理函数，如substring、indexOf、...
在"ACCP5.0 S2 javascript理论课作业答案"中，学员将接触到JavaScript的基础知识和进阶特性。这包括但不限于以下内容： 1. **基础语法**：学习变量、数据类型（如字符串、数字、布尔值、null、undefined、对象、...
第四课主要讲解循环和数组，循环是重复执行一段代码直到满足特定条件的机制，有`while`循环和`for`循环等。数组则用于存储多个值，可以与循环结合使用。此外，还介绍了函数的使用，包括无参数函数、带参数的函数以及...
4. JavaScript的DOM操作，实现页面动态更新，如添加、删除商品，更新购物车状态。 5. AJAX技术，实现异步数据加载，比如加载更多商品、获取商品详情等。 6. 数据绑定和事件监听，使页面与用户行为联动，如点击事件、...
JavaScript是一种广泛应用于网络开发的轻量级编程语言，尤其在创建动态、交互性强的网页内容方面发挥着重要作用。本初级教程将带你入门JavaScript的世界，理解其基本概念和应用。 首先，交互性是JavaScript的核心...
### JavaScript ASP教程第四课：同时使用VBScript与JavaScript #### 一、引言 在学习JavaScript ASP教程的过程中，第四课重点介绍了如何在同一ASP页面中同时使用JavaScript与VBScript这两种脚本语言来完成特定任务...
第四页 什么是变量 第五页 变量的使用方法 第2课 第一页 Javascript高级教程-第2日 第二页 神奇的字符串处理 第三页 子字符串 第四页 分割方法(splitting method) 第五页 相关数组 第六页 相关数组的一个例子 第七...
课程推荐了多本权威教材和参考书籍，如《JavaScript程序设计基础教程(第二版)》、《JavaScript高级程序设计》、《JavaScript基础教程(第7版)》、《JavaScript宝典》和《JavaScript精粹》等，这些资料不仅提供了丰富...
`Math.ceil()`, `Math.floor()`, 和 `Math.round()`分别用于向上、向下和四舍五入到最接近的整数。`Math.abs()`返回一个数的绝对值，`Math.exp()`计算e（自然对数的底数）的指定次幂，`Math.log()`计算自然对数，`...