您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2016年06月02日 05:07

原创 jQuery Validator renderError 自定义错误渲染行为

291 次浏览 读完需要≈ 6 分钟

内容目录

jQuery Validator的renderError()方法用于处理表单校验不通过时的错误渲染。简而言之,你可以通过重写该方法自定义界面上错误信息的提示方式。

如果你不自定义错误渲染行为,jQuery Validator 默认的renderError()方法将采用jQuery对象实例的tips(message)方法来提示错误信息(message)。如果该方法不存在(如果你没有定义该方法的话),则使用window.alert(message)来提示错误信息。

jQuery Validator 推荐你使用layer来扩展jQuery对象实例的tips()方法,从而进行常规表单的错误信息提示。例如:

// 为了让提示更美观,扩展jQuery原型对象,添加基于layer支持的tips方法
$.fn.tips = function(msg, delay){
	layer.tips(msg, this, delay || 3000);
};

当然,jQuery Validator也支持自定义renderError(),你可以完全按照自己的方式来进行错误渲染。

语法

jQuery Validator 1.0 新增。jQuery Validator支持通过以下3种方式自定义renderError()

// 自定义全局(所有实例可用)的renderError()
V.fn.renderError = handler;

// 自定义当前实例(仅该实例可用)的renderError()
v.renderError = handler;

// 自定义当前校验规则(仅该校验规则可用)的renderError()
// 在校验规则对象中指定该属性
renderError: handler

参数

参数 描述
handler Function类型指定的错误渲染处理函数。

jQuery Validator会为函数handler传入如下参数:

function(message, $target, context){
	// message 用于直接显示的错误提示信息
	
	// $target 当前用于错误渲染的表单元素的jQuery对象
	// 除非校验规则中指定了errorFocus,该表单元素一般就是校验不通过的表单元素
	// 如果不是基于表单输入的校验,$target一般为null
	
	// context 本次校验的上下文对象
	
	// this 指向当前jQuery Validator 实例
}

如果同时存在多种方式的renderError(),则按照如下优先级选取第一个存在的renderError()

// renderError()的优先级
当前校验规则的 > 当前实例的 > 全局的

示例&说明

以如下HTML表单为例:

<form action="https://codeplayer.vip/">
	<div>
		<label>用户名</label>:
		<input id="username" name="username" type="text" >
	</div>	
	<input type="submit" value="提交" />
</form>

我们可以使用renderError()在校验规则中自定义错误渲染行为:运行代码

// 在表单提交时执行校验
$("form").v("submit", {
	"#username": {
		extend: "username", // 继承内置的"username"规则
		renderError: function(message, $target, context){
			alert("这是自定义的错误提示方式:" + message);			
		}
	}
});
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单