<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function checkInfo () { var uValue=document.getElementById("username").value; var span=document.getElementById("span_username"); if(uValue.length<6) { span.innerHTML="<font color='red' size='2'>用户名长度不得小于6</font>"; }else{ if(/^[a-z]+$/.test(uValue))//符合要求的情况下 span.innerHTML="<font color='aqua' size='2'>用户名可用</font>"; else//不符合要求的情况下 span.innerHTML="<font color='red' size='2'>用户名需要全为英文</font>"; } } function showtip(){ var span=document.getElementById("span_username"); span.innerHTML="<font color='red' size='2'>用户名长度不能小于6位，且为全英文</font>"; } //密码的相关提示信息 function pass_showTip(){ var span=document.getElementById("span_password"); span.innerHTML="<font color='red' size='2'>密码长度不小于8位，且需要使用数字字母两种字符</font>"; } function pass_checkInfo(){ pVlue=document.getElementById("password").value; var span=document.getElementById("span_password"); if(pVlue.length<8){ span.innerHTML="<font color='red' size='2'>抱歉！密码长度不得小于8位</font>"; }else{ if(/^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/.test(pVlue)){ //此时密码符合我们的预期要求 //规定，密码要同时具有数字和字母两种。 span.innerHTML="<font color='aqua' size='2'>符合</font>"; }else{//此时密码不符合规范 span.innerHTML="<font color='red' size='2'>抱歉！密码不符合规范</font>" } } } //下面是邮箱的验证了 function email_checkInfo(){ var eValue=document.getElementById("email").value; var span=document.getElementById("span_email"); if(eValue.match("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$")){ //此时符合邮箱的标准 span.innerHTML="<font color='aqua' size='2'>符合</font>" }else{ span.innerHTML="<font color='red' size='2'>抱歉！不符合要求</font>" } } //最后就是手机的正则匹配了 function phone_checkInfo(){ var phoneValue=document.getElementById("phone").value; var span=document.getElementById("span_phone"); if(/^1[3456789]\d{9}$/.test(phoneValue))//此时手机号匹配成功 span.innerHTML="<font color='aqua' size='2'>符合</font>"; else span.innerHTML="<font color='red' size='2'>抱歉!不符合要求</font>" } //确认密码的操作 function relpassword_checkInfo(){ var relPValue=document.getElementById("relpassword").value; var pValue=document.getElementById("password").value; var span=document.getElementById("span_relpassword"); if(pValue==relPValue){ span.innerHTML="<font color='aqua' size='2'>符合</font>" }else{ span.innerHTML="<font color='red' size='2'>抱歉！两次密码不一致</font>" } } </script> </head> <body> <script> //笔记： /* * onfocus:当获得焦点时启动相应的函数 * onblur:当失去焦点时启动相应的函数 * onkeyup:按键按下去之后手指抬起所触发的事件 */ </script> <form> 用户名:<input type="text" name="username" id="username" onfocus="showtip()" onkeyup="checkInfo()" /><span id="span_username"></span><br /> 密码:<input type="password" name="password" id="password" onfocus="pass_showTip()" onblur="pass_checkInfo()" /><span id="span_password"></span><br /> 确认密码:<input type="password" name="relpassword" id="relpassword" onblur="relpassword_checkInfo()" /><span id="span_relpassword"></span><br /> 邮箱:<input type="email" name="email" id="email" onblur="email_checkInfo()" /><span id="span_email"></span><br /> 手机:<input type="text" name="phone" id="phone" onblur="phone_checkInfo()" /><span id="span_phone"></span><br /> </form> </body> </html>