先写出html格式
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="输入11位的账号">
</div>
<div class="FM" id="FM">
请输入有效账号
</div>
</div>其对应的CSS
.box{
padding:50px;
}
.left{
float: left;
}
.FM{
float: left;
margin-left: 20px;
display: none;/*将文本隐藏，之后用js显示*/
font-size: 10px;
color: gray;
}然后是JS
先获取两个标签
var phone=document.getElementById("phone"),
FM=document.getElementById("FM");然后让被隐藏的标签显示出来（当input被选中的时候触发)
phone.onfocus=function(){
//让FM显示
FM.style.display='block';//ele.style.styleName=styleValue改变display的属性
}当input失去焦点的时候用onblur。
phone.onblur=function(){
var phoneNumber=this.value;//获取当前输入值
if(phoneNumber.length==11 && isNaN(phoneNumber)==false){//判断输入长度是否为11且是否为整数
FM.innerHTML='<img src="img/right.png">';//将FM里面的标签改为img
}else{
FM.innerHTML='<img src="img/error.png" width=20px>';
}
}效果展示：
附上全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
padding:50px;
}
.left{
float: left;
}
.FM{
float: left;
margin-left: 20px;
display: none;/*将文本隐藏，之后用js显示*/
font-size: 10px;
color: gray;
}
</style>
<script>
window.onload=function(){
//获取文本框和提示框
var phone=document.getElementById("phone"),
FM=document.getElementById("FM");
//给文本框绑定激活事件
phone.onfocus=function(){
//让FM显示
FM.style.display='block';
}
//给文本框绑定失去焦点
phone.onblur=function(){
var phoneNumber=this.value;//获取当前输入值
if(phoneNumber.length==11 && isNaN(phoneNumber)==false){//判断输入长度是否为11且是否为整数
FM.innerHTML='<img src="img/right.png">';//将FM里面的标签改为img
}else{
FM.innerHTML='<img src="img/error.png" width=20px>';
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="输入11位的账号">
</div>
<div class="FM" id="FM">
请输入有效账号
</div>
</div>
</body>
</html>
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
