<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单检验</title> <style> .red{ color:red; } .green{ color:green; } </style> <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#uname").blur(checkuname);//失去焦点，触发事件 $("#upwd").blur(checkupwd); $("#reupwd").blur(checkreupwd); $("#email").blur(checkemail); $("#tel").blur(checktel); //账号规则:字母开头，由数字字母组成，长度是3到16位 function checkuname(){ var $uname=$("#uname"); var $div=$("#divuname"); $div.html("");///用于清空第一次输入错误信息 var reg=/^[a-zA-Z][a-zA-Z0-9]{2,15}$/; if(reg.test($uname.val())==false){ $div.html("格式不正确，账号从字母开始，由数字字母组成，长度是3到16位"); $div.removeClass().addClass("red"); return false; }else{ $div.html("正确"); $div.removeClass().addClass("green"); return true; } } //密码：数字，由字母组成，长度为6-18位 function checkupwd(){ var $upwd=$("#upwd"); var $div=$("#divupwd"); $div.html(""); var reg=/^[a-zA-Z0-9]{6,18}$/; if(reg.test($upwd.val())==false){ $div.html("格式不正确，密码由数字和字母组成，长度是6-18位"); $div.removeClass().addClass("red") ; return false; }else{ $div.html("正确"); $div.removeClass().addClass("green"); return true; } } function checkreupwd(){ var $upwd=$("#upwd"); var $reupwd=$("#reupwd"); var $div=$("#divreupwd"); $div.html(""); if($upwd.val()!=$reupwd.val()){ $div.html("两个密码不一致"); $div.removeClass().addClass("red"); return false; }else{ $div.html("正确"); $div.removeClass().addClass("green"); return true; } } function checkemail(){ var $email=$("#email"); var $div=$("#divemail"); $div.html(""); var reg=/^\w @[a-zA-Z0-9] (\.[A-Za-z]{2,3}){1,2}$/; if(reg.test($email.val())==false){ $div.html("邮箱格式不正确"); $div.removeClass().addClass("red"); return false; }else{ $div.html("正确"); $div.removeClass().addClass("green"); return true; } } function checktel(){ var $tel=$("#tel"); var $div=$("#divtel"); $div.html(""); var reg=/^1[35789]\d{9}$/; if(reg.test($tel.val())==false){ $div.html("电话格式不正确"); $div.removeClass().addClass("red"); return false; }else{ $div.html("正确"); $div.removeClass().addClass("green"); return true; } } function checkAll(){ var a=checkuname(); var b=checkupwd(); var c=checkreupwd(); var d=checkemail(); var e=checktel(); if(a&&b&&c&&d&&e){ return true; }else{ return false; } } $("form").submit(checkAll); }); </script> </head> <body> <form action=""> <label for="uname">账号:</label> <input type="text" name="uname" id="uname"><span id="divuname"></span><br/> <!-- <span>标签用于显示输入框后面的文本 --> <label for="upwd">密码：</label> <input type="password" id="upwd"><span id="divupwd"></span><br> <label for="reupwd">确认密码：</label> <input type="password" id="reupwd"><span id="divreupwd"></span><br> <label for="email">邮箱</label> <input type="text" id="email"><span id="divemail"></span><br> <label for="tel">电话：</label> <input type="text" id="tel"><span id="divtel"></span><br> <input type="submit" value="提交"> </form> </body> </html>