【MVVM】- Avalon验证器duplexHooks

时间 2019-11-17

标签 MVVM avalon 验证 duplexhooks 繁體版

原文原文链接

avalon验证器: 主要用来限定某些元素的格式输入3d

界面code

<!-- ms-duplex-limit：验证目标元素 -->
<body ms-controller="test">
<input type="text" ms-duplex-limit="aaa" data-duplex-limit="10">{{aaa}}<br>
<input type="text" ms-duplex-email="bbb">{{bbb}}

Javascript操做代码：blog

//自定义验证器limit：输入字符个数不能大于limit
avalon.duplexHooks.limit={
	get:function(str,data){ //str:绑定的元素的值 data:全部的相关数据
	var limit=parseInt(data.element.getAttribute("data-duplex-limit"));
	if(str.length>limit){
		//提取0-limit下标的字符串，若未设置则不作限制
		return data.element.value=str.slice(0,limit);
	}
	return str;
}
}

vm=avalon.define({
	$id:"test",
	aaa:1111,
	bbb:"sdssds@qq.com"
});

效果图：ip