jquery.validate提示错误信息位置方法


Posted in Javascript onJanuary 22, 2016

本文实例讲述了jquery.validate提示错误信息位置方法。分享给大家供大家参考,具体如下:

好长时间没有用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("error checked");
},
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>
<input type="text" maxlength="30" value="" id="name" name="name">
<label for="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() ); //这里的element是录入数据的对象
},
success: function(label) {
label.addClass("error checked");
},
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><label for="name" id="lname"><code title="必填">*</code>命令名称</label></th>
<td><input type="text" maxlength="30" value="" id="name" name="name"></td>
<td><label for="name" generated="true">请输入命令名</label></td>
//错误信息跑到这儿来了,
</tr>

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

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 #Javascript
jQuery简单获取键盘事件的方法
Jan 22 #Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 #Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 #Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
You might like
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python中序列的修改、散列与切片详解
2017/08/27 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
个人授权委托书范文
2014/09/21 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
高中体育课教学反思
2016/02/16 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL