js事件

时间：2020-09-17 15:49:59 阅读：30 评论：0 收藏：0 [点我收藏+]

标签：事件模型 confirm doc number 定义体验 oca www variable

JS事件

　　事件

　　　　事件 (Event) 是 JavaScript 应?跳动的?脏，进?交互，使??动起来。当我们与浏览器中 Web ??进?某些类型的交互时，事件就发?了。

　　　　事件源: 谁触发的事件

　　　　事件名: 触发了什么事件

　　　　事件监听: 谁管这个事情，谁监视？

　　　　事件处理:发?了怎么办

　　作用:

　　（1）验证?户输?的数据。

　　（2）增加??的动感效果。

　　（3）增强?户的体验度

事件类型

　　JavaScript可以处理的事件类型为：?标事件、键盘事件、HTML事件。

常用的几个事件:

onclick  元素发生鼠标点击时触发
onblur  元素失去焦点时运行的脚本
onfocus   元素获得焦点时运行的脚本
onload    页面加载之后触发
onchange   在元素值被改变时运行的脚本
onmouseover   当鼠标指针移动到元素上时触发
onmouseout     当鼠标指针移出元素时触发
onkeyup   当用户释放按键时触发
onkeydown  在用户按下按键时触发

事件流和事件模型

　　我们的事件最后都有?个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当?个HTML元素产??个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。

　　事件顺序有两种类型：事件捕获和事件冒泡。

　　　　IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（?档）。

　　　　事件捕获的思想是不太具体的节点应该更早接收到事件，?最具体的节点应该最后接收到事件。事件捕获的?意在于在事件到达预定?标之前捕获它。

BOM对象

　　BOM的核?对象是window，它表示浏览器的?个实例。window对象有双重??，它既是通过 JavaScript访问浏览器窗?的?个接?，?是ECMAScript规定的Global对象。这意味着在??中定义的任何?个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等?法。如果??中包含框架，则每个框架都拥有??的window对象，并且保存frames集合中。在frames集合中，可以通过数值索引（从0开始，从左?右，从上到下）或者框架的名称来访问相应的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() : 在指定的毫秒数后调?函数或计算表达式。返回?个唯?的标识；也可以通过返回的

clearTimeout(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)，到上?个??

location对象

location 对象是window对象之?，提供了与当前窗?中加载的?档有关的信息，还提供了?些导航功

能。也可通过 window.location 属性来访问。

location 对象的属性 href：设置或返回完整的 URL

location 对象的?法

reload()：重新加载当前?档。

replace()：?新的?档替换当前?档。

DOM对象

　　要实现??的动态交互效果，bom 操作远远不够，需要操作 html 才是核?.如何操作 html，就是 DOM。简单的说，dom 提供了?程序动态控制 html 接?。DOM即?档对象模型描绘了?个层次化的节点树，运?开发?员添加、移除和修改??的某?部分。dom 处于javascript 的核?地位上。

节点

　　加载 HTML ??时，Web 浏览器?成?个树型结构，?来表示??内部结构。DOM 将这种树型结构理解为由节点组成，组成?个节点树。对于??中的元素，可以解析成以下?种类型的节点：

　　　　1.文档节点

　　　　2.元素节点

　　　　3.属性节点

　　　　4.文本节点

　　　　5.注释节点

操作元素节点

　　1.获取节点

　　方法:

getElementById()

getElementsByTagName()

getElementsByClassName()

getElementsByName()

案例:

<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>
12345678910111213141516171819202122232425
<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>

2.创建节点和插?节点

创建节点

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>

3.间接查找节点

childNodes

返回元素的?个?节点的数组

childNodes

返回元素的?个?节点的数组

lastChild

返回元素的最后?个?节点

nextSibling

返回元素的下?个兄弟节点

parentNode

返回元素的?节点

parentNode

返回元素的?节点

4.删除节点

　　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>

获取表单元素

　　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事件+事件中编写代码:

var val = ufrom.options[idx].value;

var txt = ufrom.options[idx].text;

来?:

（1）使?普通button按钮+onclick事件+事件中编写代码:获取表单.submit();

（2）使?submit按钮 + οnclick=“return 函数()” +函数编写代码:

最后必须返回：return true|false;

（3）使?submit按钮/图?提交按钮 + 表单οnsubmit=“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; 
?
 }

js事件

标签：事件模型 confirm doc number 定义体验 oca www variable

原文地址：https://www.cnblogs.com/instead-everyone/p/13620238.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行