失焦验证
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了失焦验证相关的知识，希望对你有一定的参考价值。
<body>
账号：<input type="text"><span style="color: red"></span>
<p>密码：<input type="password"><span style="color: red"></span></p>
<p><button>登陆</button></p>
<script>
var usernameEle = document.getElementsByTagName("input")[0],
passwordEle = document.getElementsByTagName("input")[1],
usernameWarnEle = document.getElementsByTagName("span")[0],
passwordWarnEle = document.getElementsByTagName("span")[1],
btnEle = document.getElementsByTagName("button")[0];
usernameEle.onblur = function() {
var usernameVal = usernameEle.value;
//全部清空
usernameWarnEle.innerhtml = "";
if (!/^[\u4e00-\u9fa5]|[A-z]|[0-9]{4,20}$/.test(usernameVal)){
usernameWarnEle.innerHTML = "格式错误!";
}else{
usernameWarnEle.innerHTML = "格式正确！";
}
//判断
if (usernameVal === "") {
usernameWarnEle.innerHTML = "账号不能为空！";
}
}
passwordEle.onblur = function() {
var passwordVal = passwordEle.value;
//全部清空
passwordWarnEle.innerHTML = "";
//判断
if (passwordVal === "") {
passwordWarnEle.innerHTML = "密码不能为空！";
}
}
</script>
</body>
以上是关于失焦验证的主要内容，如果未能解决你的问题，请参考以下文章