仿stargame忘记密码的jquery表单验证_表单按钮_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

仿stargame忘记密码的jquery表单验证

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2014-02-14 14:03:35 去下载去预览

特效介绍

jquery表单验证

仿stargame忘记密码的jquery表单验证。错误内容追加在一个div里面。样式比较好看。兼容IE6。

使用方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿stargame忘记密码的jquery表单验证</title> <meta name="keywords" content="表单验证,jquery表单验证" /> <meta name="description" content="表单验证,jquery表单验证" /> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> </head> <body> <style> #ForgottenPassword div,#ForgottenPassword ul,#ForgottenPassword li,#ForgottenPassword p,#ForgottenPassword h3{margin:0; padding:0;} #ForgottenPassword{width:750px; overflow:hidden; _position:relative; background:#FAF9F5; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px;} #ForgottenPassword_Wrong{background:url(http://www.5imoban.net/download/png/tipbox_red_3.jpg) no-repeat; border:2px solid #B90618; display:none;} #ForgottenPassword_Wrong h3{margin-left:84px; margin-top:15px; font-size:16px; color:#fff; border-bottom:1px solid #fff; padding-bottom:3px; margin-right:35px;} #ForgottenPassword_Wrong ul{margin:10px auto 15px 100px;} #ForgottenPassword_Wrong ul li{margin-top:5px;} #ForgottenPassword p,#ForgottenPassword label{color:#3A3E47;} #ForgottenPassword p{line-height:20px; width:520px; margin:10px 0;} #ForgottenPassword_Form{border-top:1px solid #D3E4F2; width:520px;} #ForgottenPassword_Form div{width:520px; overflow:hidden; _zoom:1; clear:both; border-bottom:1px solid #D3E4F2; padding:5px;} #ForgottenPassword_Form div label,#ForgottenPassword_Form div input#nickname,#ForgottenPassword_Form div input#email{float:left; display:inline;} #ForgottenPassword_Form div label{width:160px; text-align:right; margin-right:10px;} #ForgottenPassword_Form div input#submit{margin-left:120px; cursor:pointer; border:none; text-indent:-9999px; background:url(http://www.5imoban.net/download/png/send_button_bg.png); width:223px; height:46px;} #ForgottenPassword_Form div input#submit:hover{background-image:url(http://www.5imoban.net/download/png/send_button_hover_bg.png);} #ForgottenPassword_Form input.wronginput{background:#FFCEC7;} #ForgottenPassword_link{margin:10px auto 15px 100px !important;} #ForgottenPassword_link li{margin-top:5px !important;} #ForgottenPassword_link li a{text-decoration:underline; color:#EB8600;} #ForgottenPassword_link li a:hover{text-decoration:none;} </style> <div id="ForgottenPassword"> <div id="ForgottenPassword_Wrong"> <h3>The following error(s) were found!</h3> <ul> </ul> </div> <p> Have you forgotten your password? Not a problem! Simply enter your player name and e-mail address in the fields below and we will send you a link. Simply click on the link and you will be able to set a new password. </p> <form action="#" name=""> <div id="ForgottenPassword_Form"> <div><label for="nickname">Nickname</label><input style="border:1px solid #AAA;" type="text" id="nickname" name="nickname" /></div> <div><label for="email">E-mail</label><input style="border:1px solid #AAA;" type="text" id="email" name="email" /></div> <div><input type="submit" id="submit" /></div> </div> </form> <ul id="ForgottenPassword_link"> <li><a href="###">To login</a></li> <li><a href="###">New here? Register now!</a></li> </ul> </div> <script> $(function(){ $("#submit").click(function(){ function isEmail(str){ var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/; return reg.test(str); } if($("#nickname").val() == ""){ $("#nickname").addClass("wronginput"); $("#ForgottenPassword_Wrong").show().children("ul").html("").append("<li>Please enter your player name.</li>"); return false; }else if($("#email").val() == ""){ $("#email").addClass("wronginput"); $("#ForgottenPassword_Wrong").show().children("ul").html("").append("<li>Please enter your player E-mail.</li>"); return false; }else if(!isEmail($("#email").val())){ $("#email").addClass("wronginput"); $("#ForgottenPassword_Wrong").show().children("ul").html("").append("<li>The e-mail address you have entered does not exist!</li>"); return false; } }) }) </script> </body> </html>
提示：您可以先修改部分代码再运行

注：函数“isEmail()”为验证邮箱格式的正则表达式。