高质量的jQuery表单验证插件 A Jquery Inline Form Validation

jQuery.validationEngine v2.0 ===== Summary --- **jQuery validation** engine is a Javascript plugin aiming the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visual appealing prompts that grab user attention on the subject matter. Validations range from email, phone, url to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated in the language of your choice. Forum Support: http://validationengine.vanillaforums.com/  **Important**: v2 is a significant rewrite of the original 1.7 branch. Please read the documentation as the API has changed! Demo : --- [http://www.position-relative.net/creation/formValidator/](http://www.position-relative.net/creation/formValidator/) Installation --- ### What's in the archive? The archive holds of course the core library along with translations in different languages. It also comes with a set of demo pages and a simple ajax server (built in Java). 1. Unpack the archive 2. Include the script jquery.validationEngine.closure.js in your page 3. Pick the locale of the choice, include it in your page: jquery.validationEngine-XX.js 4. **Read this manual** and understand the API ### Running the Demos Most demos are functional by opening their respective HTML file. However, the Ajax demos require the use of Java6 to launch a lightweight http server. 1. Run the script `runDemo.bat` (Windows) or `runDemo.sh` (Unix) from the folder 2. Open a browser pointing at [http://localhost:9173](http://localhost:9173) Usage --- ### References First link jQuery to the page <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script> Attach *jquery.validationEngine* and its locale <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> Finally link the desired theme <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/> ### Field validations Validations are defined using the field's **class** attribute. Here are a few examples showing how it happens: <input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" /> <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" /> For more details about validators, please refer to the section below. ### Instantiation The validator is typically instantiated by using a call of the following forms: $("#form.id").validationEngine(); Without any parameters, the init() and attach() methods are automatically called. $("#form.id").validationEngine(action or options); The method may take one or several parameters, either an action (and parameters) or a list of options to customize the behavior of the engine. Here comes a glimpse: say you have a form as such: <form id="formID" method="post" action="submit.action"> <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" /> </form> The code below will instance the validation engine and attach it to the form: <script> $(document).ready(function(){ $("#formID").validationEngine(); }); </script> But using options it will only initialize by default, attachment needs to be done manually. <script> $(document).ready(function(){ $("#formID").validationEngine('attach', {promptPosition : "centerRight", scroll: false}); }); </script> Actions --- ### init Initializes the engine with default settings $("#formID1").validationEngine({promptPosition : "centerRight", scroll: false}); $("#formID1").validationEngine('init', {promptPosition : "centerRight", scroll: false}); ### attach Attaches jQuery.validationEngine to form.submit and field.blur events. $("#formID1").validationEngine('attach'); ### detach Unregisters any bindings that may point to jQuery.validaitonEngine. $("#formID1").validationEngine('detach'); ### validate Validates the form and displays prompts accordingly. Returns *true* if the form validates, *false* if it contains errors. Note that if you use an ajax form validator, the actual result will be delivered asynchronously to the function *options.onAjaxFormComplete*. alert( $("#formID1").validationEngine('validate') ); ### validate one field Validates one field and displays the prompt accordingly. Returns *false* if the input validates, *true* if it contains errors. alert( $("#formID1").validationEngine('validateField', "#emailInput") ); ### showPrompt (promptText, type, promptPosition, showArrow) Displays a prompt on a given element. Note that the prompt can be displayed on any element an id. The method takes four parameters: 1. the text of the prompt itself 2. a type which defines the visual look of the prompt: 'pass' (green), 'load' (black) anything else (red) 3. an optional position: either "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to *"topRight"* 4. an optional boolean which tells if the prompt should display a directional arrow <fieldset> <legend id="legendid">Email</legend> <a href="#" onclick="$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')">Show prompt</a> </fieldset> ### hidePrompt Closes the prompt linked to the input. $('#inputID').validationEngine('hidePrompt');\ ### hide Closes error prompts in the current form (in case you have more than one form on the page) $('#formID1').validationEngine('hide')">Hide prompts ### hideAll Closes **all** error prompts on the page. $('#formID1').validationEngine('hideAll'); Options --- Options are typically passed to the init action as a parameter. $("#formID1").validationEngine({promptPosition : "centerRight", scroll: false}); ### validationEventTrigger Name of the event triggering field validation, defaults to *blur*. ### scroll Tells if we should scroll the page to the first error, defaults to *true*. ### promptPosition Where should the prompt show ? Possible values are "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to *"topRight"*. ### ajaxFormValidation If set to true, turns Ajax form validation logic on. defaults to *false*. form validation takes place when the validate() action is called or when the form is submitted. ### ajaxFormValidationURL If set, the ajax submit validation will use this url instead of the form action ### onBeforeAjaxFormValidation(form, options) When ajaxFormValidation is turned on, function called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation ### onAjaxFormComplete: function(form, status, errors, options) When ajaxFormValidation is turned on, function is used to asynchronously process the result of the validation. ### isOverflown Set to true when the form shows in a scrolling div, defaults to *false*. ### overflownDIV Selector used to pick the overflown container, defaults to *""*. ### onValidationComplete Stop the form from submitting, and let you handle it after it validated via a function jQuery("#formID2").validationEngine('attach', { onValidationComplete: function(form, status){ alert("The form status is: " +status+", it will never submit"); } }) ### bindMethod (defaut: bind) By default the engine bind the form and the field with bind. If you need a persistant you can also use 'live' Validators --- Validators are encod