`
coconut_zhang
  • 浏览: 541718 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

jquery.validator 和 jquery.form 控件使用的问题 .

 
阅读更多

    如果使用jquery.validator 验证框架,那么form表单要放在table之外,不然会出现错误信息加载两次,并导致remote验证不能使用的情况,另外不能和jquery.form使用,不然会导致表单虽然不通过验证,但是依然提交的情况,如果一定要使用,则必须放在validator的submitHandler函数中执行ajaxSubmit操作。

  

 

先上张验证表单的效果吧:

 

 

   

 

 

1、首页要在页面中引入js

 

  <script src="/jquery-1.3.2.min.js" type="text/javascript"></script>

  <script src="/jquery.validate.js" type="text/javascript"></script>  

   <script src="/jquery.form.js" type="text/javascript"></script>   

2、js核心代码

 

jQuery(document).ready(function() {

/*commentform是你页面中的form表单的id,例如:

<form id="commentform" action="#" method=post>

<DIV id=author_info> <P><INPUT id=author tabIndex=1 name="user"><LABEL for=author><SMALL>姓名:</SMALL> </LABEL> </P> <span id="a"></span> <P><INPUT id=email tabIndex=2 name="email"> <LABEL for=email><SMALL>邮箱:</SMALL> </LABEL></P> <span id="b"></span> <P><INPUT id=url tabIndex=3 name=url><LABEL for=url><SMALL>网址:</SMALL></LABEL></P> <span id="c"></span> </DIV>  <BR><TEXTAREA id=comment onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('submit').click();return false};" onpropertychange="checklen(this)" name=content rows=14 cols=100 maxlength="250" ></TEXTAREA>  <br>文明上网,理性发言,您还可输入<span id="tno"></span>个字符<p>  <span id="d"></span><p>

</FORM>

*/

//开始验证规则  jQuery("#commentform").validate({   rules: {    user: {     required: true,     maxlength: 10    },    email: {     required: true,     email: true    },    url: {     required: true,     url: true    },    content: "required"   },   messages: {    user: {     required: '请输入姓名',     maxlength: '用户名应小于10个字符'    },    email: {     required: '请输入邮箱',     email: '请检查邮箱格式(例如:wjd@126.com)'    },    url: {     required: '请输入您的网址',     url: '请输入正确格式的网址(例如:http://www.baidu.com)'    },    content: '请输入您的评论'   },

  //当点击提交按钮时执行submitHandler函数

  submitHandler: function(form) {    jQuery(commentform).ajaxSubmit({     url: "./xxx.do?method=save",     data: jQuery('#commentform').formSerialize(),     type: 'POST',     beforeSubmit: function()      {      jQuery('#loading').show();     },     success: function(data) {      if (data == "success") {       jQuery('#loading').hide();       //此处可以用ajax方式得出刚刚的留言,显示到页面上      }       else {       alert("留言出错了");      }     }    });    //当验证没通过时不予以提交表单    return false;   },   //当验证没通过时显示错误的样式   errorPlacement: function(error, element) {    if (element.attr("name") == "user")     {     error.appendTo("#a");    }    if (element.attr("name") == "email")     {     error.appendTo("#b");    }    if (element.attr("name") == "url")     {     error.appendTo("#c");    }    if (element.attr("name") == "content")     {     error.appendTo("#d");    }   },   errorElement: "em",//可以用其他标签,记住把样式也对应修改   success: function(span) {    span.text("正确").addClass("success");//加上自定义的success类,当验证通过时提示正确   }  }); });

 

 

3、在页面中引入提示信息的样式(验证通过时提示输入正确,没通过时提示错误)

 

 <style type="text/css">

em.error {   background:url("/common/validation/images/unchecked.gif.png") no-repeat 0px 0px;   padding-left: 16px; } em.success {   background:url("/common/validation/images/checked.gif.png") no-repeat 0px 0px;   padding-left: 16px; }

</style>

 

这样利用jquery validate 和jquery form 插件组合实现表单验证和无刷新提交的功能就实现了,是不是很简单呢?

  • 大小: 26 KB
  • 大小: 31.5 KB
分享到:
评论

相关推荐

    jQuery验证控件jquery.validate.js使用说明+中文API

    jQuery验证控件`jquery.validate.js`是一款非常流行的前端表单验证插件,它极大地简化了在Web应用中实现表单验证的过程。这个插件由Jörn Zaefferer开发,是jQuery库的一个强大扩展,使得开发者能够快速、便捷地为...

    jquery.easyui1.2.3 Deme

    3. 应用样式和行为:通过添加特定的CSS类或使用jQuery方法启用EasyUI功能。 4. 配置和交互:通过JavaScript代码配置组件属性,实现动态交互。 **3. 示例分析** 在“codefans.net”这个文件中,可能包含了一系列...

    jquery_validate_(验证控件)详解

    在使用 jQuery Validate 之前,首先需要引入 jQuery 库和 jQuery Validate 的 js 文件。 ```html &lt;script src="../js/jquery.js" type="text/javascript"&gt; &lt;script src="../js/jquery.validate.js" type="text/...

    Jquery(Validate-Form)使用方法[张振华.Jack]

    ### Jquery(Validate-Form)使用方法详解 #### 一、Jquery Validate 概述 Jquery Validate 是一个非常流行的前端表单验证插件,它由 Jörn Zaefferer 编写和维护,他是 jQuery 团队的一员,同时也是 jQuery UI 的...

    jquery.validate验证快速上手

    ### jQuery Validate 快速入门与实战应用 #### 一、jQuery Validate 插件简介 ...以上就是 `jQuery Validate` 的基本使用和一些高级功能介绍,通过合理运用这些功能,可以显著提升前端表单验证的能力和灵活性。

    jquery.validate_框架详解

    默认情况下,类型为 "submit" 和 "reset" 的表单控件会被忽略。你可以根据需要自定义: ```javascript $("#myform").validate({ ignore: ".ignore" }); ``` #### 2.5 `rules` `rules` 选项用于定义表单元素的...

    jquery验证控件Validate

    该插件是jQuery库的一个扩展,充分利用了jQuery的简洁和高效特性。 ### 一、安装与引入 在使用jQuery Validate之前,首先需要确保已经引入了jQuery库。接着,通过以下方式引入jQuery Validate插件: ```html ...

    基于Bootstrap+jQuery.validate实现表单验证

    开发者可以使用jQuery.validator.addMethod方法定义一个新的验证规则,然后在表单的rules对象中调用这个自定义的验证方法,并配置相应的错误提示信息。这样的做法既保证了验证的灵活性,也保证了用户输入的有效性。 ...

    jquery的form表单验证

    本篇将深入探讨如何使用jQuery进行表单验证,特别是针对描述中提到的电话号码、电子邮件、控件和数字的验证。 1. **基本概念** - jQuery:jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件...

    Jquery 的表单验证控件

    在这个场景中,我们将深入探讨JQuery中的表单验证控件,尤其是`jQuery的表单校验插件validate`。 `jQuery Validate`插件是jQuery的一个官方扩展,用于实现客户端的表单验证。这个插件提供了丰富的选项和方法,使得...

    jquery-validate验证输入框

    在Web开发中,用户输入的数据验证是必不可少的一个环节,它能够确保用户提交的信息符合预设的规则,从而避免数据错误和安全问题。jQuery Validate是一个强大的、易于使用的jQuery插件,专为表单验证而设计。本文将...

    jQuery_formValidator使用文档

    该插件的核心优势在于其轻量级的代码和易于使用的API,允许开发者通过少量的JavaScript代码实现多样化的验证规则。 首先,使用jQuery_formValidator需要引入几个必要的文件,包括: 1. jquery-1.3.2.js:jQuery库,...

    JQuery验证框架

    下面是一个简单的示例,演示如何使用JQuery验证框架来验证一个包含姓名和邮箱的表单: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JQuery验证框架示例 &lt;script src="js/jquery.min.js"&gt; &lt;script src="js/jquery....

    Jquery表单验证

    在HTML中,表单元素通常通过`&lt;form&gt;`标签定义,它们包含各种输入控件如`&lt;input&gt;`、`&lt;select&gt;`和`&lt;textarea&gt;`等。这些控件的`required`属性可以设置为true,以在提交表单前强制验证非空输入。然而,这种基本验证往往...

    jQuery-Validation范例

    **jQuery Validation插件详解** ...在ASP.NET环境中,jQuery Validation可以与ASP.NET的验证控件结合使用。通过设置`ClientValidationEnabled`属性为`true`,使服务器端验证与客户端验证同步。 ```csharp ...

    jQuery表单验证插件 formValidator2.2.4-修改样式版

    jQuery formValidator2.2.4是一款广泛使用的轻量级表单验证插件,它提供了丰富的验证规则和灵活的自定义功能。在这个修改版中,开发者已经对原有的样式进行了调整,去除了之前的红色警告样式和箭头宽度,使得整体...

    jQuery验证控件 Validation Plugin - v1.14.0汉化及附带案例

    invalidHandler: function(form, validator) { // 处理验证失败的逻辑 }, ``` 6. **附加方法** 除了自动验证,还有`valid()`、`invalid()`、`resetForm()`等方法,用于手动触发验证、设置验证状态和重置表单。...

    JQuery表单验证

    通过使用jQuery,开发者可以轻松地实现DOM操作、事件处理、动画效果和Ajax交互。 ### 2. jQuery表单验证原理 jQuery表单验证通常基于jQuery插件,如jQuery Validation Plugin,它提供了强大的验证规则和自定义错误...

Global site tag (gtag.js) - Google Analytics