js——2表单检验，onfocus，onblur，onkeyup用法
onblur：事件会在对象失去焦点时发生
onfocus：是onblur 相反事件 。
onkeyup： 表示键盘每输完一个字符之后触发，就是键盘上的按键被放开时。
案例：
<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','用户名长度不能小于6位')" onkeyup="checkUsername() "/>
注：checkUsername()和showTips（）为自定义函数
<!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>
（1）案例要点：
- 引入外部的js文件 ：<script type="text/javascript" src="../js/regutils.js" ></script> ，使用此文件中已经写好的检验邮箱和手机号的函数 checkEmail(umail);
- 使用了自定义函数：function showTips(spanID,msg)
- 正文<body>中 <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" > checkForm()函数检验了所有需要检查的格式
（2）案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID,msg){
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
onblur 表示失去焦点时触发
onkeyup 表示键盘每输完一个字符之后触发，就是键盘上的按键被放开时。
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>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkPassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);//？？？？
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
