自定义表单认证控件
页面下单时，常需要对页面用户填选值输入规则验证，通常情况下，需要写大量的JS脚本完成客户端校验，如果复杂一些，除验证基本的数据规则外，还需要动态的控制页面验证的样式，徒劳而重复！所以通过简单的封装可以完成批量表单元素的规则验证。
本文通过采用JQUERY类库框架完成表单元素验证。
§、实现效果
§、分析设计
注册FORM中HTML元素属性，在onblur时触发验证规则，onfocus时显示默认提示信息，在FORM submit时自动遍历HTML符合规则的元素进行合法性验证。
注册元素属性、事件有两种方式：
1、 完全与元素脱离，仅在页面初始化-DOM元素加载完成后，动态为DOM元素附加校验规则，设定默认提示及样式、出错提示及样式、验证规则。
2、 直接在页面元素HTML标记上增加相应的待验证属性标识。
$、代码实现
(function($) {
var isSubmit = true;
$.ToolTip = {
CallBackEvent: null,
RetObj: { Item: null, ErrMsg: "", ErrorCode: 0 }
};
$.ToolTip.AddParas = function(parameters) {
$.extend($.ToolTip, parameters || {});
};
$.fn.tooltip = function(options) {
var opts = $.extend({}, $.fn.tooltip.defaults, options);
this.each(function() {
if ($(this).attr("tipctrid") != undefined) {
var dObj = $("#" + $(this).attr("tipctrid"));
if (dObj.attr('tip') != undefined) {
$(this).focus(function() { $.SetTip(dObj.get(0).id, dObj.get(0), "tip", "HelpDiv"); });
}
// Validate
if (dObj.attr('reg') != undefined) {
$(this).focus(function() {
}).blur(function() {
if ($.EnableBlur) {
$.oneIsValid(dObj.get(0));
}
});
}
}
else {
if ($(this).attr('tip') != undefined) {
$(this).focus(function() { $.SetTip($(this).get(0).id, $(this).get(0), "tip", "HelpDiv"); });
}
// Validate
if ($(this).attr('reg') != undefined) {
$(this).focus(function() {
}).blur(function() {
if ($.EnableBlur) {
$.oneIsValid($(this).get(0));
}
});
}
}
});
if (opts.onsubmit) {
$('form').submit(function() { return $.IsPageValid(); });
}
};
$.EnableBlur = true;
$.IsPageValid = function() {
isSubmit = true;
$('form').find('[reg]').each(function() {
if ($(this).attr("tipctrid") != undefined)
$.oneIsValid($(this).attr("tipctrid"));
else
$.oneIsValid($(this).get(0));
});
if ($.ToolTip.CallBackEvent && typeof $.ToolTip.CallBackEvent == "function") {
try {
$.ToolTip.CallBackEvent();
if ($.ToolTip.RetObj.ErrorCode != 0) {
$.SetTip($.ToolTip.RetObj.Item.id, $.ToolTip.RetObj.Item, null, "TipDiv", $.ToolTip.RetObj.ErrMsg);
$($.ToolTip.RetObj.Item).addClass('tooltipinputerr');
isSubmit = false;
}
else {
$($.ToolTip.RetObj.Item).removeClass('tooltipinputerr');
$("#div" + $.ToolTip.RetObj.Item.id).hide();
}
}
catch (e) { }
}
return isSubmit;
};
//验证单个是否验证通过
$.oneIsValid = function(elem) {
var id = elem.id;
var srcTag = elem.tagName;
var stype = elem.type;
var maxValue = $(elem).attr('maxValue');
var minValue = $(elem).attr('minValue');
if ($.IsHiddenValidate($(elem))) return true; //continue,保留验证属性,显示时继续验证
switch (srcTag) {
case "INPUT":
if (stype == "text" || stype == "password") {
var thisReg = new RegExp($(elem).attr('reg'));
if (!thisReg.test(elem.value)) {
$(elem).addClass('tooltipinputerr');
$.SetTip(id, elem, "errortip", "TipDiv");
isSubmit = false;
}
else if ($(elem).attr('compareto') != undefined) { //内容比较
if (elem.value != $("#" + $(elem).attr('compareto')).val()) {
$.SetTip(id, elem, "comparetip", "TipDiv");
$(elem).addClass('tooltipinputerr');
isSubmit = false;
}
else {
$(elem).removeClass('tooltipinputerr');
$("#div" + id).hide();
}
}
else if ($(elem).attr('not') != undefined) {
if (elem.value == $(elem).attr('not')) {
$.SetTip(id, elem, "nottip", "TipDiv");
$(elem).addClass('tooltipinputerr');
isSubmit = false;
}
else {
$(elem).removeClass('tooltipinputerr');
$("#div" + id).hide();
}
}
else {
$(elem).removeClass('tooltipinputerr');
$("#div" + id).hide();
}
if (thisReg.test(elem.value) && maxValue != undefined && minValue != undefined) {
if (parseInt(elem.value) > parseInt(maxValue)) {
isSubmit = false;
$.SetTip(id, elem, "maxerrtip", "TipDiv");
}
else if (parseInt(elem.value) < parseInt(minValue)) {
isSubmit = false;
$.SetTip(id, elem, "minerrtip", "TipDiv");
}
else {
$("#div" + id).hide();
}
}
}
break;
case "SELECT":
case "TEXTAREA":
var thisReg = new RegExp($(elem).attr('reg'));
if (!thisReg.test(elem.value)) {
$(elem).addClass('tooltipinputerr');
$.SetTip(id, elem, "errortip", "TipDiv");
isSubmit = false;
} else {
$(elem).removeClass('tooltipinputerr');
$("#div" + id).hide();
}
break;
}
if ($.ToolTip.CallBackEvent && typeof $.ToolTip.CallBackEvent == "function") {
try {
$.ToolTip.CallBackEvent();
if ($.ToolTip.RetObj.ErrorCode != 0) {
$.SetTip($.ToolTip.RetObj.Item.id, $.ToolTip.RetObj.Item, null, "TipDiv", $.ToolTip.RetObj.ErrMsg);
$($.ToolTip.RetObj.Item).addClass('tooltipinputerr');
isSubmit = false;
}
else {
$($.ToolTip.RetObj.Item).removeClass('tooltipinputerr');
$("#div" + $.ToolTip.RetObj.Item.id).hide();
}
}
catch (e) { }
}
return isSubmit;
};
$.SetTip = function(id, elem, tipname, tipClass, errmsg) {
if (tipname != null) {
var tip = $(elem).attr(tipname);
if (errmsg == undefined && tip != undefined) {
var thisReg = new RegExp(/_/g);
errmsg = tip.replace(thisReg, " ");
}
}
if (errmsg != undefined && errmsg != "") {
if ($("#div" + id).length == 0) {
var div = "<div id='div" + id + "' class='" + tipClass + "'></div>";
$(div).appendTo($("body")).html(errmsg)
.css({ left: $.GetLeft(elem) + $(elem).width() + 'px', top: $.GetTop(elem) - 16 + 'px' });
if (!document.all)
$("#div" + id).css({ left: $.GetLeft(elem) + $(elem).width() + 11 + 'px' });
}
else {
$("#div" + id).html(errmsg);
}
$("#div" + id).removeClass();
$("#div" + id).addClass(tipClass).show();
}
};
//隐藏的控件不做验证 xujian 2008-12-20
$.IsHiddenValidate = function(obj) {
var IsNeedValidate = false;
if ($(obj).css("display") == "none" || $(obj).css("visibility") == "hidden") {
return true;
}
var list = $(obj).parents(":hidden");
for (var i = 0; i < list.length; i++) {
if ($(obj) == $(list[i]) || list.css("display") == "none"
|| list.css("visibility") == "hidden") {
IsNeedValidate = true; break;
}
}
return IsNeedValidate;
};
$.ResetValidator = function() {
$(".TipDiv").remove();
$(".HelpDiv").remove();
},
$.extend({
GetTop: function(object) {
var go = object;
var oParent, oTop = go.offsetTop;
while (go.offsetParent != null) {
oParent = go.offsetParent;
oTop += oParent.offsetTop;
go = oParent;
}
return oTop + 20;
},
GetLeft: function(object) {
var go = object;
var oParent, oLeft = go.offsetLeft;
while (go.offsetParent != null) {
oParent = go.offsetParent;
oLeft += oParent.offsetLeft;
go = oParent;
}
return oLeft;
},
onsubmit: true
});
$.fn.tooltip.defaults = { onsubmit: true };
$(document).ready(function() { jQuery('select[reg],input[reg],textarea[reg]').tooltip() });
})(jQuery)
考虑到下述情况，脚本中增加了特殊方法：
1、 重置页面错误提示信息
$.ResetValidator
2、 隐藏的控件不做验证
IsHiddenValidate
3、 自定义回调验证事件
$.ToolTip.CallBackEvent
Eg:
$.ToolTip.AddParas({ CallBackEvent:function() { $("#divselectArea").hide(); } }); //特殊处理在FORM提交之前，也可预先通过调用$.oneIsValid判断单个元素合法性，通过$.IsPageValid判断所有标记元素的合法性。
§、页面应用
采用第一种方式注册待验证元素属性， 注册页面元素：
<input name="txtAccount" type="text" maxlength="40" id="txtAccount" reg="\S+" tip="请输入您要充值的帐号。" errortip="请输入您要充值的帐号。" onfocus="SubmitOrder.ShowPlayerTypeTip();" /> <select errortip="" style="width: 182px;" onchange="PageRender.CreateGroup();" reg="\d+" id="selectArea" class="tooltipinputerr"></select>
§、总结
上述实现仅考虑到简单情况下的应用，结合不同的产品应用场景，可以做不同的定制。
当然目前有许多种类的FORM客户端验证控件，很强大也很复杂，考虑到不同的情况未必适合我们使用，eg:复杂的交换、置换逻辑、 Http Loading Time很苛刻的情况下etc.