<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ padding:50px; } .left,.tip{ float:left; } .left{margin-right:10px;} .tip{display:none;font-size:14px;} </style> <script> window.onload=function(){ // 获取文本框和提示框 var phone=document.getElementById("phone"), tip=document.getElementById("tip"); // 给文本框绑定激活的事件 phone.onfocus=function(){ // 让tip显示出来 tip.style.display=‘block‘; } // 给文本框绑定失去焦点的事件 phone.onblur=function(){ // 获取文本框的值,value用于获取表单元素的值 var phoneVal=this.value; // 判断手机号码是否是11位的数字 // 如果输入正确，则显示对号图标，否则显示错号图标 if(phoneVal.length==11 && isNaN(phoneVal)==false){ tip.innerHTML=‘<img src="img/right.png">‘; }else{ tip.innerHTML=‘<img src="img/error.png">‘; } } } </script> </head> <body> <div class="box"> <div class="left"> <input type="text" id="phone" placeholder="请输入手机号码"> </div> <div class="tip" id="tip"> 请输入有效的手机号码 </div> </div> </body> </html>
原文：http://www.cnblogs.com/zf723/p/7143449.html