<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < title > the Document </ title > < Script the src = "../ jQuery-1.7.2 / jQuery. min.js " > </ Script > < Script > $ ( function () { // onblur: cursor leaves the control, it will trigger the onblur event $ ( " #email " ).blur ( function () { were re = /^\w+@\w+(\.\w+){1,3}$/; if ( $(this).parent().find( "span" ).length > 0 ) { $(this).parent().find( "span" ).remove(); } if ( re.test( $(this).val() ) ) { $ ( The this ) .after ( " <span class = 'OK'> properly formatted </ span> " ); }else { $(this).after( "<span class='error'>格式错误</span>" ); } }); $("#pwd").blur(function(){ var re = /^\w{6,20}$/; if ( $(this).parent().find( "span" ).length > 0 ) { $(this).parent().find( "span" ).remove(); } if ( re.test( $(this).val() ) ) { $ ( The this ) .after ( " <span class = 'OK'> properly formatted </ span> " ); }else { $(this).after( "<span class='error'>格式错误</span>" ); } }); $("#reg :submit").click(function(){ $("#email").trigger("blur"); $("#pwd").trigger("blur"); if ( $("#reg").find(".error").length > 0 ) { return false; } }); }); </script> <style> .ok { color:green; } .error { color:red; } </style> </head> <body> <form action="http://www.baidu.com" method="get" id="reg"> <p class=emailParent> 邮箱: <input type="text" name="email" id="email"> </p> <p> 密码: <input type="text" name="pwd" id="pwd"> </p> <p> <input type="submit" id="submit" value="注册" > </p> </form> </body> </html>