Validation-Engine—jquery表单验证插件详解

demo

（ps:RIA之家的全部demo，明河已经托管到github，如果要下载博客的全部demo，传送门在此：https://github.com/minghe/36ria-demo。）

已经把验证规则的提示内容翻译成中文了，请看validation-engine-2.2\js\languages\jquery.validationEngine-cn.js。关于时间有二处提示没找到地方，目前没做修改。明河的英文太菜，翻译难免词不达意，欢迎纠正，O(∩_∩)O哈！

如何处理ajax验证？

典型场景：如何使用Validation-Engine验证用户名或email的存在性？
这个需求在大部分的注册页面都会用到，那如何使用Validation-Engine进行ajax验证呢？
Validation-Engine的ajax验证有二种模式：

• Inline：表单元素即时验证，比如失去焦点后触发ajax验证请求
• Submit：整个表单的验证

inline验证

inline验证当表单字段的值发生改变时会触发相应的ajax事件，比如用户名的输入框失去焦点后。
想要使用ajax验证，需要你在语言规则文件上加上相应的ajax验证规则，打开validation-engine-2.2\js\languages\jquery.validationEngine-cn.js，找到如下代码：

1 "ajaxUserCallPhp": {
2                     "url": "phpajax/ajaxValidateFieldUser.php",
3                     // you may want to pass extra data on the ajax call
4                     "extraData": "name=eric",
5                     // if you provide an "alertTextOk", it will show as a green prompt when the field validates
6                     "alertTextOk": "* 恭喜你，此用户名可以使用",
7                     "alertText": "* 该用户名已经存在",
8                     "alertTextLoad": "* 正在验证中，请稍等..."
9                 }

上述是一套ajax的验证规则，url指向服务器端路径，alertText为验证提示，alertTextLoad为正在验证时显示的消息。alertTextOk即ajax验证成功时显示的消息。
然后你需要在表单字段上应用上这段规则。

1 <input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCallPhp]] text-input" type="text" name="user" id="user" />

留意这里的ajax[ajaxUserCallPhp] ，[]内部即时ajax的验证规则，是必须对应起来的。

Submit验证

直接ajax验证整个表单可以如下处理。

 

1 jQuery("#formID").validationEngine({
2 ajaxFormValidation: true,
3 onAjaxFormComplete: ajaxValidationCallback,
4 onBeforeAjaxFormValidation: beforeCall
5 });

• ajaxFormValidation：开启ajax表单验证
• onAjaxFormComplete：ajax验证结束后执行的回调函数
• onBeforeAjaxFormValidation：在ajax验证前执行的回调函数

具体demo可以看：http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html。

 

如何使用钩子？

Validation-Engine中的钩子是用来做啥？我们来看一个典型的使用场景：当你的表单字段存在错误时，你希望表单提交前，在表单头部打印出一行“你的表单存在错误，请修改！”。
也就是说Validation-Engine中的钩子其实可以理解为自定义事件。
具体来看个demo：http://www.position-relative.net/creation/formValidator/demos/demoHooks.html。

 

1 $("#formID").bind("jqv.form.result", function(event , errorFound){
2                     if(errorFound) $("#hookError").append("There is some problems with your form");
3                 })

监听jqv.form.result事件，在提交表单前触发。
errorFound是错误标识符，当为false时，表示表单存在错误。

Validation-Engine目前支持的钩子（自定义事件）

• jqv.form.validating:在表单开始验证前
• jqv.field.result(event, field, errorFound, prompText) :一个表单字段验证后触发
• jqv.form.result(event, errorFound) : 表单验证后触发

注意点

xiantao同学提了关于Validation-Engine的问题，有使用的朋友可以留意下：
“大家用的时候要注意一点，就是尽可能的把需要验证的框排的不要要密，或者说间距很小，要不会导致验证时弹出的层盖住其他的框，而这些框无法获得焦点，导致用户无法输入，而这个框有是必填的，结果就是用户的表单无法提交。我们整个项目都用的是这个，除了这一点，真的很完美”

 

 

转载于:https://www.cnblogs.com/kopheece/archive/2012/03/23/2414314.html