<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单事件</title>
<style>
@import url(style1.css);
</style>
</head>
<body>
<!-- <form action="check.php" method="POST" id="login" onsubmit="return false"> -->
<form action="check.php" method="POST" id="login">
<label class="title">用户登录</label>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="" autofocus />
<label for="password">密码:</label>
<input type="password" id="password" name="password" />
<!-- <button name="submit" type="submit">登录</button> -->
<button name="submit">登录</button>
</form>
<script>
const login = document.forms.login;
// login.onsubmit = () => console.log("提交了");
// 禁用元素的默认行为
// login.onsubmit = ev => ev.preventDefault();
// login.onsubmit = function (ev) {
// ev.preventDefault();
// };
// login.控制的name属性就可以
login.submit.onclick = ev => {
// 禁用默认提交行为
ev.preventDefault();
// 禁用冒泡
ev.stopPropagation();
// 按钮
// console.log(ev.currentTarget);
// 表单
// console.log(ev.currentTarget.form);
// 非空验证
isEmpty(ev.currentTarget.form);
};
function isEmpty(form) {
console.log(form.email.value.length);
console.log(form.password.value.length);
if (form.email.value.length === 0) {
alert("邮箱不能为空");
form.email.focus();
return false;
} else if (form.password.value.length === 0) {
alert("密码不能为空");
form.email.focus();
return false;
} else {
alert("验证通过");
}
}
// login.email.oninput = ev => console.log(ev.target.value);
// login.email.onblur = ev => console.log(ev.target.value);
// change: 值变了且失去焦点才触发 input + blur
// login.email.onchange = ev => console.log(ev.target.value);
// submit: 提交
// focus: 焦点
// input: 用户输入内容时发生
// blur: 失去焦点触发
// change: 值发生变化
// select:
</script>
</body>
</html>
body {
background-color: mediumturquoise;/
color: #444;
font-weight: lighter;
}
#login {
width: 20em;
border-radius: 0.3em;
box-shadow: 0 0 1em #888;
box-sizing: border-box;
padding: 1em 2em 1em;
margin: 2em auto;
background-color: paleturquoise;
display: grid;
grid-template-columns: 3em 1fr;
gap: 1em 0;
}
#login .title {
grid-area: auto / span 2;
place-self: center;
}
#login input {
border-radius: 0.3em;
border: none;
padding-left: 0.3em;
}
#login input:focus {
outline: none;
box-shadow: 0 0 5px seagreen;
border-radius: 0.2em;
transition: 0.5s;
}
#login button {
grid-area: auto / 2 / auto;
outline: none;
background-color: lightseagreen;
border: none;
height: 2em;
color: #fff;
}
#login button:hover {
cursor: pointer;
background-color: seagreen;
transition: 0.5s;
}
