<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <style> span{ color: #ccc; display: none; } </style> </head> <body> 用户名:<input type="text" name="username" id="use"><span id="tit1">请输入6-18位的用户名</span> <br> 邮箱: <input type="text" name="email" id="Emal"><span id="tit2">请输入正确邮箱地址</span> <script> var E=document.getElementById('Emal'); var Sp=document.getElementById('tit2'); // 绑定事件 获取焦点事件 onfocus E.onfocus=function(){ Sp.style.display='inline-block'; } // 绑定失去焦点事件onblur E.onblur=function(){ // console.log('失去了焦点'); // 获取用户输入的内容 var val=E.value; // 写邮箱规则 var reg=/^[0-9a-zA-Z]+@[0-9a-zA-Z]+.(com|cn|org|net)$/; // 接收匹配的返回值 成功返回true 如果格式不正确返回false var T=reg.test(val); console.log(T); if(T==true){ Sp.innerHTML='邮箱格式正确'; Sp.style.color='green'; }else{ Sp.innerHTML='邮箱格式错误,请重新输入'; Sp.style.color='red'; } } </script> </body> </html>