DOM 综合练习(二)
// 需求一: 二级联动菜单
<html>
<head>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function selectCity(){
// 使用二维数组存储对应城市
var collCities = [['选择城市']
,['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['保定','邯郸','廊坊','石家庄']]
// 也可以使用以下方式存储:
// var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
// 获取两个下拉菜单对象
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
// 获取到底选择的是哪个省
// select 中的属性, 返回下拉列表中被选项目的索引号
var index = oSelNode.selectedIndex;
// 通过角标到容器中获取对应的城市数组
var arrCities = collCities[index];
// 在添加之前, 将子菜单中的内容清空一下
// 删除过程中, 数组的角标在变化, 所以不用递增
for(var x=0; x<oSubSelNode.options.length; ){
oSubSelNode.removeChild(oSubSelNode.options[x]);
}
// 第二种清除动作: oSubSelNode.length = 0;
// 遍历这个数组, 并将这个数组的元素封装成 option 对象, 添加到子菜单中
for(var x=0; x<arrCities.length; x++){
var oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" onchange="selectCity()">
<option>选择省市</option>
<option>北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
</body>
</html>
需求二: 表单校验
<html>
<head>
</head>
<body>
<script type="text/javascript">
// 校验用户名
function checkUser(){
var flag;
var oUserNode = document.getElementsByName("user")[0];
// 对该值进行校验, 将校验结果显示在输入框的后面,
// 需要使用 span 行内标签
// 获取输入的值
var name = oUserNode.value;
// 定义正则表达式, 用户名称至少四个连续字母
var reg = new RegExp("^[a-z]{4}$","i"); // i 表示忽略大小写
// 正则表达式第二种方式: reg = /^[a-z]{4}$/i;
// 获取 span 节点
var oSpanNode = document.getElementById("userspan");
// 使用 RegExp 对象的 test 方法, 返回布尔值
if(reg.test(name)){
oSpanNode.innerHTML = "用户名正确".fontcolor("green");
flag = true;
} else {
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
// 更改 form 表单默认的提交方式
function checkForm(){
if(checkUser())
return true;
return false;
}
/*
* 自定义提交处理方法
* function mySubmit(){
* // 获取表单节点
* var oFormNode = document.getElementById("userinfo");
*
* // 表单节点的 submit 方法
* oFormNode.submit();
* }
*/
</script>
// 设置 onsubmit, 可以改写默认的提交事件
// 注意, 需要加入 return
<form id="userinfo" onsubmit="return checkForm()">
// 使用焦点事件, onblur: 失去焦点, onfocus: 获取焦点
用户名称:<input type="text" name="user" onblur="checkUser()"/>
<span id="userspan"></span>
<br/>
输入密码:<input type="password" name="psw" />
<br/>
<input type="submit" value="提交数据" />
</form>
// 提交的第二种方式: 自定义提交按钮
<input type="button" value="我的提交" onclick="mySubmit()"/>
</body>
</html>
====================================
// 添加更多的校验
/*
* 发现很多框的校验除了几个内容不同外, 校验的过程是一样的.
* 所以进行了代码的提取
*/
<html>
<head>
<script type="text/javascript">
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val = document.getElementsByName(name)[0].value;
var oSpanNode = document.getElementById(spanId);
if(reg.test(val)){
oSpanNode.innerHTML = okinfo.fontcolor("green");
flag = true;
} else {
oSpanNode.innerHTML = errinfo.fontcolor("red");
flag = false;
}
return flag;
}
// 校验用户名
function checkUser(){
var reg = /^[a-z]{4}$/i;
return check("user",reg,"userspan","用户名正确","用户名错误");
}
// 校验密码
function checkPsw(){
var reg = /^\d{4}$/;
return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
}
// 校验确认密码, 不需要判断格式, 只有和密码一致即可
function checkRepsw(){
// 获取密码框内容
var pass = document.getElementsByName("psw")[0].value;
// 获取确认密码框内容
var repass = document.getElementsByName("repsw")[0].value;
// 获取确认密码的 span 区域
var oSpanNode = document.getElementById("repspan");
if(pass==repass){
oSpanNode.innerHTML = "两次密码一致".fontcolor("green");
flag = true;
} else {
oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
flag = false;
}
return flag;
}
// 校验邮件
function checkMail(){
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
}
// 提交事件处理
function checkForm(){
if(checkUser() && checkPsw() && checkRepsw() && checkMail())
return true;
return false;
}
</script>
</head>
<body>
<form onsubmit="return checkForm()">
用户名称:<input type="text" name="user" onblur="checkUser()"/>
<span id="userspan"></span>
<br/>
输入密码:<input type="password" name="psw" onblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确认密码:<input type="password" name="repsw" onblur="checkRepsw()" />
<span id="repsqspan"></span>
<br/>
邮件地址:<input type="text" name="mail" onblur="checkMail()" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
</body>
</html>
参考资料
DOM 综合练习(二)的更多相关文章
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- kali渗透综合靶机(二)--bulldog靶机
kali渗透综合靶机(二)--bulldog靶机 靶机下载地址:https://download.vulnhub.com/bulldog/bulldog.ova 一.主机发现 netdiscover ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- jQuery基础修炼圣典—DOM篇（二）jQuery遍历
1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
- jQuery插件综合应用(二)文字为主的页面
一.介绍 文字内容是每个网站都有的内容,网站在展示文字内容时,总是比图片.视频等富媒体内容要难一些,因为富媒体容易被用户接受.尤其是越多的文字内容越难以被用户通篇的阅读,跳跃式阅读往往是阅读的主要方式 ...
- DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- 前端开发之JavaScript HTML DOM理论篇二
主要内容: 1.HTML DOM元素 2.HTML DOM事件 一.DOM元素 主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加 如 ...
- Android笔记三十四.Service综合实例二
综合实例2:client訪问远程Service服务 实现:通过一个button来获取远程Service的状态,并显示在两个文本框中. 思路:如果A应用须要与B应用进行通信,调用B应用中的getName ...
随机推荐
- Effective Java-第三章
第3章 对于所有对都通用的方法 尽管Object是一个具体类,但是设计它主要是为了扩展,它所有的非final方法(equals,hashCode,toString,clone和finalize)都有明 ...
- Atitit. html 使用js显示本地图片的设计方案.doc
Atitit. html 使用js显示本地图片的设计方案.doc 1. Local mode 是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无 ...
- [Egret]长按截屏分享、分享截屏图片、本地存储
egret 分享有API可以把一个显示对象树渲染成一个位图纹理,我把它赋值给 HTML 的 Image 元素,就实现了图片的显示,在微信中,通过长按图片可以分享出去.当然在其他浏览器可以保存在本地. ...
- struts-tiles学习笔记
网上搜了一些,稀里糊涂的,要么是代码不全,要么是版本不对,还是去struts官网大概学习了一下 http://struts.apache.org/development/1.x/struts-tile ...
- 语言中.C文件和.H文件的概念和联系
//a.h void foo(); //a.c #include "a.h" //我的问题出来了:这句话是要,还是不要? void foo() { return; } //main ...
- GEEK学习笔记— —程序猿面试宝典笔记（二）
所谓笔记,就是比較个人的东西,把个人认为有点意思的东西记录下来~~ 程序猿面试宝典笔记(一)基本概念 程序猿面试宝典笔记(二)预处理.const和sizeof 程序猿面试宝典笔记(三)auto_ptr ...
- VMware网络连接失败解决方法
假如你碰到了VMware 网络被断开,明明已经分配了适配器,客户端却显示网络断开没有连接. 一. 可用恢复默认的方法重置所有网卡及服务. 如图片操作: 进主工具首页.点击: 虚拟网络编辑器 然后点击下 ...
- 微信小程序5 - 数据驱动界面
微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...
- liunx下安装tomcat7.0.82
1.apache-tomcat-liunx-7.0.82下载地址: http://download.csdn.net/download/yichen01010/10019116 2.下载后解压即可 c ...
- 'Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set.
UserWarning: Neither SQLALCHEMY_DATABASE_URI nor SQLALCHEMY_BINDS is set. Defaulting SQLALCHEMY_DATA ...