获取焦点提示以及失去焦点提示
<!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>
更多相关文章
- Android(安卓)访问Webservice接口，参数对象不能串行化问题解决（jav
- android fragment（android.support.v4.app.Fragment和android.app
- Android(安卓)邮箱验证
- 跨进程共享 SharedPreferences
- android 源码的一些修改定制方案
- 不能读取TF卡不能读取的寻回法子
- eclipse开发android常见错误总结
- android 发送邮件--实现 send email for android
- Android(安卓)应用程序不能全屏显示