jQuery.validationEngine v2.5.2
=====
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.
### Nicer documention: http://posabsolute.github.com/jQuery-Validation-Engine/
![Screenshot](https://github.com/posabsolute/jQuery-Validation-Engine/raw/master/css/screenshot.png)
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 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 attribut 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" />
### 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" />
```
### 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"});
```
Actions
---
### attach
Attaches jQuery.validationEngine to form.submit and field.blur events.
```js
$("#formID1").validationEngine('attach');
```
### detach
Unregisters any bindings that may point to jQuery.validaitonEngine.
```js
$("#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*.
```js
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.
```js
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 by providing 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 indicates if the prompt should display a directional arrow
```html
<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.
```js
$('#inputID').validationEngine('hidePrompt');
```
### hide
Closes error prompts in the current form (in case you have more than one form on the page).
```js
$('#formID1').validationEngine('hide');
```
### hideAll
Closes **all** error prompts on the page.
```js
$('#formID1').validationEngine('hideAll');
```
### updatePromptsPosition
Update the form prompts positions.
```js
$("#formID").validationEngine("updatePromptsPosition")
```
Options
---
Options are ty
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
jquery from validate(弹出形式)(资料和源码).rar (67个子文件)
jquery from validate(弹出形式)(资料和源码)
jQuery_formValidator表单验证插件.docx 54KB
jQuery.validate.js+API中文.pdf 184KB
formValidator.2.5.2
css
validationEngine.jquery.css 3KB
template.css 1KB
screenshot.png 35KB
demos
demoAdjustments.html 2KB
demoAjaxJAVA.html 4KB
demoLiveEvent.html 4KB
demoValidators.html 10KB
demoCheckBox.html 3KB
demoAttr.html 3KB
demoMultipleForms.html 7KB
demoRegExp.html 5KB
demoGlobalSettings.html 3KB
demoDatepicker.html 2KB
demoAjaxSubmitPHP.html 3KB
demoPositioning.html 5KB
demoPerFieldPromptDirection.html 2KB
demoFieldTypes.html 4KB
demoOverflown.html 5KB
demoAjaxInlinePHP.html 3KB
phpajax
ajaxValidateSubmit.php 940B
ajaxValidateFieldUser.php 604B
ajaxValidateFieldName.php 603B
demoValidators.ja.html 6KB
demoHooks.html 3KB
demoShowPrompt.html 2KB
demoAutoHide.html 4KB
demoValidationComplete.html 2KB
test
NanoHTTPD$Response.class 5KB
NanoHTTPD$HTTPSession.class 6KB
NanoHTTPD.class 7KB
AjaxTestServer$AjaxValidationFormResponse.class 5KB
AjaxTestServer.class 8KB
NanoHTTPD.java 21KB
AjaxTestServer$AjaxValidationFieldResponse.class 5KB
AjaxTestServer.java 6KB
runDemo.sh 59B
index.html 2KB
js
languages
jquery.validationEngine-fr.js 7KB
jquery.validationEngine-de.js 8KB
jquery.validationEngine-cz.js 9KB
jquery.validationEngine-ru.js 8KB
jquery.validationEngine-en.js 10KB
jquery.validationEngine-pt_BR.js 7KB
jquery.validationEngine-tr.js 9KB
jquery.validationEngine-et.js 6KB
jquery.validationEngine-es.js 8KB
jquery.validationEngine-ro.js 11KB
jquery.validationEngine-sv.js 8KB
jquery.validationEngine-fa.js 11KB
jquery.validationEngine-zh_CN.js 11KB
jquery.validationEngine-fi.js 6KB
jquery.validationEngine-zh_TW.js 11KB
jquery.validationEngine-hr.js 10KB
jquery.validationEngine-it.js 7KB
jquery.validationEngine-hu.js 11KB
jquery.validationEngine-ja.js 8KB
jquery.validationEngine-pt.js 7KB
jquery.validationEngine-nl.js 7KB
jquery.validationEngine-pl.js 8KB
jquery.validationEngine-da.js 8KB
jquery-1.6.min.js 90KB
jquery.validationEngine.js 56KB
contrib
other-validations.js 968B
README.md 27KB
runDemo.bat 61B
共 67 条
- 1
资源评论
- ZXQ31239272014-05-12ASP+Access数据库操作
- zhengxi19882012-08-13不大好用啊!!
- czp_10302014-09-09不是很好用哦哦
honghuajun
- 粉丝: 29
- 资源: 10
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功