好长时间没有用jquery.validate.js这个插件了,忘得差不多了。唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问题,如果知道的话,很简单。以前遇到过,可是忘了,现在标记一下,将来在忘了,在回过头看看。俗话说的好,好记性不如烂笔头。
举个例子,大家就知道怎么回事了。
- rules:{
- name:{
- required:true,
- rangelength:[1,20]
- },
- validateCode:{
- required:true,
- number:true,
- rangelength:[5,5]
- }
- },
- messages:{
- name:{
- required:"请输入命令名",
- rangelength:jQuery.format("长度请控制在{0}~{1}")
- },
- validateCode:{
- required:"请输入验证码",
- number:"请输入数字",
- rangelength:jQuery.format("长度必须是5位")
- }
- },
- success:function(label){
- label.addClass("errorchecked");
- },
- submitHandler:function(form){
- if($("#RegionId").val()=='0'){
- $("#citySelect").attr("class","error").html('请选择区域').show();
- $("#RegionId").attr("class","error");
- }else{
- $("#RegionId").attr("class","valid");
- $("#citySelect").attr("class","valid").html('success').show();
- form.submit();
- }
- }
- });
在上面的代码中,我并没有添加错误信息存放位置的方法,我们看一下效果
- <td>
- <inputtype="text"maxlength="30"value=""id="name"name="name">
- <labelfor="name"generated="true">请输入命令名</label>
- </td>
如果我们加上错误信息位置的方法errorPlacement来看一下效果是什么样子的。
- rules:{
- name:{
- required:true,
- rangelength:[1,20]
- },
- validateCode:{
- required:true,
- number:true,
- rangelength:[5,5]
- }
- },
- messages:{
- name:{
- required:"请输入命令名",
- rangelength:jQuery.format("长度请控制在{0}~{1}")
- },
- validateCode:{
- required:"请输入验证码",
- number:"请输入数字",
- rangelength:jQuery.format("长度必须是5位")
- }
- },
- errorPlacement:function(error,element){
- error.appendTo(element.parent().next());
- },
- success:function(label){
- label.addClass("errorchecked");
- },
- submitHandler:function(form){
- if($("#RegionId").val()=='0'){
- $("#citySelect").attr("class","error").html('请选择区域').show();
- $("#RegionId").attr("class","error");
- }else{
- $("#RegionId").attr("class","valid");
- $("#citySelect").attr("class","valid").html('success').show();
- form.submit();
- }
- }
- });
来看一下效果
- <tr>
- <th><labelfor="name"id="lname"><codetitle="必填">*</code>命令名称</label></th>
- <td><inputtype="text"maxlength="30"value=""id="name"name="name"></td>
- <td><labelfor="name"generated="true">请输入命令名</label></td>
- </tr>
够简单吧,在简单的东西,长时间不用也会忘的。
分享到:
相关推荐
`check___`可能是其他相关文件,如CSS样式文件或额外的JavaScript文件,用于美化验证错误提示或扩展功能。 ### 总结 jQuery验证插件通过简化和标准化表单验证过程,大大提升了开发效率。它的强大功能和易用性使其...
7. **css**:这个文件夹可能包含CSS样式表,用于定制验证时的样式,如错误消息的显示位置和颜色。 在jQuery验证框架中,开发者可以通过以下步骤实现表单验证: 1. 引入jQuery库和验证插件。 2. 配置验证规则,这...
3. **错误消息提示**:验证失败时,jQuery验证控件可以即时显示错误消息。这些消息可以是简单的文本提示,也可以是更复杂的tip,如气泡提示或划线高亮,提高用户体验。 4. **实时验证**:jQuery验证控件支持实时...
jQuery验证插件与jQuery UI或Bootstrap等库结合使用时,可以提供更好的用户体验,如显示错误提示、改变输入框样式等。具体实现方式依赖于你所使用的前端框架。 总结,jQuery验证插件提供了一套完整的解决方案来处理...
jQuery Validation Engine 是一款基于 jQuery 库的验证插件,它能够方便地添加到任何HTML表单中,提供多种验证规则和错误提示样式。该插件支持自定义验证规则,且内置了多国语言,包括中文,因此对于中文项目来说...
**jQuery验证框架** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在Web开发中,数据验证是必不可少的一环,用于确保用户输入的有效性和安全性。jQuery验证框架...
jQuery验证插件是一款广泛应用于前端开发中的工具,它极大地简化了网页表单验证的过程,使得开发者可以方便地为用户输入的数据添加各种验证规则。这款插件不仅具备丰富的验证功能,而且特别强调对中文的支持,这在...
在使用jQuery验证包时,建议遵循以下最佳实践: 1. 尽可能使用HTML5的data-*属性,使代码更易维护。 2. 针对不同的表单和场景,灵活设置验证规则,提高用户体验。 3. 使用无侵入式Ajax,减少不必要的页面刷新,提升...
jQuery验证插件是基于jQuery的一个强大的插件,由Jörn Zaefferer创建并维护。该插件提供了一种简单的方式来处理表单验证,并且支持多种自定义选项和方法,使其成为前端表单验证的首选工具之一。 #### 三、基本使用...
本文将深入解析一个具体的场景:使用js和JQuery进行电子邮件地址、电话号码以及邮政编码的验证。 ### 一、JS与JQuery在邮件验证中的应用 #### 1. 正则表达式在邮件验证中的作用 在上述代码示例中,核心是使用正则...
如果验证失败,可以显示错误信息并阻止表单提交。同时,确保在所有验证成功后再提交表单,以防止部分数据未验证就提交。 **10. 源码分析** 通过阅读和理解“jQuery超强验证表单”中的源码,我们可以学习到如何组织...
`changelog.txt`文件记录了jQuery Validate插件的更新历史,而`META.json`可能是关于插件元数据的信息,对于了解插件的更新和发展历程有一定帮助。 7. **示例与测试** `demo-test`目录通常包含了一些示例和测试...
### 修改jQuery Validate默认错误提示显示位置 在网页开发过程中,表单验证是非常重要的一个环节,它不仅能够提高用户体验,还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具,...
**二、jQuery验证框架的重要性** 前端验证不仅能够即时反馈用户输入错误,提高用户交互体验,还能减少服务器端的压力,避免无效请求。jQuery的验证框架提供了一套灵活、可定制的验证规则,使开发者可以快速构建表单...
5. **错误消息显示**:jQuery验证插件提供了一套默认的错误消息显示机制,但也可以自定义。例如,我们可以指定错误消息的位置: ```javascript $('.validate-form').validate({ errorPlacement: function(error, ...
在jQuery验证插件中,提示通常指的是错误提示。这些提示可以是文字信息,也可以是视觉效果,如红色边框或警告图标。jQuery Tooltip插件则扩展了这一功能,它允许开发者创建自定义的提示效果,不仅仅是错误信息,还...
2. **jQuery验证插件**:jQuery社区提供了许多验证插件,例如jQuery Validation Plugin,这是一个功能强大的验证工具,它包含了多种内置验证规则和自定义规则的能力,可以快速构建复杂的验证逻辑。 3. **基本使用**...
在"JQuery实现表单验证"的案例中,描述中提到有五种不同的提示方式,这些可能包括错误消息的显示位置、样式、动画效果等,以满足多样化的用户体验需求。 以下是使用JQuery进行表单验证的基本步骤: 1. **选择器与...
验证失败时,错误信息通常会显示在相应的表单字段附近。可以使用`errorPlacement`回调函数控制错误信息的位置和样式。 7. **异步验证** 对于需要服务器验证的情况,如检查用户名是否已存在,可以使用异步验证功能...