首页 > 代码库 > jquery.validate1.9.0前台验证使用

jquery.validate1.9.0前台验证使用

2024-07-18 05:40:12   220人阅读

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

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

解决办法：

 

[php] view plaincopy
 
  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提交。示例完整代码如下：

 

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

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

现象一：

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

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

现象二：

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

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

 

[php] view plaincopy
 
  1. errorPlacement: function(error, element)  
  2. {  
  3.     error.appendTo(element.parent());  
  4. }  



 


联系
我们