<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 2. onsubmit="return false;" -->
<form action="" method="post" id="login">
<label class="title">用户登录</label>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="" />
<label for="password">密码:</label>
<input type="password" id="password" name="password" autofocus />
<!-- 1. type="button" 来表示这是一个普通按钮,没有提交行为 -->
<button name="submit" onclick="check(this)">登录</button>
</form>
<script>
function check(ele) {
// console.log(ele)
event.preventDefault()
event.stopPropagation()
console.log(ele.form)
let email = ele.form.email
let password = ele.form.password
if (email.value.length === 0) {
alert('邮箱不能为空')
email.focus()
return false
} else if (password.value.length === 0) {
alert('密码不能为空')
return false
} else {
alert('验证通过')
}
}
// document.forms.login.email.onblur = function () {
// if (this.value.length === 0) {
// alert('邮箱不能为空')
// return false
// }
// }
document.forms.login.password.onfocus = function () {
alert('密码不能为空')
return false
}
// document.forms.login.password.onblur = function () {
// alert('密码不能为空')
// return false
// }
</script>
</body>
</html>