jquery validate使用攻略 第四步_jquery

默认情况下,验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。

/* 输入控件验证出错*/
form input.error { border:solid 1px red;}

/* 验证错误提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}

如果想自定义显示方式,可以修改jquery.validate的默认显示方式

默认用label显示错误消息,可以通过errorElement属性来修改
errorElement: 错误消息的html标签

$(".selector").validate
errorElement: "em"
})

可以在出错信息外用其他的元素包装一层。
wrapper: 错误消息的外层封装html标签

$(".selector").validate({
wrapper: "li"
})

验证出错的css class默认是error,通过errorClass可以修改
errorClass: 验证出错时使用的css class

$(".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") );
}
})

更进一步可以定义一个组,把几个地方的出错信息统一放在一个地方,用error Placement控制把出错信息放在哪里
groups:定义一个组

$(".selector").validate({
groups: {
username: "fname lname"
},
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("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})

时间: 2025-01-02 19:20:45

jquery validate使用攻略 第四步_jquery的相关文章

jquery.validate使用攻略 第五步 正则验证_jquery

// 手机号码验证 jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || (length == 11 && mobile.test(value)); }, "手机号

jquery.validate使用攻略 第三部_jquery

1: 自定义表单提交 设置submitHandler来自定义表单提交动作 $(".selector").validate({ submitHandler: function(form) { alert("验证通过"); } }); 如果需要提交表单,可以调用 form.submit(); 或者$(form).ajaxSubmit(); 2: 调试模式 将debug设置为true,表单不会提交,只进行检查,方便调试 $(".selector").v

jquery.validate使用攻略 第一部_jquery

主要分几部分 jquery.validate 基本用法 jquery.validate API说明 jquery.validate 自定义 jquery.validate 常见类型的验证代码 下载地址 jquery.validate插件的文档地址 http://docs.jquery.com/Plugins/Validation jquery.validate插件的主页 http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.validate使用攻略 第二部_jquery

Plugin methodsName Type validate( options ) Returns: Validator 验证所选的FORM valid( ) Returns: Boolean 检查是否验证通过 rules( ) Returns: Options 返回元素的验证规则 rules( "add", rules ) Returns: Options 增加验证规则 rules( "remove", rules ) Returns: Options 删除验

建站全攻略:四步上线你的企业网站!

模板建站之所以受到中小企业的青睐,不仅仅是简简单单价格方面便宜,还有建站周期短.维护方便.易操作.门槛低容易上手等特征.在懒惰的驱使下越来越少的人愿意手写代码做网站,不仅仅是因为麻烦,更重要的是自己写出来的也不见得比模板好看多少,说了这么多,倒不如自己建一个站,下面就教大家如何快速的设计出高端大气上档次的网站. 本次教程使用商品: 阿里云用户首选模板网站[瑞蚁阿里云专属模板网站] 1)激活建站后台 在阿里云购买建站产品之后,会生成一个兑换码和一个兑换链接. 点击链接,注册后直接跳到兑换区,兑换后

基于google图表API的jquery组件全攻略:基础入门

gchart:基于google图表API的jquery组件全攻略--入门 gchart是基于google图表API的jquery组件.使用gchart可以方便地生成强大的各种图表和报表.基于google图表接口的gchart,有着简单.方便.强大.够用.好用的特点.<gchart:基于jquery的google图表接口组件全攻略>系列文章将带你走入gchart的报表世界. 先解释一下这个拗口的标题 google图表API: google图表API是google提供的一个可以生成各种图表的api

运用Squidoo进行网站推广全攻略(四)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 大家好,这是我们运用Squidoo进行WEB 2.0网站优化推广图文全攻略的第四篇了,在上一篇教程<运用Squidoo进行WEB 2.0网站优化推广图文全攻略(三 元素美化镜头篇)>中,我们建立了一个镜头的介绍模块,以及一个简单的博客RSS模块,我想你一定还记得上次最后我们看到的那一大串问号,也就是下面这张图片: 但是不知道大家有没有注意,第一行问号的那个PHP是正常显示的,事实上,我这篇博文名叫<百钱百鸡问题的PHP程序代码>,很巧

jQuery validate插件功能与用法详解_jquery

本文实例讲述了jQuery validate插件功能与用法.分享给大家供大家参考,具体如下: 前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度! 1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidat

jquery validate 自定义验证方法介绍 日期验证_jquery

jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法,可以让用户来自定义验证规则. 案例一: 复制代码 代码如下: //自定义验证            $.validator.addMethod("isPositive",function(value,element){                var score = /^[0-9