简单易用的跨浏览器 智能掩码和表单验证

分享于 

8分钟阅读

Web开发

  繁體

免责声明

作者不接受任何效果。否定或者否定的责任,这个代码可以能对你,你的计算机,你的狗。 用你自己的风险。 ( 似曾相识的感觉我也喜欢的声明)。

快速而肮脏的旅行

所以你不喜欢读长文章或者没有时间,然后下载源文件,运行你首选浏览器的HTML文件。

背景

尽管内部工作要求你成为高级Web开发人员理解和改进它,但你只需要对HTML和JavaScript使用基本知识。

介绍

构建 跨浏览器 掩码并验证数据不是简单的任务。 这个主题没有明确的解决方案,但我们可以用一些假设来解决这个问题。 在进入代码之前,让我们先来看看一些关键字:

  • 最大大小:不允许在UI字段上输入无限的数据。
  • 事件: 最困难的跨浏览器 主题。 我们将讨论按键x keyDown事件在主要浏览器上的差异。
  • 掩码:不允许用户将不兼容的数据输入到文本框中,如在数字字段中输入"abc"。
  • 智能掩码: 不允许用户将无效数据输入到文本框中,如时间字段中的" 99: 99"。
  • 验证: 有些数据类型在用户输入的时候不实际,因此系统会检查整个输入集,以检查表单提交事件的不一致。
  • 交叉浏览(。不破坏其它浏览器): 系统应该在任何主要浏览器上无缝运行。

基础( 或者交谈很便宜。)

让我们从包含一些数据输入字段开始填充的页面开始。 validationDemo.htm 页面看起来像下面的图片:


虽然页面不太美观,但它可以帮助我们测试我们的策略。 让我们看一下它的HTML代码:

...
 <fieldset><legend>Search block</legend> F1 number(3)<inputai_name="myNumber"type="text"ai_block="search"><br/> F2 number(3,2) <inputid="number3point2"type="text"ai_block="search"/>...

如你所见,页面( 除了页面底部的配置调用外) 上没有任何 JavaScript,并且没有关于字段应该如何运行的信息。

演示中,我们有两个不同的块应该单独验证。 接下来要做的是创建一个非耦合的配置页面的方法。 对于复杂系统,我们可以为需要验证的每个页面构建一个XML文件,但对于小型演示,我们构建一个XML文件( validationDemo.xml )。

...<validation><fieldname="myNumber"block="search|insert"personality="number"precision="3,0"required="true"/><fieldid="number3point2"block="search"personality="number"precision="3,2"/><fieldid="date"block="search"personality="date"/>...

XML几乎是自解释的,因为它只指定每个字段的行为。 例如,number3point2 文本字段应允许 3位位于小数点之前,以及 date 字段后的2字段应允许( 猜猜看)。 我们有两种在页面上查找元素的不同方法: 按 IDNAME。 如果你有一个不通过不同的UI块重复它的行为的单元,则 ID 是你的选择。 现在看一下我们页面的F1和F7字段。 它们的行为方式相同,并且存在于页面的不同块中。 在这种情况下,我们将它的配置设置为 NAME,因这里不重复XML标记,只是通知元素"搜索"和"插入"块。 由于远远超出本文范围,NAME 属性不映射到 HTML NAME 属性。

智能蒙板

我认为,智能面具应该成对出现: 一个实时过滤掩码和post验证辅助函数。 我们的小框架有一些可以使用和作为示例的模板。

在安装过程中,所有掩码函数都可以动态附加到 pageValidator,而不会产生错误,即使你需要。 我们通过使用 array的掩码 inside 来实现 pageValidator 和测试一个特定掩码在使用之前的存在。

...
 case'time' : //15:00 mask = "TimeMask";
...
 if( mask!= null )
 if( pageValidator.Masks[mask]!= null )
 oSrcElement.onkeypress = pageValidator.Masks[mask];
...

因为这是一个先进的特性,让我们继续为我们的演示的最后一个行为,验证输入。

验证( 或者信任,但检查)

现在,我们还有一个步骤要走: 输入验证。当用户单击验证按钮并触发作为参数指定的验证时,这里步骤将执行,如你的测试页所示:

<input type="submit" value="Validate Search" id="Submit2" onclick="return pageValidator.IsValidForm('frmPage', 'search');"/>

你必须通过要验证的表单。 如果省略该节,则默认情况下将全部删除,整个窗体将被验证。 由于每个页面对象都有它的智能,所以 IsValidForm 函数只检查这些规则的完整性,将一个"异常"css类应用到带有问题的元素。

"]>"字符 vs 验证

以下是关于 ]> 字符的一些注释: 在目前,除了在演示页面中使用的自定义DTD外,没有浏览器符合演示页面中使用的自定义 DTD,尽管事实上它是完全有效的。 这意味着如果使用这里方法,页面将显示 ]> 字符。 获取有效XHTML页面的另一种方法是通过下载custom文件并添加你的规则来创建一个定制的DTD。 似乎应该在所有成本下避免,但我们现在几乎没有选择。

如果页面验证不关心你,你可以安全地从 HTML DOCTYPE 标签中删除自定义 block,并且很高兴 !

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

结束语

这就是simple-but-effective抽象层的内容 ! 可以看到,它非常简单,因这里它可以很容易地应用于小型或者中小型网络系统。 它的内部工作可能不是简单或者容易理解的,因为主要浏览器的复杂差异。 所有的代码都是免费的,只要你维护它的作者的引用,就可以免费使用。

引用

你可以找到的最佳资源:

历史记录

  • 07-27-2006: 原始文章
  • 08-02-2006: 更改功能 _GetElementsByAttribute(aName, aValue, tName) 在 events.js ( 行 117 -118行) 文件中,以适应与 null 对象相关的一些 Opera 问题。 感谢cowdart给我带来了这个问题。
  • 11-14-2006: 简化了文章,着重于使用而不是内部工作
  • 11-16-2006: 添加了一个UML模型( Jude社区软件) 来帮助本地化方法和类

相关文章