收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
用戶名: <input type="text" id="inp"><font id="myfont"></font>
</body>
<script>
var inp = document.getElementById('inp');
var myfont = document.getElementById('myfont');
//獲取焦點事件
inp.onfocus = function(){
//console.log('獲取焦點');
myfont.innerHTML = ' 請輸入4-8位的任意字母數(shù)字下劃線';
myfont.color="#666666";
myfont.size =2;
}
//失去焦點事件
// /^\w{4,8}$/
inp.onblur = function (){
//console.log('失去焦點')
//獲取input里面輸入的值
//alert(inp.value);
str = this.value;
//alert(typeof str);
//str.match() -------- null 沒有匹配到
if(str.match(/^\w{4,8}$/) == null){
//alert('用戶名驗證失敗')
myfont.innerHTML = ' <img src="./cuo.png" width="20px" height="20px"/>用戶名驗證失敗';
myfont.color="red";
}else{
myfont.innerHTML = ' <img src="./dui.png" width="20px" height="20px">';
myfont.color="green";
//alert('用戶名成功')
}
}
</script>
</html>點擊 "運行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號