jquery.validate1.9.0前台验证使用

一、利用jquery.form插件提交表单方法使用jquery.validate插件

现象：当提交表单时，即使前台未验证通过，也照常提交表单。

解决办法：

1. $('#myForm').submit(function(){
2. if (!$(this).valid()) return false;//加上此句OK
3. $('.error').html('');
4. $("#go").prop("disabled",true);
5. $(this).ajaxSubmit({
6. type:"POST",
7. //beforeSubmit: showRequest,
8. dataType:'json',
9. success: showResponse
10. });
11. return false;
12. });

相关说明：

定制提交方式(ajax提交)
如果使用ajax方式提交，那请采用如下两种方式和校验框架结合
1)、使用submitHandler属性配置ajax提交，submithandler：当表单全部校验通过之后会回调配置的代码，此处也就是当校验通过之后调用ajax提交。
2)、使用valid方法，监听form的submit事件，当$('#form').valid()返回true的时候再提交。

通过监听form的submit事件，对form进行ajax提交。示例完整代码如下：

1. $(document).ready(function(){
2. $('#myForm').submit(function(){
3. if (!$(this).valid()) return false;
4. $('.error').html('');
5. $("#go").prop("disabled",true);
6. $(this).ajaxSubmit({
7. type:"POST",
8. //beforeSubmit: showRequest,
9. dataType:'json',
10. success: showResponse
11. });
12. return false;
13. });
14. var validator = $("#myForm").validate({
15. rules: {
16. username: "required",
17. email: {
18. required: true,
19. email: true
20. }
21. },
22. messages: {
23. username: "请输入姓名",
24. email: {
25. required: "请输入Email地址",
26. email: "请输入正确的email地址"
27. }
28. }
29. });
30. });
31. function showResponse(jsonData,statusText)
32. {
33. if(statusText=='success')
34. {
35. $("#go").prop("disabled",false);
36. if (jsonData.status == 1)
37. {
38. $("#return").html(jsonData.message);
39. }
40. else
41. {
42. $.each(jsonData.errors, function(k,v){
43. //$('#output').find('ul').append('<li>' + v + '</li>');
44. $('.e_' + k).html(v);
45. });
46. }
47. }
48. }

二、控制错误信息位置的方法

现象一：

我在注册表单新加了一个验证码。验证结果错误时，这个错误信息跑到验证码前面去了。如下图所示：

目的：让错误信息在验证码后面

现象二：

上图中的红色提示内容，我想移到 (* 必填) 的后面。

上面两个现象，可通过jquery.validate自带的控制错误信息位置的方法——’errorPlacement’，使用也很方便：

1. errorPlacement: function(error, element)
2. {
3. error.appendTo(element.parent());
4. }