|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
font-size: 12px;
display: none;
}
input{
outline: none;
}
</style>
</head>
<body>
<!--
用户名：只能输入字母或者数字，6-12 给出相应的提示
-->
<div>
用户名：
<input type="text" id="input" />
<span id="span">提示内容</span>
</div>
<script>
var input = document.getElementById("input");
var span = document.getElementById("span");
var reg_name = /^[a-zA-Z0-9]{6,12}$/g;
input.onfocus = function(){
reg_name.lastIndex = 0;
//每次聚焦的时候都清空游标
span.style.display = "inline";
span.style.color = "#00f";
span.innerHTML = "请输入正确6-12位的字母或者数字"
input.style.border = "1px solid #00f"
}
input.onblur = function(){
// console.log(reg_name.test(input.value))
// console.log(reg_name.lastIndex)
if(reg_name.test(input.value)){
span.style.display = "inline";
span.style.color = "#0f0";
span.innerHTML = "该用户名符合规范";
input.style.border = "1px solid #0f0"
}else{
span.style.display = "inline";
span.style.color = "#f00";
span.innerHTML = "请输入6-12的字母或者数字";
input.style.border = "1px solid #f00"
}
}
</script>
</body>
</html>
|
