`

jquery验证时错误信息的位置

 
阅读更多

好长时间没有用jquery.validate.js这个插件了,忘得差不多了。唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问题,如果知道的话,很简单。以前遇到过,可是忘了,现在标记一下,将来在忘了,在回过头看看。俗话说的好,好记性不如烂笔头。

举个例子,大家就知道怎么回事了。

  1. rules:{
  2. name:{
  3. required:true,
  4. rangelength:[1,20]
  5. },
  6. validateCode:{
  7. required:true,
  8. number:true,
  9. rangelength:[5,5]
  10. }
  11. },
  12. messages:{
  13. name:{
  14. required:"请输入命令名",
  15. rangelength:jQuery.format("长度请控制在{0}~{1}")
  16. },
  17. validateCode:{
  18. required:"请输入验证码",
  19. number:"请输入数字",
  20. rangelength:jQuery.format("长度必须是5位")
  21. }
  22. },
  23. success:function(label){
  24. label.addClass("errorchecked");
  25. },
  26. submitHandler:function(form){
  27. if($("#RegionId").val()=='0'){
  28. $("#citySelect").attr("class","error").html('请选择区域').show();
  29. $("#RegionId").attr("class","error");
  30. }else{
  31. $("#RegionId").attr("class","valid");
  32. $("#citySelect").attr("class","valid").html('success').show();
  33. form.submit();
  34. }
  35. }
  36. });

在上面的代码中,我并没有添加错误信息存放位置的方法,我们看一下效果

  1. <td>
  2. <inputtype="text"maxlength="30"value=""id="name"name="name">
  3. <labelfor="name"generated="true">请输入命令名</label>//错误信息会自动根在输入框的后面。
  4. </td>

如果我们加上错误信息位置的方法errorPlacement来看一下效果是什么样子的。

  1. rules:{
  2. name:{
  3. required:true,
  4. rangelength:[1,20]
  5. },
  6. validateCode:{
  7. required:true,
  8. number:true,
  9. rangelength:[5,5]
  10. }
  11. },
  12. messages:{
  13. name:{
  14. required:"请输入命令名",
  15. rangelength:jQuery.format("长度请控制在{0}~{1}")
  16. },
  17. validateCode:{
  18. required:"请输入验证码",
  19. number:"请输入数字",
  20. rangelength:jQuery.format("长度必须是5位")
  21. }
  22. },
  23. errorPlacement:function(error,element){//错误信息位置设置方法
  24. error.appendTo(element.parent().next());//这里的element是录入数据的对象
  25. },
  26. success:function(label){
  27. label.addClass("errorchecked");
  28. },
  29. submitHandler:function(form){
  30. if($("#RegionId").val()=='0'){
  31. $("#citySelect").attr("class","error").html('请选择区域').show();
  32. $("#RegionId").attr("class","error");
  33. }else{
  34. $("#RegionId").attr("class","valid");
  35. $("#citySelect").attr("class","valid").html('success').show();
  36. form.submit();
  37. }
  38. }
  39. });

来看一下效果

  1. <tr>
  2. <th><labelfor="name"id="lname"><codetitle="必填">*</code>命令名称</label></th>
  3. <td><inputtype="text"maxlength="30"value=""id="name"name="name"></td>
  4. <td><labelfor="name"generated="true">请输入命令名</label></td>//错误信息跑到这儿来了,
  5. </tr>

够简单吧,在简单的东西,长时间不用也会忘的。

分享到:
评论

相关推荐

    jquery验证插件!

    `check___`可能是其他相关文件,如CSS样式文件或额外的JavaScript文件,用于美化验证错误提示或扩展功能。 ### 总结 jQuery验证插件通过简化和标准化表单验证过程,大大提升了开发效率。它的强大功能和易用性使其...

    Jquery验证框架

    7. **css**:这个文件夹可能包含CSS样式表,用于定制验证时的样式,如错误消息的显示位置和颜色。 在jQuery验证框架中,开发者可以通过以下步骤实现表单验证: 1. 引入jQuery库和验证插件。 2. 配置验证规则,这...

    jQuery 验证控件

    3. **错误消息提示**:验证失败时,jQuery验证控件可以即时显示错误消息。这些消息可以是简单的文本提示,也可以是更复杂的tip,如气泡提示或划线高亮,提高用户体验。 4. **实时验证**:jQuery验证控件支持实时...

    JQuery验证

    jQuery验证插件与jQuery UI或Bootstrap等库结合使用时,可以提供更好的用户体验,如显示错误提示、改变输入框样式等。具体实现方式依赖于你所使用的前端框架。 总结,jQuery验证插件提供了一套完整的解决方案来处理...

    表单验证jquery插件

    jQuery Validation Engine 是一款基于 jQuery 库的验证插件,它能够方便地添加到任何HTML表单中,提供多种验证规则和错误提示样式。该插件支持自定义验证规则,且内置了多国语言,包括中文,因此对于中文项目来说...

    jQuery好的验证框架

    **jQuery验证框架** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在Web开发中,数据验证是必不可少的一环,用于确保用户输入的有效性和安全性。jQuery验证框架...

    jquery验证插件 带文档 支持中文

    jQuery验证插件是一款广泛应用于前端开发中的工具,它极大地简化了网页表单验证的过程,使得开发者可以方便地为用户输入的数据添加各种验证规则。这款插件不仅具备丰富的验证功能,而且特别强调对中文的支持,这在...

    jquery验证包

    在使用jQuery验证包时,建议遵循以下最佳实践: 1. 尽可能使用HTML5的data-*属性,使代码更易维护。 2. 针对不同的表单和场景,灵活设置验证规则,提高用户体验。 3. 使用无侵入式Ajax,减少不必要的页面刷新,提升...

    jquery验证

    jQuery验证插件是基于jQuery的一个强大的插件,由Jörn Zaefferer创建并维护。该插件提供了一种简单的方式来处理表单验证,并且支持多种自定义选项和方法,使其成为前端表单验证的首选工具之一。 #### 三、基本使用...

    js JQuery验证电子邮箱的函数

    本文将深入解析一个具体的场景:使用js和JQuery进行电子邮件地址、电话号码以及邮政编码的验证。 ### 一、JS与JQuery在邮件验证中的应用 #### 1. 正则表达式在邮件验证中的作用 在上述代码示例中,核心是使用正则...

    Jquery超强验证表单

    如果验证失败,可以显示错误信息并阻止表单提交。同时,确保在所有验证成功后再提交表单,以防止部分数据未验证就提交。 **10. 源码分析** 通过阅读和理解“jQuery超强验证表单”中的源码,我们可以学习到如何组织...

    jQuery表单验证大全

    `changelog.txt`文件记录了jQuery Validate插件的更新历史,而`META.json`可能是关于插件元数据的信息,对于了解插件的更新和发展历程有一定帮助。 7. **示例与测试** `demo-test`目录通常包含了一些示例和测试...

    jquery validate默认错误提示显示位置修改

    ### 修改jQuery Validate默认错误提示显示位置 在网页开发过程中,表单验证是非常重要的一个环节,它不仅能够提高用户体验,还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具,...

    jquery 前端验证框架

    **二、jQuery验证框架的重要性** 前端验证不仅能够即时反馈用户输入错误,提高用户交互体验,还能减少服务器端的压力,避免无效请求。jQuery的验证框架提供了一套灵活、可定制的验证规则,使开发者可以快速构建表单...

    jquery验证表单

    5. **错误消息显示**:jQuery验证插件提供了一套默认的错误消息显示机制,但也可以自定义。例如,我们可以指定错误消息的位置: ```javascript $('.validate-form').validate({ errorPlacement: function(error, ...

    jquery 验证 提示 插件

    在jQuery验证插件中,提示通常指的是错误提示。这些提示可以是文字信息,也可以是视觉效果,如红色边框或警告图标。jQuery Tooltip插件则扩展了这一功能,它允许开发者创建自定义的提示效果,不仅仅是错误信息,还...

    Jquery表单验证特效示例

    2. **jQuery验证插件**:jQuery社区提供了许多验证插件,例如jQuery Validation Plugin,这是一个功能强大的验证工具,它包含了多种内置验证规则和自定义规则的能力,可以快速构建复杂的验证逻辑。 3. **基本使用**...

    JQuery实现表单验证

    在"JQuery实现表单验证"的案例中,描述中提到有五种不同的提示方式,这些可能包括错误消息的显示位置、样式、动画效果等,以满足多样化的用户体验需求。 以下是使用JQuery进行表单验证的基本步骤: 1. **选择器与...

    jQuery表单验证

    验证失败时,错误信息通常会显示在相应的表单字段附近。可以使用`errorPlacement`回调函数控制错误信息的位置和样式。 7. **异步验证** 对于需要服务器验证的情况,如检查用户名是否已存在,可以使用异步验证功能...

Global site tag (gtag.js) - Google Analytics