validationEngine中文版 — jquery强大的表单验证插件

普通验证的例子：http://www.position-relative.net/creation/formValidator/

ajax验证的例子：http://www.position-relative.net/creation/formValidator/demoSubmit.html

点此下载

感谢热心的小杰童鞋，这个中文版是由小杰童鞋童鞋翻译的，同时根据中国国情修改了部分验证规则。

这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。

简单说明下使用教程：

引入jquery和插件js、css

1. <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> 
2. <script src="js/jquery.js" type="text/javascript"></script> 
3. <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script> 
4. <script src="js/jquery.validationEngine.js" type="text/javascript"></script>

jquery.validationEngine-en.js是语言文件，所有的提示都在这个文件找的到，可以很方便的转成其他语言，同时你也可以在这个文件内定制属于自己的验证规则。

初始化插件

1. $(document).ready(function() { 
2. $("#formID").validationEngine() 
3. })

验证规则是写在表单元素的class属性内。比如下面：

1. <input value="" class="validate[required,custom[noSpecialCaracters],length[0,20],ajax[ajaxUser]]" type="text" name="user" id="user" />

验证规则非常多样，基本上包含了所有的数据类型的验证。
所有的验证规则写在validate[]内，有多种验证，用逗号隔开，这里简要说明下常用的验证规则。

1. required：值不可以为空
2. length[0,100] ：文字允许长度
3. confirm[fieldID] ：匹配其他的表单元素的值，fieldID就是其他表单元素的id，这个主要用于再次确认密码
4. telephone ：数据格式要求符合电话格式
5. email ： 数据格式要求符合email 格式
6. onlyNumber ：只允许输入数字
7. noSpecialCaracters ：不允许出现特殊字符
8. onlyLetter ： 只能是字母
9. date ：必须符合日期格式YYYY-MM-DD

你还可以在点击提交按钮后才触发验证。

1. $("#formID").validationEngine({ 
2. inlineValidation: false,
3. success :  false,
4. failure : function() { callFailFunction()  } 
5. })

默认的是在鼠标失去焦点后才开始验证，也就是绑定的是blur事件，那如何改变呢？看下面的配置。

1. $("#formID").validationEngine({ 
2. validationEventTriggers:"keyup blur",  //will validate on keyup and blur  
3. success :  false,
4. failure : function() { callFailFunction()  } 
5. })

validationEventTriggers属性就是修改绑定事件，上面是增加了个keyup，也就是键盘按键起来就触发验证。

修改提示层的位置

1. $("#formID").validationEngine({ 
2. promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft,  centerRight, bottomRight
3. success :  false,
4. failure : function() { 
5. })

promptPosition就是控制位置，有5种模式：topLeft, topRight, bottomLeft, centerRight, bottomRight

ajax验证模式

1. $("#formID").validationEngine({ 
2.  ajaxSubmit: true,
3.   ajaxSubmitFile: "ajaxSubmit.php",
4.   ajaxSubmitMessage: "Thank you, we received your inscription!",
5.  ajaxSubmitExtraData: "securityCode=38709238423&name=john",
6.  success :  false,
7.  failure : function() {} 
8. })

这几个参数很好理解。

1. ajaxSubmit: true, 提交表单使用ajax提交
2. ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本
3. ajaxSubmitMessage 成功后显示的信息
4. ajaxSubmitExtraData 参数

这里需要对后台脚本返回的数据进行下说明：
返回的数据格式是json。
出现一个错误，产生一个数组，如下：

1. $arrayError[0][0] = "#email";            // FIELDID
2. $arrayError[0][1] = "Your email do not match.. whatever it need to match";     // TEXT ERROR   
3. $arrayError[0][2] = "error";            // BOX COLOR