Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!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位的任意字母数字下划线';
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>点击 "运行实例" 按钮查看在线实例
