1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns=" http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 5 <title>jQuery validation plug-in - main demo</title> 6 7 <script src="../lib/jquery.js" type="text/javascript"></script> 8 <script src="../jquery.validate.js" type="text/javascript"></script> 9 <script src="js/cmxforms.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 $("#signupForm").validate({ 13 rules: { 14 firstname: "required", 15 lastname: "required", 16 username: { 17 required: true, 18 minlength: 2 19 }, 20 password: { 21 required: true, 22 minlength: 5 23 }, 24 confirm_password: { 25 required: true, 26 minlength: 5, 27 equalTo: "#password" 28 }, 29 email: { 30 required: true, 31 email: true 32 }, 33 topic: { 34 required: "#newsletter:checked", 35 minlength: 2 36 }, 37 agree: "required" 38 }, 39 messages: { 40 firstname: "Please enter your firstname", 41 lastname: "Please enter your lastname", 42 username: { 43 required: "Please enter a username", 44 minlength: "Your username must consist of at least 2 characters" 45 }, 46 password: { 47 required: "Please provide a password", 48 minlength: "Your password must be at least 5 characters long" 49 }, 50 confirm_password: { 51 required: "Please provide a password", 52 minlength: "Your password must be at least 5 characters long", 53 equalTo: "Please enter the same password as above" 54 }, 55 email: "Please enter a valid email address", 56 agree: "Please accept our policy" 57 } 58 }); 59 }); 60 </script> 61 </head> 62 <body> 63 <div id="main"> 64 65 <form class="cmxform" id="signupForm" method="get" action=""> 66 <fieldset> 67 <legend>Validating a complete form</legend> 68 <p> 69 <label for="firstname">Firstname</label> 70 <input id="firstname" name="firstname" /> 71 </p> 72 <p> 73 <label for="lastname">Lastname</label> 74 <input id="lastname" name="lastname" /> 75 </p> 76 <p> 77 <label for="username">Username</label> 78 <input id="username" name="username" /> 79 </p> 80 <p> 81 <label for="password">Password</label> 82 <input id="password" name="password" type="password" /> 83 </p> 84 <p> 85 <label for="confirm_password">Confirm password</label> 86 <input id="confirm_password" name="confirm_password" type="password" /> 87 </p> 88 <p> 89 <label for="email">Email</label> 90 <input id="email" name="email" /> 91 </p> 92 <p> 93 <label for="agree">Please agree to our policy</label> 94 <input type="checkbox" id="agree" name="agree" /> 95 </p> 96 <p> 97 <label for="newsletter">I'd like to receive the newsletter</label> 98 <input type="checkbox" id="newsletter" name="newsletter" /> 99 </p> 100 <fieldset id="newsletter_topics"> 101 <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> 102 <label for="topic_marketflash"> 103 <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> 104 Marketflash 105 </label> 106 <label for="topic_fuzz"> 107 <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> 108 Latest fuzz 109 </label> 110 <label for="topic_digester"> 111 <input type="checkbox" id="topic_digester" value="digester" name="topic" /> 112 Mailing list digester 113 </label> 114 <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> 115 </fieldset> 116 <p> 117 <input class="submit" type="submit" value="Submit"/> 118 </p> 119 </fieldset> 120 </form> 121 </div> 122 </body> 123 </html>
jQuery验证控件jquery.validate.js
官网下载地址： http://bassistance.de/jquery-plugins/jquery-plugin-validation
jQuery plugin: Validation 使用说明