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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
原生js 秒表实现代码
Jul 24 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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 cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
Js基础学习资料
2010/11/23 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
js中url对象化管理分析
2017/12/29 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
优秀护士先进事迹
2014/05/08 职场文书
教师节倡议书
2014/08/30 职场文书
开平碉楼导游词
2015/02/06 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP