当前位置: 首页 > 中文手册 > jQuery Validator message 自定义错误提示信息

jQuery Validator message 自定义错误提示信息

jQuery Validator实现了非常强大的错误提示信息功能。默认情况下,你无需定义任何的错误提示信息,jQuery Validator就能自动完成所有的错误提示信息。

当然,jQuery Validator也支持你使用setMessage()方法自定义错误提示信息。下面我们来介绍jQuery Validator的错误提示消息生成机制。

语法

jQuery Validator 1.0 新增setMessage()方法支持以下两种用法:

用法一:一次定义单个提示信息。

setMessage(key, msg, global)

用法二:一次定义多个提示信息。

setMessage(msgs, global)

参数

参数描述
keyString类型提示信息的索引键值。
msgString/Function类型指定的提示信息字符串,或者动态返回提示信息字符串的函数。
msgsObject类型以多个key:msg的形式,同时定义多个提示信息。
global可选/Boolean类型指示定义的提示信息是否为全局提示信息。如果是全局信息,则所有实例均可使用;否则只有当前实例可以使用。该值默认为false

参数 msg

参数msg可以是一个字符串,也可以是一个返回字符串的函数。此外,如果它为特殊值false,则表示不进行错误渲染(即不提示错误信息)。

如果msg是一个函数,则jQuery Validator在调用时,会为其传入如下参数:

function(context){
	// context 本次校验的上下文对象
	// this 指向全局window对象
}

参数msg的提示信息还支持占位符(函数返回的提示信息也同样支持),jQuery Validator会自动解析占位符并替换为相应的文本内容。其支持的占位符如下:

  • {property}property可以是上下文对象context的任意属性。例如:{label}{expected}

  • {#id}id可以是页面上任意表单元素的id属性值,jQuery Validator会将其替换为该表单元素的label文本。

  • {$name}name可以是页面上任意表单元素的name属性值,jQuery Validator会将其替换为该表单元素的label文本。

  • {#index}{$index}index是上下文对象context的属性$relatedDoms的数组索引,jQuery Validator会将其替换为该表单元素的label文本。

参数 key

参数key用于指定在什么情况下显示对应的提示信息。它可以是以下组成(优先级依次从高到低):

  • validator + "." + trigger

  • validtor + "." + child (如果存在child)

  • validator

  • trigger

以上的validatortriggerchildtrigger均是上下文对象context的属性。

当jQuery Validator 校验不通过时,如果当前上下文对象context的属性满足上述任一条件,则会提示对应的错误信息(优先提示优先级较高的信息)。

作为jQuery Validator的原型方法,setMessage()一般在实例上调用。不过考虑到预定义全局提示信息时,可能还没有创建任何实例,因此setMessage()也支持直接在原型上直接调用,即:V.fn.setMessage(),此时无论global参数是省略还是其他任意值,都会被视为true,从而将其定义为全局提示信息。

如果没有特殊需要,建议尽量将提示信息统一定义到全局上。

校验规则内的message属性

除了使用setMessage()预定义错误提示信息外,jQuery Validator还支持你在定义校验规则中通过message属性动态定义仅用于该校验规则的提示信息。如果message属性是字符串,表示只要该规则校验不通过,一律提示该信息字符串;如果message属性是对象,请参照参数msg的说明;如果messagefalse,则表示不进行错误渲染。

v.define("beginTime", {
	format: "date",
	compare: "this < now",
	message: "{label}必须小于当前时间" // 任何错误均提示该信息
});

v.define("endTime", {
	format: "date",
	compare: "this > now",
	message: {
		compare: "{label}必须大于当前时间"  // 只有compare校验器校验失败提示该信息
		// 其他校验失败,均沿用相应设置
	}
});

上下文对象context的message属性

此外,为了便于开发人员对jQuery Validator进行二次开发时,能够实现一些特殊的校验提示需求,开发人员可以设置context对象的message属性,其用法与规则对象中的message属性用法相同,但context.message具有最高的优先级。

示例&说明

我们可以通过jQuery Validator内置的提示信息来进行说明:

// 全局消息配置
V.fn.messages = {
	"required": "{label}不能为空!",
	// 示例:required:true ( validator为required )
	// 当输入为空时提示该信息
	
	"required.checked": "请先选择{label}!",
	// required:true ( validator为required )
	// 当前表单元素是复选框/单选框,且没有选中时,trigger为"checked",提示该信息
	
	"equalsTo": "{label}必须与{#0}输入一致!",
	// equalsTo:"#password" ( validator为equalsTo )
	// 当前表单输入不等于#password的输入时,提示该信息

	"==": "{label}必须等于{expected}!",
	// range:"[10]" ( validator为range )
	// 表单输入不等于10时,trigger为"==",提示该信息

	">=": "{label}必须大于或等于{expected}!",
	// range:"[18,100]" ( validator为range )
	// 表单输入不满足大于等于18时,trigger为">=",expected为18,提示该信息
	
	">": "{label}必须大于{expected}!",
	// range:"(18,100]" ( validator为range )
	// 表单输入不满足大于18时,trigger为">",expected为18,提示该信息
	
	"<=": "{label}必须小于或等于{expected}!",
	// range:"[18,100]" ( validator为range )
	// 表单输入不满足小于等于100时,trigger为"<=",expected为100,提示该信息
	
	"<": "{label}必须小于{expected}!",
	// range:"[18,100)" ( validator为range )
	// 表单输入不满足小于100时,trigger为"<",expected为100,提示该信息

	"length.==": "{label}的长度必须等于{expected}!",
	// length:"[18]" ( validator为length )
	// 表单输入长度不等于18时,trigger为"==",提示该信息
	
	"length.>=": "{label}的长度必须大于或等于{expected}!",
	// length:"[6,16]" ( validator为length )
	// 表单输入长度不满足大于等于6时,trigger为">=",expected为6,提示该信息
	
	"length.>": "{label}的长度必须大于{expected}!",
	// length:"(6,16]" ( validator为length )
	// 表单输入长度不满足大于6时,trigger为">",expected为6,提示该信息
	
	"length.<=": "{label}的长度必须小于或等于{expected}!",
	// length:"[6,16]" ( validator为length )
	// 表单输入长度不满足小于等于16时,trigger为"<=",expected为16,提示该信息
	
	"length.<": "{label}的长度必须小于{expected}!",
	// length:"[6,16)" ( validator为length )
	// 表单输入长度不满足小于16时,trigger为"<",expected为16,提示该信息
	
	"format.number": "{label}必须是有效的整数!",
	// format:"number" ( validator为format )
	// 表单输入不是整数时,child为"number",trigger为"number",提示该信息

	"format.number/money": "{label}必须是整数或最多保留两位的小数!",
	// format:"number/money" ( validator为format )
	// 表单输入不是整数或保留两位以内的小数时,child为"number",trigger为"number/money",提示该信息
	
	"format.number/double": "{label}必须是有效的整数或小数!",
	// format:"number/double" ( validator为format )
	// 表单输入不是整数或保留两位以内的小数时,child为"number",trigger为"number/double",提示该信息

	"format.date": '{label}必须为"{dateFormat}"格式的有效时间!',
	// format:"date/datetime" ( validator为format )
	// 表单输入不是"yyyy-MM-dd HH:mm:ss"格式时,child为"date",trigger为"date/datetime",提示该信息
	
	"file": "{label}的格式不正确,必须为{expected}等格式!",
	// file: true ( validator为file )
	// 表单输入不是指定文件格式时,trigger为"file",提示该信息

	"default":"{label}的格式不正确!"
	// 如果找不到对应的提示信息,默认提示该信息
};

下面我们来看一个具体的示例:运行代码

var v = new V(); // 创建一个jQuery Validator实例对象

// 为当前实例自定义required校验器的错误提示
v.setMessage("required", "我是非空校验的自定义提示");

// 为全局(所有实例)自定义length校验器trigger为"=="时的错误提示
v.setMessage("length.>=", "当前是{validator}校验器,{label}的长度必须大于等于{expected}位", true);

// 为当前实例一次性自定义多个错误提示
v.setMessage({
	"range.>": "自定义:{label}必须大于{expected}",
	"length.<=": "自定义:{label}的字符位数必须小于等于{expected}"
});


// 为全局(所有实例)定义错误提示
V.fn.setMessage({
	"format.number/money": "请输入有效的金额"
});
12 1
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。