表单校验+事件
Posted yisennnn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单校验+事件相关的知识，希望对你有一定的参考价值。
表单校验：
技术分析：
确定事件：表单提交时 onsubmit
文本框失去焦点时 onblur
编写元素
获取元素
document.getElementById("id值")
操作元素（获取元素值，操作标签体，操作标签的value属性）
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 用户名<input name="" value="tom" id="username" onfocus="getFocus()" onblur="loseFocus()"/><br /> <span id="spanid"></span> </body> </html> <script> //得到焦点 function getFocus(){ //获取元素 var user = document.getElementById("username"); //alert(user.value); //给span填写文本框内容 document.getElementById("spanid").innerHTML = user.value; } //时去焦点的时候将内容弹出 function loseFocus(){ //获取元素 var user = document.getElementById("username"); alert(user.value); document.getElementById("spanid").innerHTML = null; } </script>
步骤分析：
1.编写表单
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="get" onsubmit="return checkForm()"> <table width="60%" height="60%" align="center" bgcolor="#ffffff"> <tr> <td colspan="3">会员注册</td> </tr> <tr> <td width="20%">用户名:</td> <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" id="password"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" id="repassword"></td> <td><span id="repassword_msg"></span></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" id="email"></td> <td><span id="email_msg"></span></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday"> </td> </tr> <tr> <td>验证码</td> <td> <input type="text" name="checkcode"> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </body> </html>
2.表单提交时， 确定事件 onsubmit()
3.校验用户名和密码
4.获取用户名和密码的对象及值
5.判断内容，当为空时，获取相应的span元素
往span元素中显示错误信息
<html> <head> <meta charset="UTF-8"> <title></title> </head> <script> function getFocus(){ var flag = true; //1.获取用户名和密码的value值 var user = document.getElementById("username").value; var pass = document.getElementById("password").value; //校验用户名 if(user==null || user == ""){ //若为空，在span中添加错误信息 //获取span，设置错误信息 document.getElementById("username_msg").innerHTML="<font color=‘red‘>用户名不为空</font>" flag = false; }else{ // document.getElementById("username_msg").innerHTML=""; } //校验密码 if(pass==null || pass == ""){ //若为空，在span中添加错误信息 //获取span，设置错误信息 document.getElementById("password_msg").innerHTML="<font color=‘red‘>密码不为空</font>" //若不满足，则flag=false flag = false; }else{ document.getElementById("password_msg").innerHTML=""; } return flag; } //方式1 /*function loseFocus(){ //获取username的value值 var user = document.getElementById("username").value; //判断条件，若不满足，给出相应的span设置内容 if(user==null || user == ""){ document.getElementById("username_msg").innerHTML="<font color=‘red‘>用户名不为空</font>" }else{ document.getElementById("username_msg").innerHTML=""; } }*/ //方式2 function loseFocus(obj){ var pass = obj; if(pass==null || pass == ""){ document.getElementById("password_msg").innerHTML="<font color=‘red‘>用户名不为空</font>" }else{ document.getElementById("password_msg").innerHTML=""; } } </script> <body> <form action="#" method="get" onsubmit="return getFocus()"> <table width="60%" height="60%" align="center" bgcolor="#ffffff"> <tr> <td colspan="3">会员注册USER REGISTER</td> </tr> <tr> <td width="20%">用户名:</td> <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus()"></td> <td width="40%"><span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" id="password" onblur="loseFocus(this.value)"></td> <td><span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="repassword" id="repassword"></td> <td><span id="repassword_msg"></span></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" id="email"></td> <td><span id="email_msg"></span></td> </tr> <tr> <td>姓名:</td> <td><input type="text" name="name"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td>出生日期</td> <td> <input type="text" name="birthday"> </td> </tr> <tr> <td>验证码</td> <td> <input type="text" name="checkcode"> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </body> </html>
注意：
在方法中 (function()) this 指代的是当前的元素（当前dom对象）
事件总结：
常见事件：
焦点事件
onfocus
onblur
表单事件
onsubmit
onchange 改变
页面加载事件：
onload
鼠标事件（掌握）
onclick
鼠标事件（了解）
ondblclick:双击
onmousedown:按下
onmouseup:弹起
onmousemove:移动
onmouseover：悬停
onmouseout:移出
键盘事件(理解)
onkeydown：按下
onkeyup：弹起
onkeypress:按住
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #e02, #e022 { border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript"> //页面卸载前 window.onbeforeunload = function(){ return "在玩一会吧？"; } // 页面加载事件：当整个html页面加载成功调用 window.onload = function(){ // 文本框事件 var e01 = document.getElementById("e01"); e01.onfocus = function(){ html("textMsg","文本框获得焦点：focus"); } e01.onblur = function(){ html("textMsg","文本框失去焦点：blur"); } e01.onkeydown = function(){ html("textMsg","键盘按下：keydown；"); } e01.onkeypress = function(event){ var event = event || window.event; append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；"); } e01.onkeyup = function(){ append("textMsg","键盘弹起：keyup；"); } // 鼠标事件 var e02 = document.getElementById("e02"); e02.onmouseover = function(){ html("divMsg","鼠标移上：mouseover"); } e02.onmouseout = function(){ html("divMsg","鼠标移出：mouseout"); } e02.onmousedown = function(){ html("divMsg","鼠标按下：mousedown"); } e02.onmouseup = function(){ html("divMsg","鼠标弹起：mouseup"); } var e022 = document.getElementById("e022"); e022.onmousemove = function(){ var event = event || window.event; }; // 按钮事件 var e03 = document.getElementById("e03"); e03.onclick = function () { html("buttonMsg","单击：click"); }; e03.ondblclick= function () { html("buttonMsg","双击：dblclick"); }; }; /** * 指定位置显示指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function html(objId,text){ document.getElementById(objId).innerHTML = text; } /** * 指定位置追加指定信息 * @param objId ，元素的id属性值 * @param text，需要显示文本信息 */ function append(objId,text){ document.getElementById(objId).innerHTML += text; } </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <hr/> <div id="e02" ></div><span id="divMsg"></span> <hr/> <div id="e022" ></div><span id="divMsg2"></span> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> </body> </html>
以上是关于表单校验+事件的主要内容，如果未能解决你的问题，请参考以下文章