源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

关于jquery.validate1.9.0前台验证的使用介绍

  • 时间:2021-09-14 07:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:关于jquery.validate1.9.0前台验证的使用介绍
[b]一、利用jquery.form插件提交表单方法使用jquery.validate插件[/b] 现象:当提交表单时,即使前台未验证通过,也照常提交表单。 [b]解决办法: [/b]
[u]复制代码[/u] 代码如下:
$('#myForm').submit(function(){     if (!$(this).valid()) return false;//加上此句OK     $('.error').html('');     $("#go").prop("disabled",true);     $(this).ajaxSubmit({         type:"POST",         //beforeSubmit: showRequest,         dataType:'json',         success: showResponse     });     return false; });
[b]相关说明: [/b] 定制提交方式(ajax提交) 如果使用ajax方式提交,那请采用如下两种方式和校验框架结合 1)、使用submitHandler属性配置ajax提交,submithandler:当表单全部校验通过之后会回调配置的代码,此处也就是当校验通过之后调用ajax提交。 2)、使用valid方法,监听form的submit事件,当$('#form').valid()返回true的时候再提交。 通过监听form的submit事件,对form进行ajax提交。示例完整代码如下:
[u]复制代码[/u] 代码如下:
$(document).ready(function(){     $('#myForm').submit(function(){         if (!$(this).valid()) return false;         $('.error').html('');         $("#go").prop("disabled",true);         $(this).ajaxSubmit({             type:"POST",             //beforeSubmit: showRequest,             dataType:'json',             success: showResponse         });         return false;     });     var validator = $("#myForm").validate({         rules: {             username: "required",             email: {                 required: true,                 email: true             }         },         messages: {             username: "请输入姓名",             email: {                 required: "请输入Email地址",                 email: "请输入正确的email地址"             }         }     }); }); function showResponse(jsonData,statusText) {     if(statusText=='success')     {         $("#go").prop("disabled",false);         if (jsonData.status == 1)         {             $("#return").html(jsonData.message);         }         else         {             $.each(jsonData.errors, function(k,v){                 //$('#output').find('ul').append('<li>' + v + '</li>');                 $('.e_' + k).html(v);             });         }     } }
二、控制错误信息位置的方法 现象一: 我在注册表单新加了一个验证码。验证结果错误时,这个错误信息跑到验证码前面去了。如下图所示: [img]http://files.jb51.net/file_images/article/201304/2013042611123824.png[/img] 目的:让错误信息在验证码后面 现象二: [img]http://files.jb51.net/file_images/article/201304/2013042611123825.gif[/img] [b]上图中的红色提示内容,我想移到 (* 必填) 的后面。[/b] 上面两个现象,可通过jquery.validate自带的控制错误信息位置的方法——'errorPlacement',使用也很方便:
[u]复制代码[/u] 代码如下:
errorPlacement: function(error, element) {     error.appendTo(element.parent()); }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部