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

发布于，归属于jquery插件。 前24个座位已被强势霸占！ 共有9,638人围观    

普通验证的例子：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
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

24个座位已被强势霸占！

  1. 全日线

    这个站很漂亮。

    明河共影回复于 2010年03月15日 7:55

    谢谢

  2. night

    不能下载了啊,,,,悲剧

    明河共影回复于 2010年03月29日 2:43

    下载已经修正，谢谢提醒。

  3. 明河共影

    非常感谢niuyugui0702@163.com朋友的提醒，下载链接已经修正了。

    灵亦rEd回复于 2010年07月10日 3:14

    @明河共影, 额，你泄漏了别人的邮箱了，嘿嘿

    明河共影回复于 2010年07月10日 8:17

    ……..总比泄露真名好…….

  4. eeee

    使用了custom[]之后好像提交的时候都检查了，那不相当于变成了required了吗，有好的方法解决吗

  5. fictioner

    作者已经升级了，建议楼主更新下包包
    http://www.position-absolute.com/news/validation-engine-1-7-1-compatibility-release-and-why/

    明河共影回复于 2010年11月12日 6:04

    感谢提醒！你不说我还真的不知道，晚上更新下，谢谢。

  6. azan

    不好意思
    可否請問用此表單驗證功能
    有沒有辦法在所有欄位驗證通過後
    取得一個返回的值呢?
    我是想在驗證通過後再秀出使用者填的資料在一個彈出的新視窗中
    預覽無誤後再送出表單
    感謝

    明河共影回复于 2010年11月13日 2:41

    从理论上是可以的，但要求你监听插件的回调函数做一些处理。按照你的要求，你只是需要预览，是不需要返回值的。点击提交后，你只要判断验证通过后，先显示一个弹出层，然后在提交。这些步骤是需要你自己歇歇代码控制的。插件只管验证而已。

  7. list

    请问 我现在项目有多书签那种形式的表单，想把这个改成alert形式的提示 应该怎么修改 谢谢啊

  8. lijingdu

    我现在在用这个插件的时候遇见个问题。 还请楼主指导下，在from 里面有多个submit 时 怎么控制 哪些可以回发验证，那些不需要验证就回发， 我现在做的是添加删除修改查询在一个页面上，查询的时候不需要验证。很急。360525082@qq.com

  9. 欣蒂

    请问一下噢，在输入控件的class属性上设置验证模式，那不是不能对其设置样式了？因为class属性被“占用”了？

  10. 忘情水

    请问，我如果是在提交按钮处不用submit提交，我是用button 在我的按钮处我写了一个onclick 事件，在我的脚本里面我先走了一会我自己的脚本 然后在怎么使用你的校验，况且我只做校验 不提交form 如何写

  11. 忘情水

    本人非常着急 联系QQ 995680838 希望有人能帮助一下

  12. 忘情水

    呵呵 我搞定了 没看见啊 呵呵

    明河回复于 2011年04月25日 10:06

    …..不好意思，周末出游了，没看到留言。

    sunquest回复于 2011年05月16日 9:16

    @忘情水, 怎么搞定的啊.能分享一下么?

    忘情水回复于 2011年06月03日 3:48

    判断jQuery(“#myform”).validationEngine(‘validate’)，为true或者false 为true就是验证通过。可以提交。

  13. 忘情水

    动态添加行的 每增加一行 都必须要初始化一下验证，我的系统里面动态行添加了100行，结果提交的时候等待了10秒钟，才出现验证信息提示，很慢，大家的动态行添加的是怎么校验的啊。还有就是JavaAjax验证的我怎么用不了啊，请高手指点指点，谢谢！

  14. 忘情水

    请问 动态添加行的 每增加一行 都必须要初始化一下验证，我的系统里面动态行添加了100行，结果提交的时候等待了10秒钟，才出现验证信息提示，很慢，大家的动态行添加的是怎么校验的啊。还有就是JavaAjax验证的我怎么用不了啊，请高手指点指点，谢谢！

  15. king

    您好，下载不了啊。。。

同类