js03 案例驱动表单的验证

//////////////////////////////////////
案例2-表单校验plus
需求:
提示信息不用弹出框,将信息追加在文本框后面？
技术分析:
确定事件 表单提交的时候 onsubmit

onsubmit=" return checkForm2()" 函数返回为true的时候才能 提交
文本框失去焦点的时候 onblur
编写函数
获取元素
document.getElementById("id值");
操作元素(获取元素的值,操作标签体,操作标签value属性)

//给span填写内容 文本框的内容

 

<span id="spanid"></span>

失去焦点的时候 将 文本框输入的内容显示在 span标签里

//的到span标签 并且通过 innerHTML属性设置 内容
document.getElementById("spanid").innerHTML=user.value;

/////////////////
步骤分析:
1.表单
2.表单提交的时候 确定事件 onsubmit()  = “return  函数”
3.校验用户名和密码
4.获取用户名和密码的对象及值 ById
5.(当文本框失去焦点的时候才开始判断 ！) 判断内容,当为空的时候,获取响应的span元素？ 操作span标签体

 

相应到span元素

document.getElementById("spanid").innerHTML=user.value;

 

往span元素中显示错误信息

username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>";

 

innerHTML往标签里写内容。 直接写 html内容

////////////////////////
注意: 事件函数 传参 参数 为 this
在方法中(function()) this指代的是当前的元素(当前dom对象)？

input标签

例如:
<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
方法: 
function loseFocus(obj){
alert(obj);
}
/////////////////////////////
事件总结:
常见的事件:
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变
页面加载事件:★
onload

鼠标事件(掌握)
onclick
鼠标事件(了解)
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停
onmouserout:移出
键盘事件(理解)
onkeydown:按下
onkeyup:弹起
onkeypress:按住
////////////
绑定事件:

js事件和函数的绑定:
方式1:
通过标签的事件属性 <xxx onclick="函数名(参数)"></xxx>
方式2:
给元素派发事件？先获取元素，得到他执行的事件 从上往下 解析 找不到 id 的元素 还没有加载，把script放在后边可以执行
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名//类似监听 这个元素 是否被 点击了
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面
b.在页面加载成功之后在运行方式2的js代码 使用onload事件. 在页面后元素加载成功后执行的方法

///////////////////
了解
阻止默认事件的发生
阻止事件传播
/////////////////