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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
详解VUE前端按钮权限控制
Apr 26 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
PHP新手上路(九)
2006/10/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php实现分页工具类分享
2014/01/09 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
javascript截取字符串小结
2015/04/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
javascript实现连续赋值
2015/08/10 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
python生成IP段的方法
2015/07/07 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
实用求职信范文分享
2013/12/25 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
企业文化演讲稿
2014/05/20 职场文书
中秋手机店促销方案
2014/06/16 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
幸福终点站观后感
2015/06/04 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
详解Go与PHP的语法对比
2021/05/29 PHP