jqueryvalidate使用攻略第四步
使用 攻略 jqueryvalidate
2023-06-13 09:14:23 时间
默认情况下,验证提示信息用label元素来显示,并且会添加cssclass,通过css可以很方便设置出错控件以及错误信息的显示方式。
/*输入控件验证出错*/
forminput.error{border:solid1pxred;}
/*验证错误提示信息*/
formlabel.error{width:200px;margin-left:10px;color:Red;}
如果想自定义显示方式,可以修改jquery.validate的默认显示方式
默认用label显示错误消息,可以通过errorElement属性来修改
errorElement:错误消息的html标签
$(".selector").validate
errorElement:"em"
})
可以在出错信息外用其他的元素包装一层。
wrapper:错误消息的外层封装html标签
$(".selector").validate({
wrapper:"li"
})
验证出错的cssclass默认是error,通过errorClass可以修改
errorClass:验证出错时使用的cssclass
$(".selector").validate({
errorClass:"invalid"
})
还自定义验证成功时的动作
success:如果值是字符串,会当做一个css类,如果是一个函数,则执行该函数
$(".selector").validate({
success:"valid"
})
或者
success:function(label){
label.html("").addClass("checked");
}
还可以把错误消息统一到一个容器显示
errorLabelContainer:将错误消息统一到一个容器显示
$("#myform").validate({
errorLabelContainer:"#messageBox"
})
默认情况下,错误消息是放在验证元素后面的,可以自定义错误消息的显示位置
$(".selector").validate({
errorPlacement:function(error,element){
error.appendTo(element.parent("td").next("td"));
}
})
更进一步可以定义一个组,把几个地方的出错信息统一放在一个地方,用errorPlacement控制把出错信息放在哪里
groups:定义一个组
$(".selector").validate({
groups:{
username:"fnamelname"
},
errorPlacement:function(error,element){
if(element.attr("name")=="fname"||element.attr("name")=="lname")
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})
高亮显示
highlight:高亮显示,默认是添加errorClass
unhighlight:和highlight对应,反高亮显示
$(".selector").validate({
highlight:function(element,errorClass){
$(element).addClass(errorClass);
$(element.form).find("label[for="+element.id+"]").addClass(errorClass);
},
unhighlight:function(element,errorClass){
$(element).removeClass(errorClass);
$(element.form).find("label[for="+element.id+"]").removeClass(errorClass);
}
});
或者可以完全自定义错误显示
showErrors:得到错误的显示句柄
$(".selector").validate({
showErrors:function(errorMap,errorList){
$("#summary").html("Yourformcontains"+this.numberOfInvalids()
+"errors,seedetailsbelow.");
this.defaultShowErrors();
}
})
/*输入控件验证出错*/
forminput.error{border:solid1pxred;}
/*验证错误提示信息*/
formlabel.error{width:200px;margin-left:10px;color:Red;}
如果想自定义显示方式,可以修改jquery.validate的默认显示方式
默认用label显示错误消息,可以通过errorElement属性来修改
errorElement:错误消息的html标签
$(".selector").validate
errorElement:"em"
})
可以在出错信息外用其他的元素包装一层。
wrapper:错误消息的外层封装html标签
$(".selector").validate({
wrapper:"li"
})
验证出错的cssclass默认是error,通过errorClass可以修改
errorClass:验证出错时使用的cssclass
$(".selector").validate({
errorClass:"invalid"
})
还自定义验证成功时的动作
success:如果值是字符串,会当做一个css类,如果是一个函数,则执行该函数
$(".selector").validate({
success:"valid"
})
或者
success:function(label){
label.html("").addClass("checked");
}
还可以把错误消息统一到一个容器显示
errorLabelContainer:将错误消息统一到一个容器显示
$("#myform").validate({
errorLabelContainer:"#messageBox"
})
默认情况下,错误消息是放在验证元素后面的,可以自定义错误消息的显示位置
$(".selector").validate({
errorPlacement:function(error,element){
error.appendTo(element.parent("td").next("td"));
}
})
更进一步可以定义一个组,把几个地方的出错信息统一放在一个地方,用errorPlacement控制把出错信息放在哪里
groups:定义一个组
$(".selector").validate({
groups:{
username:"fnamelname"
},
errorPlacement:function(error,element){
if(element.attr("name")=="fname"||element.attr("name")=="lname")
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})
高亮显示
highlight:高亮显示,默认是添加errorClass
unhighlight:和highlight对应,反高亮显示
$(".selector").validate({
highlight:function(element,errorClass){
$(element).addClass(errorClass);
$(element.form).find("label[for="+element.id+"]").addClass(errorClass);
},
unhighlight:function(element,errorClass){
$(element).removeClass(errorClass);
$(element.form).find("label[for="+element.id+"]").removeClass(errorClass);
}
});
或者可以完全自定义错误显示
showErrors:得到错误的显示句柄
$(".selector").validate({
showErrors:function(errorMap,errorList){
$("#summary").html("Yourformcontains"+this.numberOfInvalids()
+"errors,seedetailsbelow.");
this.defaultShowErrors();
}
})
相关文章
- 使用Golang实现PHP的Addslashes和Stripslashes「建议收藏」
- WGCLOUD部署使用:指令下发和自定义监控项有什么区别
- 使用hardhat 开发以太坊智能合约-验证合约
- 使用 MegaCLI 检测磁盘状态并更换磁盘
- SQL开发知识:Oracle 同义词的定义使用方法
- Oracle 视图 ALL_SYNC_CAPTURE_PREPARED_TABS 官方解释,作用,如何使用详细说明
- Oracle 视图 DBA_AUTOTASK_WINDOW_HISTORY 官方解释,作用,如何使用详细说明
- Oracle 等待事件 dispatcher timer 官方解释,作用,如何使用及优化方法
- C++数组及其使用方法完全攻略
- 微盛企微管家云朵:使用企业微信服务客户的三大实战攻略
- MySQL使用指南:图解攻略(mysql使用图解)
- 掌握Linux中花括号的使用技巧,轻松实现高效编程(linux花括号)
- 日志使用SQL Server实现日志缩减(sqlserver缩小)
- “快速掌握!Linux命令使用入门攻略”(linux怎么使用命令)
- 使用CMD指令快捷打开MySQL服务(cmd指令打开mysql)
- 在Ad域环境中使用Oracle数据库(ad域 oracle)
- 使用MySQL文件系统进行数据管理(mysql_fs)
- Oracle中的条件语句使用技巧与示范(oracle中的条件语句)
- 使用Redis构建即时通讯系统的必要性(从redis即时通讯协议)
- 使用Redis阻塞队列实现高效率任务处理(redis 阻塞队列效率)
- jquery.validate使用攻略第三部
- 概率的问题:使用递归与多次试验模拟的分析
- c语言中使用BF-KMP算法实例