菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title> <link rel="stylesheet" href="/public/jquery/jquery-validation-1.14.0/demo/milk/milk.css"> <!--[if gte IE 9]><!--><script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script><!--<![endif]--><!--[if lt IE 9]><script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script><script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> <script src="/public/jquery/jquery-validation-1.14.0/lib/jquery.mockjax.js"></script> <script src="/public/jquery/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="/public/jquery/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script> $(document).ready(function() { $.mockjax({ url:"emails.action", response:function(settings) { var email = settings.data.email, emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"]; this.responseText = "true"; if ($.inArray(email, emails) !== -1) { this.responseText = "false"; } }, responseTime:500 }); $.mockjax({ url:"users.action", response:function(settings) { var user = settings.data.username, users = ["asdf", "Peter", "Peter2", "George"]; this.responseText = "true"; if ($.inArray(user, users) !== -1) { this.responseText = "false"; } }, responseTime:500 }); // validate signup form on keyup and submit var validator = $("#signupform").validate({ rules:{ firstname:"required", lastname:"required", username:{ required:true, minlength:2, remote:"users.action" }, password:{ required:true, minlength:5 }, password_confirm:{ required:true, minlength:5, equalTo:"#password" }, email:{ required:true, email:true, remote:"emails.action" }, dateformat:"required", terms:"required" }, messages:{ firstname:"Enter your firstname", lastname:"Enter your lastname", username:{ required:"Enter a username", minlength:jQuery.validator.format("Enter at least {0} characters"), remote:jQuery.validator.format("{0} is already in use") }, password:{ required:"Provide a password", minlength:jQuery.validator.format("Enter at least {0} characters") }, password_confirm:{ required:"Repeat your password", minlength:jQuery.validator.format("Enter at least {0} characters"), equalTo:"Enter the same password as above" }, email:{ required:"Please enter a valid email address", minlength:"Please enter a valid email address", remote:jQuery.validator.format("{0} is already in use") }, dateformat:"Choose your preferred dateformat", terms:" " }, // the errorPlacement has to take the table layout into account errorPlacement:function(error, element) { if (element.is(":radio")) error.appendTo(element.parent().next().next()); else if (element.is(":checkbox")) error.appendTo(element.next()); else error.appendTo(element.parent().next()); }, // specifying a submitHandler prevents the default submit, good for the demo submitHandler:function() { alert("submitted!"); }, // set this class to error-labels to indicate valid fields success:function(label) { // set as text for IE label.html(" ").addClass("checked"); }, highlight:function(element, errorClass) { $(element).parent().next().find("." + errorClass).removeClass("checked"); } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if (firstname && lastname && !this.value) { this.value = (firstname + "." + lastname).toLowerCase(); } }); }); </script> </head> <body> <h1 id="banner"><a href="http://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1> <div id="main"> <div id="content"> <div id="header"> <div id="headerlogo"> <img src="/try/jquery/plugins/images/milk.png" alt="Remember The Milk"> </div> </div> <div style="clear:both;"> <div></div> </div> <div class="content"> <div id="signupbox"> <div id="signuptab"> <ul> <li id="signupcurrent"><a href=" ">Signup</a> </li> </ul> </div> <div id="signupwrap"> <form id="signupform" autocomplete="off" method="get" action="/try/try.php"> <table> <tr> <td class="label"> <label id="lfirstname" for="firstname">First Name</label> </td> <td class="field"> <input id="firstname" name="firstname" type="text" value="" maxlength="100"> </td> <td class="status"></td> </tr> <tr> <td class="label"> <label id="llastname" for="lastname">Last Name</label> </td> <td class="field"> <input id="lastname" name="lastname" type="text" value="" maxlength="100"> </td> <td class="status"></td> </tr> <tr> <td class="label"> <label id="lusername" for="username">Username</label> </td> <td class="field"> <input id="username" name="username" type="text" value="" maxlength="50"> </td> <td class="status"></td> </tr> <tr> <td class="label"> <label id="lpassword" for="password">Password</label> </td> <td class="field"> <input id="password" name="password" type="password" maxlength="50" value=""> </td> <td class="status"></td> </tr> <tr> <td class="label"> <label id="lpassword_confirm" for="password_confirm">Confirm Password</label> </td> <td class="field"> <input id="password_confirm" name="password_confirm" type="password" maxlength="50" value=""> </td> <td class="status"></td> </tr> <tr> <td class="label"> <label id="lemail" for="email">Email Address</label> </td> <td class="field"> <input id="email" name="email" type="text" value="" maxlength="150"> </td> <td class="status"></td> </tr> <tr> <td class="label"> <label>Which Looks Right</label> </td> <td class="field" colspan="2" style="vertical-align:top; padding-top:2px;"> <table> <tbody> <tr> <td style="padding-right:5px;"> <input id="dateformat_eu" name="dateformat" type="radio" value="0"> <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label> </td> <td style="padding-left:5px;"> <input id="dateformat_am" name="dateformat" type="radio" value="1"> <label id="ldateformat_am" for="dateformat_am">02/14/07</label> </td> <td> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="label"> </td> <td class="field" colspan="2"> <div id="termswrap"> <input id="terms" type="checkbox" name="terms"> <label id="lterms" for="terms">I have read and accept the Terms of Use.</label> </div> <!-- /termswrap --> </td> </tr> <tr> <td class="label"> <label id="lsignupsubmit" for="signupsubmit">Signup</label> </td> <td class="field" colspan="2"> <input id="signupsubmit" name="signup" type="submit" value="Signup"> </td> </tr> </table> </form> </div> </div> </div> </div> </div> </body> </html>
运行结果