共计 16942 个字符，预计需要花费 43 分钟才能阅读完成。
BOM 对象
BOM 的核心对象是 window，它表示浏览器的一个实例。window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 parseInt() 等方法。如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames 集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架的名称来访问相应的 window 对象。
Window 对象方法
系统对话框
浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt() 方法可以调用系统对话框向用户显示消息。
（1）消息框:alert，常用。alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。（2）输入框:prompt，返回提示框中的值。prompt() 方法用于显示可提示用户进行输入的对话框。参数（可选）：第一个参数：要在对话框中显示的纯文本。第二个参数：默认的输入文本。（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。<style type="text/css">
#aa{
border: 1px solid red;
height: 100px;
}
</style>
<body>
<div id="aa">
This is a div
</div>
<button onclick="testAlert();"> 警告 </button>
<button onclick="testComfirm();"> 修改 </button>
<button onclick="testPrompt();"> 输入 </button>
<script type="text/javascript">
// 1. 警告框
function testAlert(){alert('警告框！！！');
}
/*
2. 输入框
返回值：输入的内容
* */
function testPrompt(){var item = prompt('请输入年龄'); // item 得到输入的值
// console.log(item)
// alert(prompt('请输入年龄',18)); // 将输入的值输出
}
/*
3. 确认框
返回值：boolean（true|false）* */
function testComfirm(){var result = confirm('真的要改吗？');
if(result){var ele = document.getElementById("aa");
ele.style.color="red";
ele.innerHTML="<span>fdsfsd</span>";
}else{alert("没事别瞎点。。。");
}
}
</script>
</body>打开窗口
window.open() 方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口
<script type="text/javascript">
function openBaidu(){window.open('http://www.baidu.com','_self'); // _self、_blank 等
// window.open(); // 空白窗口}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />关闭窗口
window.close()：关闭窗口。
例：点击按钮关闭当前窗口。
<input type="button" value="关闭窗口" onclick="window.close();" />时间函数
setTimeout()
setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识 cliearTimeout(id)：来清除指定函数的执行。
var id = setTimeout(function,times);clearTimeout(id);示例：
<script type="text/javascript">
// 延迟 3 秒后出现 alert
function hello() {alert("对不起, 要你久候");
}
setTimeout("hello()", 3000);
// 时间显示器
var timeout;
function init(){
// 拿到当前时间
var date = new Date();
var time = date.toLocaleString();
// 拿到相应对象
var h1 = document.getElementById('h1');
// 根据需求添加样式
if(0==date.getSeconds()){ // 当时间的秒数变成 0 时，显示红色字体
h1.innerHTML = '<span style="color:red">' + time + '</span>';
} else {h1.innerHTML = time;}
/*
* 定时操作，只执行一次
第一个参数：执行的方法；第二个参数：定时，单位是毫秒
* */
setTimeout(init,1000); // 等多少时间来执行
}
// window.setTimeout(init,1000);// 只执行一次
// 停止操作
function stopShow () {clearTimeout(timeout);
}
</script>
<body onload="init();">
<h1 id="h1"></h1>
<button onclick="stopShow()"> 时间停止 </button>
</body> 在 times 毫秒后执行 function 指定的方法，执行之前也可以取消
setInteval()
setInterval(): 可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
var id = setInterval(function,times);clearInterval(id);function test(){console.log(".....");
}
// window 是一个全局对象，通过全局对象调用 setInterval() 函数
window.setInterval(test,1000);history 对象
history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
history 对象的属性：length，返回浏览器历史列表中的 URL 数量。
history 对象的方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
013-history.html
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1> 我是第一个页面 </h1>
<input type="button" value="前进" onclick="window.history.forward();" />
<script>
console.log(window.history);
</script>
</body>013-history-a.html
<body>
<a href="013-history-b.html">013-history-b.html</a>
<h1> 我是 A 页面 </h1>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>013-history-b.html
<body>
<h1> 我是 B 页面 </h1>
<input type="button" value="第一个页面" onclick="window.history.go(-2);"/>
<input type="button" value="后退" onclick="window.history.back();"/>
</body>location 对象
location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
location 对象的属性 href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
<script type="text/javascript">
function openBaidu(){
// 没有历史记录, 用新的文档替换当前文档
// window.location.replace("http://www.baidu.com");
// console.log(window.location.href); // 获取完整的 url
window.location.href = "http://www.baidu.com";
}
</script>
<body>
<input type="text" value="" />
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
</body>本节作业
- 实现时间计时功能
- JS 的跳转方式
DOM 对象
<font color=”red”>DOM</font>：Document Object Model 文档对象模型
要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于 javascript 的核心地位上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：
| 节点类型 | HTML 内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档 document |
| 元素节点 | 所有的 HTML 元素 | 、<div>、<p> |
| 属性节点 | HTML 元素内的属性 | id、href、name、class |
| 文本节点 | 元素内的文本 | hello |
| 注释节点 | HTML 中的注释 | <!– –> |
html –> 文档节点
div –> 元素节点
title –> 属性节点
测试 Div –> 文本节点
<html>
<head>
<title> 树! 树! 到处都是树!</title>
</head>
<body>
<div title="属性节点"> 测试 Div</div>
</body>
</html>操作元素的节点
当 HTML 文档在被解析为一颗 DOM 树以后，里面的每一个节点都可以看做是一个一个的对象，我们称为 DOM 对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。
获取节点
在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的节点）。
<font color=”red”> 注意：操作 dom 必须等节点初始化完毕后，才能执行。</font>
处理方式两种:
（1）把 script 调用标签移到 html 末尾即可；
（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { // 预加载 html 后执行}; 获取方式如下：
| 方法 | 描述 |
|---|---|
| getElementById() | 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准 |
| getElementsByTagName() | 根据标签名获取 dom 对象数组 |
| getElementsByClassName() | 根据样式名获取 dom 对象数组 |
| getElementsByName() | 根据 name 属性值获取 dom 对象数组，常用于多选获取值 |
<body>
<p id="p1" class="para"> 这是一个段落 <span> 文本 </span></p>
<p id="p1" class="para"> 这又是一个段落 </p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="足球" /> 足球
<hr />
<a href="javascript:void(0)" onclick="testById()"> 按照 id 获取 </a>
<a href="javascript:void(0)" onclick="testByName()"> 按照 name 获取 </a>
<a href="javascript:void(0)" onclick="testByTagName()"> 按照标签名获取 </a>
<a href="javascript:void(0);" onclick="testByClass();"> 按照 class 获取 </a>
</body> <font color=”red”> 说明：href=”javascript:void(0)”：伪协议，表示不执行跳转，而执行指定的点击事件。</font>
<script type="text/javascript">
// 按照 id 获取元素
function testById() {
// 返回单个对象
var p = document.getElementById("p1");
console.log(p);
// 表示获取元素开始标签和结束标签之间的 html 结构
console.log(p.innerHTML);
console.log(p.innerText); // 表示获取标签之间的普通文本
}
// 按照 name 获取元素
function testByName() {
// 对象数组
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {console.log(ho[i].value);
}
}
// 按照标签名获取元素
function testByTagName() {
// 对象数组
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {if(inputArr[i].type == "text") {console.log("text 类型");
} else if(inputArr[i].type == "checkbox") {if(inputArr[i].checked) {console.log(inputArr[i].value);
}
}
}
}
// 按照 class 属性获取元素
function testByClass() {
// 对象数组
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "这是一段新的文本";
}
</script>创建节点和插入节点
很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。
创建节点
| 方法 | 描述 |
|---|---|
| createElement() | 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 |
| createTextNode() | 创建一个文本节点，可以传入文本内容 |
| innerHTML | 也能达到创建节点的效果，直接添加到指定位置了 |
插入节点
| 方法 | 描述 |
|---|---|
| write() | 将任意的字符串插入到文档中 |
| appendChild() | 向元素中添加新的子节点，作为最后一个子节点 |
| insertBefore() | 向指定的已有的节点之前插入新的节点 newItem：要插入的节点 exsitingItem：参考节点 需要参考父节点 |
<button onclick="add()"> 添加段落 </button>
<div id="container"></div>
<script type="text/javascript">
function add(){var container = document.getElementById('container')
var paragraph = document.createElement('p');
var txt = document.createTextNode('hello')
paragraph.appendChild(txt)
container.appendChild(paragraph)
}
</script>添加 “ 段落、图片、文本框、选项 ”
<body>
<button onclick="addPara();"> 添加段落 </button>
<button onclick="addImg();"> 添加图片 </button>
<button onclick="addTxt();"> 添加文本框 </button>
<button onclick="addOptions()"> 添加选项 </button>
<select name="music">
<option value="-1"> 你心内的一首歌 </option>
<option value="0"> 南山南 </option>
<option value="1"> 喜欢你 </option>
</select>
<hr />
<div id = "container"></div>
</body><script type="text/javascript">
// 添加 p 节点
function addPara(){
// 获取容器
var container =document.getElementById("container");
// 创建段落 <p></p>
var p =document.createElement('p');
// 第一种方式
// 创建文本节点
var txt=document.createTextNode("以后的你会感谢现在努力的你");
// 将 txt 节点追加到 p 节点中
p.appendChild(txt);
// 将 p 节点追加到 container 节点中
container.appendChild(p);
/*
// 第二种方式
// 向 p 节点中添加内容
p.innerHTML = "以后的你会感谢现在努力的你";
// 将 p 节点追加到 container 节点中
container.appendChild(p);
*/
/*
// 第三种方式
// 将字符串类型的 p 标签内容添加到 container 中，不会添加多次
var str = "<p> 以后的你会感谢现在努力的你 </p>";
container.innerHTML = str;
*/
}
// 添加图片
function addImg(){
// 创建图片
var img = document.createElement("img") ;
/*
// 设置属性第一种方式
// 设置 img 标签的 src 属性
// img.src ="http://www.baidu.com/img/bd_logo1.png";
*/
// 设置属性第二种方式
// setAttribute() 方法添加指定的属性，并为其赋指定的值。// 设置 img 的 src 属性
img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
img.style.width = '300px';
img.style.height = '200px';
// 获取容器
var container =document.getElementById("container");
// 将 img 节点追加到 container 中。container.appendChild(img);
}
// 添加文本框
function addTxt(){
// 创建文本框
var txt =document.createElement("input");
/*
// 设置类型第一种方式
txt.type = "text";
txt.value = "添加成功";
*/
// 设置类型第二种方式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '添加成功');
/*
* txt.type = 'password'
* txt.value = '123'
*/
// 获取容器
var container =document.getElementById("container");
// 将 txt 节点追加到 container 中。container.appendChild(txt);
}
// 添加下拉框的选项
function addOptions(){
// 第一种方式
/*
// 创建下拉项
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 获取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加 下拉项
sel.appendChild(option);
*/
// 第二种方式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不该" ;
// 获取下拉框
var sel = document.getElementsByTagName("select")[0];
// 添加下拉项
sel.options.add(option);
// 第三种方式: 添加下拉项
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value ='2'> 英雄 </option>" ;
}
</script>间接查找节点
| ** 方法 \ | 属性 ** | 描述 |
|---|---|---|
| childNodes | 返回元素的一个子节点的数组 | |
| firstChild | 返回元素的第一个子节点 | |
| lastChild | 返回元素的最后一个子节点 | |
| nextSibling | 返回元素的下一个兄弟节点 | |
| parentNode | 返回元素的父节点 | |
| previousSibling | 返回元素的上一个兄弟节点 |
删除节点
| ** 方法 \ | 属性 ** | 描述 |
|---|---|---|
| removeChild() | 从元素中移除子节点 |
<script type="text/javascript">
function delNode(){var programmer =document.getElementById("programmer");
// 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象
programmer.parentNode.removeChild(programmer);
}
</script>
<body>
<span id="programmer"> 程序猿 </span>
<a href="javascript:void(0)" onclick="delNode();"> 删除 </a>
</body>表单
表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。
获取表单
前两种常用
1、document. 表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; // 从 0 开始 例如：
<body>
<form id='myform' name="myform" action=""method="post"></form>
<form id='myform2' name="myform2" action=""method="post"></form>
</body>
<script>
// 四种方式
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>获取表单元素
获取 input 元素
如 text password hidden textarea 等，前两种常用。
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form. 名称形式获取: myform. 元素名称; name 属性值
3)、通过 name 获取 :document.getElementsByName(name 属性值)[索引] // 从 0 开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从 0 开始 <body>
<form id='myform' name="myform" action=""method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" > 获取元素内容 </button>
</form>
</body>
<script>
function getTxt(){var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + "--------");
var upwd = document.getElementsByTagName('input')[1] ;
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
}
</script>获取单选按钮
前提：将一组单选按钮设置相同的 name 属性值
(1) 获取单选按钮组：
document.getElementsByName("name 属性值"); (2) 遍历每个单选按钮，并查看单选按钮元素的 checked 属性
若属性值为 true 表示被选中，否则未被选中
选中状态设定：checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定：没有 checked 属性 或 checked=’false’
<form action=""name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad');
//radios[0].checked = 'checked'
for(var i = 0; i<radios.length; i++){console.log(radios[i].checked + '---' + radios[i].value)
}
</script>获取多选按钮
操作方式与单选同理，不同之处在于可以多选
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){if(ufav[i].checked){favstr += ufav[i].value+",";
}
}
favstr = favstr.substr(0,favstr.length-1);获取下拉选项
（1）获取 select 对象：
var ufrom = document.getElementById("ufrom");（2）获取选中项的索引：
var idx = ufrom.selectedIndex;（3）获取选中项 options 的 value 属性值：
var val = ufrom.options[idx].value; 注意：当通过 options 获取选中项的 value 属性值时，
若没有 value 属性，则取 option 标签的内容
若存在 value 属性，则取 value 属性的值
（4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text; 选中状态设定：selected=’selected’、selected=true、selected
未选中状态设定：不设 selected 属性
<body onload="init()">
<form id='myform' name="myform" action=""method="">
来自:
<select id="ufrom" name="ufrom">
<option value="-1" > 请选择 </option>
<option value="0" selected="selected"> 北京 </option>
<option value="1"> 上海 </option>
</select><br />
<button type="button" id="sub" name="sub"> 提交 </button>
</form>
</body>
<script>
function init () {var sub = document.getElementById("sub");
sub.onclick = function () {
// 获取 select 对象
var ufrom = document.getElementById("ufrom");
console.log("表单对象：" + ufrom);
// 获取选中的索引
var idx = ufrom.selectedIndex;
console.log("选中项的索引值：" + idx);
// 获取选中项的 value 值
var val = ufrom.options[idx].value;
console.log("选中项的 value 属性值：" + val);
// 获取选中项的 text
var txt = ufrom.options[idx].text;
console.log("选中项的 text：" + txt);
}
}
</script>提交表单
（1）使用普通 button 按钮 +onclick 事件 + 事件中编写代码:
获取表单.submit();（2）使用 submit 按钮 + onclick="return 函数 ()" + 函数编写代码:
最后必须返回：return true|false;
（3）使用 submit 按钮 / 图片提交按钮 + 表单 onsubmit="return 函数 ();" + 函数编写代码:
最后必须返回：return true|false;
<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
<input name="test" id="uname"/><span id="msg"></span><br />
<!-- 通过 js 事件：sub() 提交表单 -->
<input type="button" onclick="sub();" value="提交表单 1" />
<input type="submit" onclick="return sub2();" value="提交表单 2" />
<input type="submit" value="提交 onsubmit" /><br />
<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
width="60px" height="40px" />
</form>
<script type="text/javascript">
// input 的 type=button，调用 submit() 方法提交
function sub(){document.myform2.submit();
}
// 进行校验，返回值为 true 才能提交
function sub2(){var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){return true; // 提交}
document.getElementById("msg").innerHTML = "不能空着啊！！！";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
// onsubmit 事件提交
function onsub () {var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){return true; // 提交}
document.getElementById("msg").innerHTML = "填写点儿东西呗！(ˉ▽~～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
</script>表单校验
<form id='myform' name="myform">
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/> 小屁孩
<input type="radio" name="uage" value="1"/> 你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/> 篮球
<input type="checkbox" name="ufav" value="爬床"/> 爬床
<input type="checkbox" name="ufav" value="代码"/> 代码 <br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected"> 请选择 </option>
<option value="0"> 北京 </option>
<option value="1"> 上海 </option>
</select><br />
<div id="validate" style="color: red;"></div>
<button type="submit" onclick="return checkForm();"> 提交 </button>
<button type="reset" onclick="resetForm();"> 重置 </button>
</form>/**
要求：1、验证用户名
1) 不能为空
2) 长度为 6-12 位
2、验证密码
1) 不能为空 *
2) 长度为 6-12 位
3) 不能包含用户名
3、年龄: 必须选择 你懂得
4、爱好: 必须选择一项
5、来自: 必须选择一项
满足以上条件
1、弹出所有的内容
2、提交表单
否则
1、说明错误原因
2、不能提交表单
*/// 通过 id 属性值得到 dom 对象
function $(id) {return document.getElementById(id);
}
// 重置表单所有元素 注意函数不能命名为 clear reset 等
function resetForm(){
// 获取说明 div
var validate =$('validate');
validate.innerHTML ="";
}
// 表单校验
function checkForm () {
var flag =true;
// 获取说明 div
var validate = $('validate');
validate.innerHTML ="";
// 1、验证用户名
// 1)、获取用户名的值
var uname = $('uname').value;
// 1) 不能为空 --> 后期正则处理
// 2) 长度为 6-12 位
if("" === uname || uname.length == 0){
validate.innerHTML += "* 用户名不能为空 </br>";
flag = false;
}else if(uname.length < 6 || uname.length > 12){
validate.innerHTML += "* 用户名长度在 6-12 位 </br>";
flag = false;
}
// 2、验证密码
var upwd = $('upwd').value;
// 1) 不能为空
// 2) 长度为 6-12 位
// 3) 不能包含用户名
if("" === upwd || upwd.length == 0){
validate.innerHTML += "* 密码不能为空 </br>";
flag = false;
} else if(upwd.length < 6 ||upwd.length > 12){
validate.innerHTML += "* 密码长度在 6-12 位 </br>";
flag = false;
} else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
validate.innerHTML += "* 密码中不能出现用户名 </br>";
flag = false;
}
// 3、年龄: 必须选择 你懂得
var ageGroup = document.getElementsByName("uage");
var age ;
for (var i = 0; i < ageGroup.length; i++) {if(ageGroup[i].checked){age = ageGroup[i].value;
}
}
if(age == 0){
flag = false;
validate.innerHTML += "* 小屁孩，妈妈喊你回家 </br>";
}
// 4、爱好: 必须选择一项
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){if(ufav[i].checked){favstr += ufav[i].value + ",";
}
}
favstr = favstr.substr(0,favstr.length-1);
if(favstr.length < 1){
flag = false;
validate.innerHTML += "* 人生真无趣 </br>";
}
// 5、来自
var ufrom = $('ufrom');
var idx = ufrom.selectedIndex ;
var val = ufrom.options[idx].value;
var valTxt = ufrom.options[idx].text;
if(-1 == val){
flag = false;
validate.innerHTML += "* 你来自火星吗?</br>";
}
// 满足以上条件 弹出内容
if(flag){
var str = "";
str += "您的姓名是:" + uname + "\n";
str += "您的密码是:" + upwd + "\n";
str += "您的年龄是:" + "可以赢取白富美了" + "\n";
str += "您的爱好是:" + favstr + "\n";
str += "您来自于:" + valTxt + "\n";
alert(str);
// 设置表单提交的地址
myform.action="http://www.baidu.com";
// 提交表单
myform.submit();
return false;
} else {return false;}
正文完
