自定义表单认证控件
来源：互联网 发布：阿里云主机搭建svn 编辑：程序博客网 时间：2024/05/21 10:54
页面下单时，常需要对页面用户填选值输入规则验证，通常情况下，需要写大量的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.
- 自定义表单认证控件
- angular表单认证大全&angular表单控件
- 使用Login控件执行自定义认证
- 【荐】深入Angular自定义表单控件
- shiro表单登录认证及退出（自定义form认证器）
- 创建完全支持dojox.form.manager的自定义表单控件
- 主题：Web自定义表单集成FusionCharts图形控件
- 自定义表单中计算控件的插件代码
- 伪元素表单控件默认样式重置与自定义大全
- Form 表单认证
- Form表单认证
- shiro- session，自定义FormAuthenticationFilter（表单认证器）-->实现验证码校验
- QuickPager asp.net 分页控件、表单控件等自定义控件下载 和介绍 【2009.05.15更新】
- QuickPager asp.net 分页控件、表单控件等自定义控件下载 和介绍 【2009.09.07更新】
- 表单控件
- 自定义表单
- 如何运用 Form 表单认证
- 如何运用 Form 表单认证
- 最近帮同学做网页作业。。有个小疑问。。
- ssh常用命令
- 天津实行病历书写规范 杜绝“天书病历”有良方
- PHP 正则判断中文 UTF-8 & GBK
- 文件备份好工具
- 自定义表单认证控件
- OpenVpn 的俩中工作模式
- Immutable模式与string类的实现
- 初始
- va_list、va_start、va_arg、va_end的原理与使用
- 关于政府招标的处理
- 条款01：视C++为一个语言联邦
- 重拾VB之四，日志加强篇
- Python标准库-random模块
