废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="https://www.jb51.net/css/style1.css" type="text/css" /> <!-- 引入jQuery --> <script src="https://www.jb51.net/jquery/jquery.js" type="text/javascript"></script> <script> $(document).ready(function() { $("form :input.required").each(function() { var $required=$("<strong class=high>*</strong>"); $(this).parent().append($required); }); $("form :input").blur(function() { var $parent=$(this).parent(); $parent.find(".formtips").remove(); if($(this).is("#username")){ if(this.value==""||this.value.length<6){ var errorMsg='请输入至少六位的用户名'; $parent.append('<span>'+errorMsg+'</span>'); }else{ var okMsg='输入正确'; $parent.append('<span>'+okMsg+'</span>'); return false; } } if($(this).is("#email")){ if(this.value==""||(this.value!==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ var errorMsg='请输入正确的E—mail地址'; $parent.append('<span>'+errorMsg+'</span>'); }else{ var okMsg='输入正确'; $parent.append('<span>'+okMsg+'</span>'); } } }); $("#send").click(function() { $("form .required:input").trigger('blur'); var numError=$("form .onError").length; if(numError){ return false; } alert("注册成功，密码已发到你的邮箱，请查收。"); }); }); </script> </head> <body> <form method="post" action=""> <div> <label for="username">用户名:</label> <input type="text" /> </div> <div> <label for="email">邮箱:</label> <input type="text" /> </div> <div> <label for="personinfo">个人资料:</label> <input type="text" /> </div> <div> <input type="submit" value="提交"/><input type="reset"/> </div> </form> </body> </html>
总结
以上所述是小编给大家介绍的jQuery完成表单验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: