jQuery Validation Engine （ jQuery 表单验证插件）

jQuery.validationEngine v2.6.1 ===== Summary --- **jQuery validation** engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter. Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.  Documentation : --- ###[Nicer documention](http://posabsolute.github.com/jQuery-Validation-Engine/) ###[Release Notes](http://posabsolute.github.com/jQuery-Validation-Engine/releases.html) Demo : --- ### 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 and php). 1. Unpack the archive 2. Include the script jquery.validationEngine.closure.js in your page 3. Pick the locale of the choice and include it in your page: jquery.validationEngine-XX.js 4. **Read this manual** and understand the API ### Running the Demos Most demos are fully functional by simply 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 and point it at [http://localhost:9173](http://localhost:9173) Usage --- ### References First include jQuery on your page ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/ javascript"></script> ``` Include *jquery.validationEngine* and its locale ```html <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 include the desired theme ```html <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: ```html <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. #### Experimental attribute data-validation-engine We are currently in the process of replaceing the class attribute by something more standard, it should normally work but consider this feature in beta. <input value="someone@nowhere.com" data-validation-engine="validate[required,custom[email]]" type="text" name="email" id="email" /> #### Standard HTML5 attribute for error message Customize error messages with data-errormessage and data-errormessage-* attributes on the form elements. For example: ```html <input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" data-errormessage-value-missing="Email is required!" data-errormessage-custom-error="Let me give you a hint: someone@nowhere.com" data-errormessage="This is the fall-back error message."/> ``` The following attribute's value will be loaded for the relative validation rule: ##### data-errormessage-value-missing * required * groupRequired * condRequired ##### data-errormessage-type-mismatch * past * future * dateRange * dateTimeRange ##### data-errormessage-pattern-mismatch * creditCard * equals ##### data-errormessage-range-underflow * minSize * min * minCheckbox ##### data-errormessage-range-overflow * maxSize * max * maxCheckbox ##### data-errormessage-custom-error * custom * ajax * funcCall ##### data-errormessage * a generic fall-back error message ### Per Field Prompt Direction Prompt direction can be define using the field's **data** attribute. Here are a few examples showing how it happens: ```html <input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" /> <input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" /> <input value="" class="validate[required] text-input" type="text" name="req-inline" id="req-inline" data-prompt-position="inline" /> ``` If "inline" is applied the prompt is attached after the corresponding input field with position set to "relative". You can specify an optional target container to which the prompt should be attached by providing the id of this container in the field's **data-prompt-target** attribute. ### Prompt Position Adjustment Prompt position can be adjusted by providing shiftX and shiftY with position type in the field's **data** attribute. Prompt will be placed in (defaultX+shiftX),(defaultY+shiftY) position instead of default for selected position type. Here are a few examples showing how it happens: ```html <input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft:70" /> <input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft:20,5" /> <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight:-100,3" /> ``` ### Instantiation The validator is typically instantiated with a call in the following format, the plugin can only be instanciated on form elements: ```js $("#form.id").validationEngine(); ``` Without any parameters, the init() and attach() methods are automatically called. ```js $("#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's a glimpse: say you have a form as such: ```html <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 instantiate the validation engine and attach it to the form: ```html <script> $(document).ready(function(){ $("#formID").validationEngine(); }); </script> ``` When using options, the default behavior is to only initialize ValidationEngine, so attachment needs to be done manually. ```html <script> $(document).ready(function(){ $("#formID").validationEngine('attach', {promptPosition : "centerRight", scroll: false}); }); </script> ``` All calls to validationEngine() are chainable, so one can do the following: ```js $("#formID").validationEngine().css({border : "2px solid #000"}); ``` ### Suppress Validation Feature Hyperlink and Button ( <button> and input ) allow suppress the validation for special case such as multi fake submit buttons in web page. An id attribute for the HTML element is requried. Syntax (HTML5): ```html <input id="skipbutton" data-validation-engine-skip="true" type="submit" value="Refresh button"/> ``` Syntax (use class attribute): ```html <input id="skipbutton" class="submit validate-skip" type="button" value="Refresh button"/> ``` ### Using a DIV container instead of a FORM You can use a div acting as a container using the class *"validationEngineContaine