本文主要是介绍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).
- 解压存档
- 引入jquery， jquery.validationEngine.closure.js
- 选择你需要的语言版本的包: jquery.validationEngine-XX.js
- 阅读说明 理解api
运行demo
大多数的demo都可以通过简单的打开一个html文件运行，但是ajax的demo需要一个java6的http服务器去运行。
- 从文件夹里运行脚本
runDemo.bat(Windows) 或runDemo.sh(Unix) - 打开浏览器到 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"});
这篇关于jQuery-Validation-Engine插件的使用（1）【译】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
