JavaScript事件监听、常见事件及表单验证
原创
©著作权归作者所有:来自51CTO博客作者夏志121的原创作品,请联系作者获取转载授权,否则将追究法律责任
目录
一、事件监听
二、常见事件
三、表单验证
一、事件监听
事件: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>
运行结果:
错误输入时结果:
正确输入时结果: