jquery plugin easyvalidate
my jquery plugin easyvalidate1. short enough
2. easy to use
/* jquery.easyvalidate.js v1.1 Bob Zhu */$.extend({easyvalidate:{checkError:function(dom){if(dom.find(".error").length==0){$(".form_tip").css("visibility","hidden").html(" ");return true}return false},addError:function(dom){dom.addClass('error');$(".form_tip").css("visibility","visible").html("Please correct the errors below.")},deleteError:function(dom){dom.removeClass('error')}}});(function($){$.fn.easyvalidate=function(options){$.fn.easyvalidate.defaults={Name:/^\D{2,15}$/,Phone:/^[\d -]{8,12}$/,Email:/^()+\@()+(\.{2,3})+$/,Time:/^{1}\d{1}:\d{2}$/,Date:/^\d{2}-\d{2}-\d{4}/};var options=$.extend($.fn.easyvalidate.defaults,options),t=$(this),c=false;function validate(v,d){c=!v.reg?false:!options.test(d.val());if(v.required){c=!d.val()||c}else{c=d.val()&&c}if(c){$.easyvalidate.addError(d)}else{$.easyvalidate.deleteError(d);$.easyvalidate.checkError(t)}}return this.each(function(){$.each(options.config,function(i,v){$(i).blur(function(){validate(v,$(this))})});$(this).submit(function(){$.each(options.config,function(i,v){validate(v,$(i))});if(!$.easyvalidate.checkError(t)){return false}else{$("#submit").val("Processing...").attr('disabled','disabled')}})})}})(jQuery);
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Reservations</title><style type="text/css">label {display:inline-block;margin-right:10px;width:220px;text-align:right;color:#cc071e;vertical-align:top;line-height:16px;}.submit {color:#cc071e;margin-left:230px;}.form_tip {color:#cc071e;font-weight:bold;margin-left:174px;padding-left:26px;background:#fff url('../images/error.png') no-repeat 2px 1px;visibility:hidden;}.error {border:2px solid #cc071e;}.validate span {font-size:11px;color:#999;}</style></head><body><h1>Reservations</h1><p>Please submit your Reservation Request via our online form. Alternatively, please phone us on xxx.</p><p class="form_tip">&nbsp;</p><form action="mail.php" method="post" class="validate"> <fieldset> <p> <label for="date">Date / Time *</label><input type="text" name="date" id="date" /> / <input type="text" name="time" id="time" /></p> <p> <label for="number">Number of People *</label><input type="text" name="number" id="number" /> <span>(e.g. 4)</span></p> <p> <label for="name">Name *</label><input type="text" name="name" id="name" /> <span>(e.g. Tony)</span></p> <p> <label for="phone">Phone Number *</label><input type="text" name="phone" id="phone" /> <span>(e.g. 0458 798754)</span></p> <p> <label for="email" id="label_email">Email Address</label><input type="text" name="email" id="email" /></p> <p> <label for="made" class="fs11">Preferred contact method<br />if Reservation made</label><input type="radio" name="made" id="made_phone" checked="checked" value="Phone" />Phone<input type="radio" name="made" id="made_email" value="Email" />Email</p> <p> <label for="not_made" class="fs11">Preferred contact method if Reservation<br /><strong>NOT</strong> available at requested Date / Time</label><input type="radio" name="not_made" id="not_made_phone" checked="checked" value="Phone" />Phone<input type="radio" name="not_made" id="not_made_email" value="Email" />Email</p> <p> <label for="info">Further Infomation</label><textarea name="info" id="info" rows="5" cols="40"></textarea></p><p><input type="submit" value="Submit" id="submit" class="submit" /></p></fieldset></form><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script type="text/javascript">/* <!{8,12}$/,Email:/^()+\@()+(\.{2,3})+$/,Time:/^{1}\d{1}:\d{2}$/,Date:/^\d{2}-\d{2}-\d{4}/};var options=$.extend($.fn.easyvalidate.defaults,options),t=$(this),c=false;function validate(v,d){c=!v.reg?false:!options.test(d.val());if(v.required){c=!d.val()||c}else{c=d.val()&&c}if(c){$.easyvalidate.addError(d)}else{$.easyvalidate.deleteError(d);$.easyvalidate.checkError(t)}}return this.each(function(){$.each(options.config,function(i,v){$(i).blur(function(){validate(v,$(this))})});$(this).submit(function(){$.each(options.config,function(i,v){validate(v,$(i))});if(!$.easyvalidate.checkError(t)){return false}else{$("#submit").val("Processing...").attr('disabled','disabled')}})})}})(jQuery);$(function(){$(".validate").easyvalidate({// date is required and like 11-06-2011 as default, whose reg was rewrite below like 11-06-11 as Date: /^\d{2}-\d{2}-\d{2}$/config: {"#date":{required: true,reg: "Date"// time is required and like 11:30 as default},"#time":{required: true,reg: "Time"// numver is required and reg was defined below like 4, 12 or 3-4 as number: /^\d{1,2}(-\d{1,2})?$/},"#number":{required: true,reg: "number"// name is required and like tony as default},"#name":{required: true,reg: "Name"// phone is required and like 0458 798754 as default},"#phone":{required: true,reg: "Phone"// phone is NOT required and like xxx@xxx.com as default},"#email":{reg: "Email"}},// define reg numbernumber: /^\d{1,2}(-\d{1,2})?$/,// rewrite default reg DateDate: /^\d{2}-\d{2}-\d{2}$/});// if at least one of the answer is email, then email should become required$("input,input").click(function(){var email = $("#email");if (email.val()=="") {if ($(this).filter(":checked").val() == "Email") {// change email as required$.fn.easyvalidate.defaults.config["#email"].required = true;// add error style$.easyvalidate.addError(email);$("#label_email").html("Email Address *");} else if ($("input:checked").val()!="Email" && $("input:checked").val()!="Email") {// change email back as not required$.fn.easyvalidate.defaults.config["#email"].required = false;// clear error style$.easyvalidate.deleteError(email);// check if clear the error tips$.easyvalidate.checkError($(".validate"));$("#label_email").html("Email Address");}}});})/* ]]> */</script></body></html>
页:
[1]