jQuery 表单验证插件
This project has now been going on for more than 7 years, right now I only maintain the project through pull request contributions. However, I would love to have help improving the code quality and maintain an acceptable level of open issues.
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.
Download
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).
First include jQuery on your page
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/
javascript"></script>
Include 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 include the desired theme
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
Validations are defined using the field's class attribute. Here are a few examples showing how it happens:
<input value="[email protected]" 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.
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.
Customize error messages with data-errormessage and data-errormessage-* attributes on the form elements. For example:
<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: [email protected]"
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-missingPrompt direction can be define using the field's data attribute. Here are a few examples showing how it happens:
<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" />
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:
<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" />
The validator is typically instantiated with a call in the following format, the plugin can only be instanciated on form elements:
$("#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's 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 instantiate the validation engine and attach it to the form:
<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.
<script>
$(document).ready(function(){
$("#formID").validationEngine('attach', {promptPosition : "centerRight", scroll: false});
});
</script>
All calls to validationEngine() are chainable, so one can do the following:
$("#formID").validationEngine().css({border : "2px solid #000"});
Attaches jQuery.validationEngine to form.submit and field.blur events.
$("#formID1").validationEngine('attach');
Unregisters any bindings that may point to jQuery.validaitonEngine.
$("#formID1").validationEngine('detach');
Validates a form or field, displays error prompts accordingly.
Returns true if the form validates, false if it contains errors.
For fields, it returns false on validate and true on errors.
When using form validation with ajax, it returns undefined , the result is delivered asynchronously via function options.onAjaxFormComplete.
// form validation
alert( $("#formID1").validationEngine('validate') );
// field validation
alert( $("#emailInput").validationEngine('validate') );
Displays a prompt on a given element. Note that the prompt can be displayed on any element by providing an id.
The method takes four parameters:
<fieldset>
<legend id="legendid">Email</legend>
<a href="#" onclick="$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')">Show prompt</a>
</fieldset>
The hide method can be applied to a form or a field.
It closes/hides error prompts.
// closes all form prompts
$('#formID1').validationEngine('hide');
// closes onle one prompt
$('#email1').validationEngine('hide');
Closes/hides all error prompts on the page no matter what form they are attached to.
$('#formID1').validationEngine('hideAll');
Update the form prompts positions.
$("#formID").validationEngine("updatePromptsPosition")
Deprecated and not part of the code base anymore.
Use hide and validate instead.
Options are typically passed to the init or attach action as a parameter.
$("#formID1").validationEngine({promptPosition : "centerRight", scroll: false});
$("#formID1").validationEngine('attach', {promptPosition : "centerRight", scroll: false});
Name of the event triggering field validation, defaults to blur.
Determines if we should scroll the page to the first error, defaults to true.
If set to false, it removes blur events and only validates on submit.
Where should the prompt show? Possible values are "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to "topRight". Default position adjustment could also be provided.
Only display the first incorrect validation message instead of normally stacking it. It will follows the validation hierarchy you used in the input and only show the first error.
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.
If set, the ajax submit validation will use this url instead of the form action
HTTP method used for ajax validation, defaults to 'get', can be set to 'post'
When ajaxFormValidation is turned on, this is the function that will be called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation
When ajaxFormValidation is turned on, this function is used to asynchronously process the result of the validation. the status is a boolean. If true, the ajax call completed and all the server side form validations passed.
When defined, it stops by default the form from auto-submitting, and lets you handle the validation status via a function. You can also return true in this function and the form will be allowed to submit.
jQuery("#formID2").validationEngine('attach', {
onValidationComplete: function(form, status){
alert("The form status is: " +status+", it will never submit");
}
});
This is where custom messages for IDs, Classes, or validation types are stored.
Custom error messages are exclusive from one another.ID messages will be displayed instead of anything else; Class messages will only be used if there is no ID message, and only the first message found associated with one of the classes will be used; Global Validator messages will only be used if there are no Class messages or ID messages.
These custom messages are declared in this manner:
…
Specifies whether or no
暂无开放 Issues，或尚未同步最近议题。