您好,登錄后才能下訂單哦!
表單校驗中常用的事件:
獲得焦點事件: 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>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。