表单校验中常用的事件:
获得焦点事件: onfocus
失去焦点事件 onblur
按键抬起事件: onkeyup<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
确认事件
事件触发函数
函数操作元素
校验用户名
1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
事件: 焦点事件 onfocus
触发函数
函数里面要做一些事情
span 给用户提示信息
2. 当用户鼠标移开时候, 校验一下用户输入
事件: 失去焦点 onblur
触发函数
函数要干事情:
校验用户输入
得到用户输入的值
3. 当用户按键输入抬起的时候, 校验一下用户输入
-->
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function checkUsername(){
/*
alert(this) 每一个函数中都隐藏着一个this指针, 指向的是当前事件触发对象
*/
var uValue = document.getElementById("username").value;
// alert(uValue);
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "对不起,太短啦!"
return false;
}else{
span.innerHTML = "恭喜您,够用!"
return true;
}
}
function checkForm(){
var flag = checkUsername();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()">
用户名:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips(‘span_username‘,‘用户名长度不能小于6位‘)" /><span id="span_username"></span> <br />
<input type="submit" value="注册" />
</form>
</body>
</html>
原文：http://blog.51cto.com/357712148/2316838