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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
原生JS实现烟花效果
Mar 10 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
DTD的含义以及作用
2014/01/26 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
教研处工作方案
2014/05/26 职场文书
2014年法院工作总结
2014/11/24 职场文书
兵马俑的导游词
2015/02/02 职场文书
清洁工岗位职责
2015/02/13 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python