一、事件监听
事件：HTML事件是发生在HTML元素上的"事情"，比如：
● 按钮被点击
● 鼠标移动到元素之上
● 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码
事件绑定有两种方式：
方式一：通过HTML标签中的时间属性进行绑定
<input type="button" οnclick='on()'> function on(){ alert("我被点了"); }
方式二：通过DOM元素属性绑定
<input type="button"id="btn"> document.getElementByld("btn").οnclick=function(){ alert("我也被点了"); }
方式一及方式二代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="点我" onclick="on()"> <br> <input type="button" value="再点我" id="btn"> <br> <script> function on(){ alert("我被点了"); } document.getElementById("btn").onclick = function(){ alert("我也被点了"); } </script> </body> </html>
运行结果：
鼠标点击上面的“点我”按钮结果
鼠标点击下面的“再点我”按钮结果
二、常见事件
常见的事件可以在下面的网站中进行学习，下面就介绍一种onsubmit事件
| 事件名 | 说明 |
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移动到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
JavaScript 事件 (w3school.com.cn)
https://www.w3school.com.cn/js/js_events.asp
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="register" action="#"> <input type="text" name="username" /> <input type="submit" value="提交"> </form> <script> document.getElementById("register").onsubmit = function (){ //onsubmit：返回true，则表单会被提交，返回false，则表单不提交 return false; } </script> </body> </html>
onsubmit：返回true，则表单会被提交，返回false，则表单不提交
三、表单验证
1、当输入框失去焦点时，验证输入内容是否符合要求
（1）获取表单输入框 var usernameInput = document.getElementByld("username");
（2）绑定onblur事件 usernameInput.onblur = function (){ }
（3）获取输入内容 var username = usernameeInput.value.trim();
（4）判断是否符合规则 var usernameReg = /^\w{6,12}$/;//正则表达式
（5）如果不符合规则，则显示错误提示信息
2、当点击注册按钮时，判断所有输入框内容是否都符合要求，如果不符合则阻值表单提交
（1）获取表单对象 var regForm = document.getElementByld("reg-form");
（2） 为表单对象绑定onsubmit regForm.onsubmit = function(){ }
（3）判断所有输入框是否都符合要求，如果符合，则返回true,如果有一项不符合，则返回false
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="form-div"> <div class="reg-content"> <h1>欢迎注册</h1> <span>已经有账户?</span><a href="#">登录</a> </div> <form id="reg-form" action="#" method="get"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name="username" type="text" id="username"> <br> <span id="username_err" class="err-msg" style="display: none"><font color="red"> 用户名不太受欢迎</font></span> </td> </tr> <tr> <td>密 码</td> <td class="inputs"> <input name="password" type="password" id="password"> <br> <span id="password_err" class="err-msg" style="display: none"><font color="red">密码格式有误</font></span> </td> </tr> <tr> <td>手机号</td> <td class="inputs"><input name="tel" type="text" id="tel"> <br> <span id="tel_err" class="err-msg" style="display: none"><font color="red">手机格式有误</font></span> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" id="reg_btn"> </div> <br class="clear"> </form> </div> <script> //1、验证用户名是否符合规则 //1、1获取用户名的输入框 var usernameInput = document.getElementById("username"); //1、2绑定onblur事件 失去焦点 usernameInput.onblur = checkUsername; function checkUsername() { //1、3获取用户的输入名 var username = usernameInput.value.trim(); //1、4 判断用户名是否符合规则：长度 6-12,单词字符组成 var reg = /^\w{6,12}$/; var flag = reg.test(username); //var flag = username.length >= 6 && username.length <= 12; if (flag) { //符合规则 document.getElementById("username_err").style.display = 'none'; } else { //不符合规则 document.getElementById("username_err").style.display = ''; } return flag; } //1、验证密码是否符合规则 //1、1获取密码的输入框 var passwordInput = document.getElementById("password"); //1、2绑定onblur事件 失去焦点 passwordInput.onblur = checkPassword; function checkPassword() { //1、3获取用户的输入名 var password = passwordInput.value.trim(); //1、4 判断密码是否符合规则：长度 6-12 var reg = /^\w{6,12}$/; var flag = reg.test(password); //var flag = password.length >= 6 && password.length <= 12; if (flag) { //符合规则 document.getElementById("password_err").style.display = 'none'; } else { //不符合规则 document.getElementById("password_err").style.display = ''; } return flag; } //1、验证手机号是否符合规则 //1、1获取手机号的输入框 var telInput = document.getElementById("tel"); //1、2绑定onblur事件 失去焦点 telInput.onblur = checkTel; function checkTel() { //1、3获取用户的输入名 var tel = telInput.value.trim(); //1、4 判断手机号是否符合规则：长度 6-12 //var flag = tel.length == 11;长度11位，数字组成，第一位是1； var reg = /^[1]\d{10}$/; var flag = reg.test(tel); if (flag) { //符合规则 document.getElementById("tel_err").style.display = 'none'; } else { //不符合规则 document.getElementById("tel_err").style.display = ''; } return flag; } //1、获取表单对象 let regForm = document.getElementById("reg-form"); //2、指定onsubmit事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求，如果有一个不符合，则返回false var flag = checkUsername() && checkPassword() && checkTel(); return flag; } </script> </body> </html>
运行结果：
错误输入时结果：
正确输入时结果：
