表单校验
表单校验中常用的事件:
获得焦点事件: onfocus
失去焦点事件 onblur
按键抬起事件: onkeyup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 1.确定事件:onfocus
* 2.事件要驱动函数
* 3.函数要干一些事情:修改span的内容
*/
function showTips(){
//首先要获得要操作的元素span
var span = document.getElementById("span_username");
span.innerHTML ="<font color='red' size='2'>用户名长度不能小于6位</font>";
}
/*
* 校验用户名
* 1.事件:onblur 失去焦点
* 2.函数:checkUsername()
* 3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
//显示校验结果
if(uValue.length<6){
span.innerHTML="<font color='red' size='2'>×,用户名太短</font>";
}else{
span.innerHTML="<font color='green' size='2'>√,用户名可用</font>";
}
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" >
用户名:<input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" /><span id="span_username"></span><br />
确认密码:<input type="password" id="repassword" /><br />
邮箱:<input type="text" id="email" /><br /> <!--如果采用type="email"则会自动校验-->
手机号:<input type="text" id="text"/><br />
<input type="submit" value="提交" />
</form>
</body>
</html>