确定事件事件要触发函数: 定义函数函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerHTML属性可以编写代码... innerTEXT() 不能编写代码

表单校验中常用的事件:

获得焦点事件: onfocus失去焦点事件 onblur按键抬起事件: onkeyup

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- 确认事件 事件触发函数 函数操作元素 校验用户名 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示 事件: 焦点事件 onfocus 触发函数 函数里面要做一些事情 span 给用户提示信息 2. 当用户鼠标移开时候, 校验一下用户输入 事件: 失去焦点 onblur 触发函数 函数要干事情: 校验用户输入 得到用户输入的值 3. 当用户按键输入抬起的时候, 校验一下用户输入 --> <script> function showTips(spanID,msg){ var span = document.getElementById(spanID); span.innerHTML = msg; } function checkUsername(){ /* alert(this) 每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象 */ var uValue = document.getElementById("username").value;// alert(uValue); var span = document.getElementById("span_username"); if(uValue.length < 6){ span.innerHTML = "对不起,太短啦!" return false; }else{ span.innerHTML = "恭喜您,够用!" return true; } } function checkForm(){ var flag = checkUsername(); return flag; } </script> </head> <body> <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()"> 用户名:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br /> <input type="submit" value="注册" /> </form> </body></html>