原理版：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <style> * { padding: 0; margin: 0; } #myForm { width: 400px; padding: 20px; margin: 50px auto; border: 1px solid #eee; } input { margin: 20px 20px 20px 10px; padding: 5px 10px; } </style> <script src="../js/jquery.min.js"></script> <script> $(function () { var flag = false; // blur: 元素失去光标触发的事件； $("#txt").blur(function () { var re = /w+@w+(.w){1,3}/; if (re.test($(this).val())) { $("span").eq(0).html("输入正确").css("color", "green"); flag1 = true; } else { $("span").eq(0).html("格式错误").css("color", "red"); flag1 = false; } }) $("#pwd").blur(function () { // ^: 在中括号里表示取反（排除）， 在中括号外表示从头开始； // $: 表示结尾。 var re = /^S{6,12}$/; if ( re.test($(this).val()) ) { $("span").eq(1).html("输入正确").css("color", "green"); flag2 = true; } else { $("span").eq(1).html("格式错误").css("color", "red"); flag2 = false; } }) $(":submit").click( function () { // triggerHandler: 自动触发事件； $("#txt").triggerHandler("blur"); $("#pwd").triggerHandler("blur"); if ( flag1 == false || flag2 == false ) { return false; } }) }) </script> </head> <body> <form action="http://www.baidu.com" id="myForm"> 邮箱： <input type="text" id="txt"><span></span> <br> 密码： <input type="password" name="" id="pwd"><span></span> <br> <input type="submit" value="提交"> </form> </body> </html>
升级适应版：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ok { color: green; } .error { color: red; } </style> <script src="../js/jquery.min.js"></script> <script> $(function () { $("#user").blur(function () { var re = /w+@w+(.w+){1,3}$/; if ($(this).parent().find(".ok,.error").length > 0) { $(this).parent().find(".ok,.error").remove(); } if (re.test($(this).val())) { $(this).parent().append("<span class='ok'>格式正确</span>"); } else { $(this).parent().append("<span class='error'>格式错误</span>"); } }); $("#pwd").blur(function () { var re = /w{6,20}$/; if ($(this).parent().find(".ok,.error").length > 0) { $(this).parent().find(".ok,.error").remove(); } if (re.test($(this).val())) { $(this).parent().append("<span class='ok'>格式正确</span>"); } else { $(this).parent().append("<span class='error'>格式错误</span>"); } }); $(":submit").click(function () { $("#user").triggerHandler("blur"); $("#pwd").triggerHandler("blur"); if ($("#userForm").find(".error").length > 0) { return false; } }); }); </script> </head> <body> <form action="http://www.baidu.com" id="userForm"> <p> 邮箱: <input type="text" name="" id="user"> </p> <p> 密码: <input type="text" name="" id="pwd"> </p> <p> <input type="submit" value="注册" id="reg"> </p> </form> </body> </html>