jquery-validate表单验证实例二
来源：互联网 发布：美颜摄像机软件 编辑：程序博客网 时间：2024/05/31 11:03
<!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>jQuery validation plug-in - main demo</title><script src="jquery.js" type="text/javascript"></script><script src="jquery.validate.js" type="text/javascript"></script><script type="text/javascript">$.validator.setDefaults({submitHandler: function() { alert("submitted!"); }});$().ready(function() {// validate signup form on keyup and submit$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},topic: {required: "#newsletter:checked",minlength: 2},agree: "required"},messages: {firstname: "Please enter your firstname",lastname: "Please enter your lastname",username: {required: "Please enter a username",minlength: "Your username must consist of at least 2 characters"},password: {required: "Please provide a password",minlength: "Your password must be at least 5 characters long"},confirm_password: {required: "Please provide a password",minlength: "Your password must be at least 5 characters long",equalTo: "Please enter the same password as above"},email: "Please enter a valid email address",agree: "Please accept our policy"}}); // 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;}});//code to hide topic selection, disable for demovar newsletter = $("#newsletter");// newsletter topics are optional, hide at firstvar inital = newsletter.is(":checked");var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");var topicInputs = topics.find("input").attr("disabled", !inital);// show when newsletter is checkednewsletter.click(function() {topics[this.checked ? "removeClass" : "addClass"]("gray");topicInputs.attr("disabled", !this.checked);});});</script><style type="text/css">#signupForm { width: 670px; }#signupForm label.error {margin-left: 10px;width: auto;display: inline;}#newsletter_topics label.error {display: none;margin-left: 103px;}</style></head><body><form class="cmxform" id="signupForm" method="get" action=""><fieldset><legend>Validating a complete form</legend><p><label for="firstname">Firstname</label><input id="firstname" name="firstname" /></p><p><label for="lastname">Lastname</label><input id="lastname" name="lastname" /></p><p><label for="username">Username</label><input id="username" name="username" /></p><p><label for="password">Password</label><input id="password" name="password" type="password" /></p><p><label for="confirm_password">Confirm password</label><input id="confirm_password" name="confirm_password" type="password" /></p><p><label for="email">Email</label><input id="email" name="email" type="email" /></p><p><label for="agree">Please agree to our policy</label><input type="checkbox" class="checkbox" id="agree" name="agree" /></p><p><label for="newsletter">I'd like to receive the newsletter</label><input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /></p><fieldset id="newsletter_topics"><legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend><label for="topic_marketflash"><input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />Marketflash</label><label for="topic_fuzz"><input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />Latest fuzz</label><label for="topic_digester"><input type="checkbox" id="topic_digester" value="digester" name="topic" />Mailing list digester</label><label for="topic" class="error">Please select at least two topics you'd like to receive.</label></fieldset><p><input class="submit" type="submit" value="Submit"/></p></fieldset></form></body></html>
