标签：sub style gre erro pwd ext text lang rem
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../jquery-1.7.2/jquery.min.js"></script> <script> $(function(){ //onblur: 光标离开控件，会触发onblur事件 $("#email").blur(function(){ var re = /^\w+@\w+(\.\w+){1,3}$/; if ( $(this).parent().find( "span" ).length > 0 ) { $(this).parent().find( "span" ).remove(); } if ( re.test( $(this).val() ) ) { $(this).after( "<span class=‘ok‘>格式正确</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() ) ) { $(this).after( "<span class=‘ok‘>格式正确</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>
标签：sub style gre erro pwd ext text lang rem
原文地址：https://www.cnblogs.com/MoonWorship/p/10990931.html
