网上有朋友询问到如何在可编辑表格中实现密码框,其实思路很简单:第一是生成type为password的input;第二是对生成好的input元素构建validatebox同时写入密码规则。
实现代码:
$.extend($.fn.datagrid.defaults.editors, { psw: { init: function(container, options) { var input = $('<input class="datagrid-editable-input" type="password"/>').appendTo(container); if(!$.fn.validatebox.defaults.rules.safepass) { $.extend($.fn.validatebox.defaults.rules, { safepass: { validator: function(value, param) { return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value)); }, message: '密码由字母和数字组成,至少6位' } }); } input.validatebox(options); return input; }, getValue: function(target) { alert($(target).val()); alert(target.value); return $(target).val(); }, setValue: function(target, value) { $(target).val(value); }, resize: function(target, width) { var input = $(target); if($.boxModel == true) { input.width(width - (input.outerWidth() - input.width())); } else { input.width(width); } } } });
注意:对于validatebox的rules扩展写在editor内部了,拿到外面扩展rules也可以,效果是一样的;同时对于密码规则的正则表达式可自行修改定义。
如果想在非编辑状态也显示为*号,给密码字段加上一个formatter就可以了:
function PasswordFormatter(value) { return '******'; }
本想考虑着把两个密码框的校验也做进去,不过这样会使问题变得较为复杂,而且功能上也不是很需要,所以这个地方目前就实现了简单的功能。
使用方式:
<th data-options="field:'password',width:150,align:'center',editor:{type:'psw',options:{validType:'safepass',required:true}}">密码</th>