之前曾用过jQuery validator做过一些项目，但是最近又重新拾起，发现功能上升级了，一些之前的使用方法已经在报错了，于是乎再重新整理一篇博客汇总一下最新的jQuery form validate 使用教程。
jQuery validate 使用方法
其中我们经常要用户表单提交事件，表单元素失去焦点后的验证事件，错误显示的方法，验证表单rules规则，验证表单rules规则对应的消息。
| 代码如下 | 复制代码 |
|
jQuery(document).ready(function ($) { $("#cf-order-checkout-form").validate({ // custom handler to call named function "do_payment" submitHandler: function (form) { $(form).attr("target", "_blank"); form.submit(); }, // www.111cn.net validate the previously selected element when the user clicks out onfocusout: function (element) { $(element).valid(); }, errorPlacement: function (error, element) { // validation rules |
|
其他使用方法请查看官方API函数。
jQuery validate submitHandler 导致死循环
防止表单提交死循环，应该用form.submit();而非$(form).submit();
submitHandler的form变量为dom，dom对象转换成jquery的对象，加上$()这个就行，然后就可以用jquery的语法来操作。
正确的使用提交表单方法：
| 代码如下 | 复制代码 |
|
submitHandler: function(form){ form.submit(); } |
|
这样就对了。
jQuery validate Ajax Submit
我们可以定义submitHandler函数中使用jQuery Ajax来请求处理。
| 代码如下 | 复制代码 |
| $("#user-login").validate({ // custom handler to call named function "do_payment" submitHandler: function (form) { $.ajax({ type: "POST", url: '/ajax/user/login', data: {"name" : $(form).find('#edit-name').val(), "pass" : $(form).find('#edit-pass').val() }, dataType: "json", success: function(data) { if (data.result) { location.reload(); } else if(data.message) { alert(data.message); } else { alert('密码错误'); } } }); }, // validate the previously selected element when the user clicks out onfocusout: function (element) { $(element).valid(); }, errorPlacement: function (error, element) { error.appendTo(element.parent()); } }); |
|
最后不得不感谢以下jQuery Validate插件作者。