Chinaunix首页 | 论坛 | 博客
  • 博客访问: 554529
  • 博文数量: 855
  • 博客积分: 40000
  • 博客等级: 大将
  • 技术积分: 5005
  • 用 户 组: 普通用户
  • 注册时间: 2008-10-16 19:08
文章分类

全部博文(855)

文章存档

2011年(1)

2008年(854)

我的朋友

分类:

2008-10-16 19:10:26

    简化Ajax 和 开发,第 3 部分: 基于DOM、Script 和 JSP 标记文件构建 UI 特性

在本系列的第 1 部分,您了解了如何生成用来发送 Ajax 请求和处理 Ajax 响应的 JavaScript 代码。第 2 部分展示了如何使用约定和 JSP 标记文件创建 HTML 表单以最小化设置和配置。在本系列的第 3 部分中,您将了解如何开发基于 JavaScript 的客户端验证器和服务端验证器,后者被实现为支持 JavaScript 客户端验证器的 JSP 标记文件。此外,您还将了解如何使用资源包,它们会在更改后自动重载,而不需要重启应用程序。

    客户端验证十分有用,因为它减少,甚至不需要将表单返回给用户以改正错误。但是,基于 JavaScript 的验证还不够,因为如果数据通过程序提交给,或用户浏览器禁用了 JavaScript,这种验证都会被绕开。本文展示如何实现客户端和端验证。

    创建客户端验证器的层次结构

    本节展示如何使用构造函数和 JavaScript 中的原型来构建对象层次结构,用于验证用户在 Web 浏览器中的输入。本节的所有代码都可以在示例应用程序的valid.js 文件中找到。

    开发基础验证器

    在 JavaScript 中,可以结合使用函数和 new 操作符来创建对象。“构造函数” 必须使用 this 来恰当地初始化对象属性。清单 1 给出了 Validator() 函数,该函数有 4 个参数:表单名称、元素名称、ID 和消息。这些参数的值作为属性在当前对象中。

    同一个构造函数创建的对象可以共享属性,这些属性在 prototype 对象中。在清单 1 中,defaultMsgIndex 是所有实例共享的一个属性,这些实例由 new Validator(...) 创建。当您试图访问属性或对象的方法时,JavaScript 引擎首先在对象的成员中查看。如果没有找到,引擎就会验证对象的原型(对象可能具有自己的原型)。因此,该原型链可用于实现继承(在后面讨论)。在本文的示例中,Validator 是对象层次结构的基础。


    清单 1. Validator() 构造函数

    
    function Validator(formName, elemName, outId, msg) {
    if (formName)
        this.formName = formName;
    if (elemName)
        this.elemName = elemName;
    if (outId)
        this.outId = outId;
    if (msg)
        this.msgList = ["", msg];
}
Validator.prototype.defaultMsgIndex = 0;
            

    任何 JavaScript 函数都可以成为对象的方法。只需在对象构造函数中使用 this.methodName = functionName。由于方法通常可以被同一个构造函数创建的所有实例共享,所以可以将该方法与构造函数的原型进行关联。在这里可以通过使用 constructorName.prototype.methodName 实现,如清单 2 所示:


    清单 2. 验证器的 getFormValues() 方法

    
Validator.prototype.getFormValues = function() {
    var elemValues = new Array();
    var form = document.forms[this.formName];
    var formElements = form.elements;
    for (var i = 0; i < formElements.length; i++) {
        var element = formElements[i];
        if (element.name == this.elemName) {
            var elemType = element.type.toLowerCase();
            if (elemType == "text" || elemType == "textarea"
                    || elemType == "password" || elemType == "hidden")
                elemValues[elemValues.length] = element.value;
            else if (elemType == "checkbox" && element.checked)
                elemValues[elemValues.length]
                     = element.value ? element.value : "On";
            else if (elemType == "radio" && element.checked)
                elemValues[elemValues.length] = element.value;
            else if (elemType.indexOf("select") != -1)
                for (var j = 0; j < element.options.length; j++) {
                    var option = element.options[j];
                    if (option.selected) {
                        elemValues[elemValues.length]
                            = option.value ? option.value : option.text;
                    }
                }
        }
    }
    return elemValues;
            }

    清单 2 中的 getFormValues() 方法返回表单元素(它的名称恰好与 elemName 属性的值相同)的值。代表 Web 浏览器中的 HTML 表单的 DOM 对象通过 document.forms[this.formName] 获得。然后,getFormValues() 遍历表单的 elements,根据 HTML 的类型处理每一个元素。

    如果是文本、密码或隐藏字段,getFormValues() 方法只将元素的值添加给所返回的数组。如果元素的类型为复选框或单选框,只有选中 HTML 元素时,才会添加值。最后,如果元素是一个列表,选中项的值就会存储到返回的数组中。

    层次结构中的每个验证器都需要一个方法来验证单个值。对于基础的 Validatorverify() 方法(如清单 3 所示)返回 0,但其他验证器将用其自身方法代替这个方法。由 verify() 返回的值用来在 msgList 内查找消息。

[1]       

【责编:Chuan】

--------------------next---------------------

阅读(270) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~