jQuery-Validation-Engine插件的使用（1）【译】

github上的地址https://github.com/posabsolute/jQuery-Validation-Engine

简要

jQuery validation engine是一个致力于解决在各浏览器下实现表单验证的javascript插件(IE 6-8, Chrome, Firefox, Safari, Opera 10). 插件提供了视觉提示,吸引用户关注。

Validations 插件的适用范围从 email, phone, URL到更复杂的如ajax过程或常规的javascript函数，捆绑在许多地方，错误提示可以翻译成你所选择的语言。

Documentation :

Nicer documention

Release Notes

Demo :

http://www.position-relative.net/creation/formValidator/

安装

存档里有什么?

存档里当然包括核心库，和翻译成的各种语言版。它也包括一系列的demo包和一个简单的ajax服务实例(built in Java and php).

1. 解压存档
2. 引入jquery， jquery.validationEngine.closure.js
3. 选择你需要的语言版本的包: jquery.validationEngine-XX.js
4. 阅读说明 理解api

运行demo

大多数的demo都可以通过简单的打开一个html文件运行，但是ajax的demo需要一个java6的http服务器去运行。

1. 从文件夹里运行脚本 runDemo.bat (Windows) 或 runDemo.sh (Unix)
2. 打开浏览器到 http://localhost:9173

运用

参考

第一步，在页面引入jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/
javascript"></script>

然后引入 jquery.validationEngine和 它的本地语言包

<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>

最后引入目标主题

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

验证域

Validations通过在class属性中定义来起作用。这里有一些例子来演示它怎么来做的。

<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" />

有关验证的更多细节，请参考下面的部分。

验证性属性 data-validation-engine

我们当前在用一些更新标准替换class属性，在bete版中这个特性被考虑并起作用。

标准HTML5属性的错误信息

用data-errormessage和data-errormessage-* 属性在表单元素中定制错误信息。

<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."/>

运用下列属性规则的值将被加载。

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一个通用的错误信息

每一个表单域提示的显示方向

提示的方向是可以通过用data属性来定义的。

<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" />

提示位置的调整

提示位置可以通过表单域的data属性提供的shiftX和shiftY来调整。提示条的出现位置将被替换为(defaultX+shiftX),(defaultY+shiftY)

<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" />

实例化

验证程序通常使用以下格式的呼叫：

$("#form.id").validationEngine();

没有任何参数的方法，init()和attach()自动调用。

$("#form.id").validationEngine(action or options);

可能需要一个或几个参数的方法,一个动作(参数)或列表的选项来定制行为引擎。

<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>

下面的代码将实例化验证引擎,绑定表单

<script>
$(document).ready(function(){
    $("#formID").validationEngine();
   });
</script>

当使用选项，默认行为是只初始化validationengine附件，所以需要人工完成。

<script>
$(document).ready(function(){
    $("#formID").validationEngine('attach', {promptPosition : "centerRight", scroll: false});
   });
</script>

所有的电话都validationengine()可链式操作的，所以可以如下：

$("#formID").validationEngine().css({border : "2px solid #000"});