`
从此醉
  • 浏览: 1117815 次
  • 性别: Icon_minigender_1
  • 来自: US
社区版块
存档分类
最新评论

67. 表单提交与校验

 
阅读更多

表单提交

绝大部分应用程序都需要从用户获得输入,其中很大部分便是以表单输入的形式。一个表单,从用户输入系统接收到数据处理,会经历几个普遍的阶段。一个完备的表单提交流程具备以下几个不同阶段的功能:

  • 限制:根据字段的数据类型,表单对输入控件所接受的字符做限制。例如,文本类型的字段限制长度,数字类型的字段就不接受输入字母字符,日期时间类型的字段如果采取直接输入也可以限制输入的字符类型和格式。
  • 转换:系统按各字段的数据类型,解析用户的原始输入,其转换成指定的数据类型,如上述的数字、日期时间或列表等。
  • 校验:系统依照业务逻辑的要求,对各个字段转换好的数据进行校验,如非空,数字和日期时间的取值范围,特殊号码或地址的格式要求等等。如果某个字段的数据没有通过校验,系统就会返回提示信息给用户;如果全部校验通过,则表单输入的数据已经可用,进入下一阶段的处理。
  • 应用:到上一阶段为止,一个由表单输入数据的完整过程已经结束,接下来要怎样使用这些数据,因系统而异。可以直接在业务逻辑里分析、计算和存储它们,或者在普及的模型-视图-控制器(MVC)设计里先将它们更新到一个数据模型里再做后续应用。

上面说的表单输入的三个主要阶段在现实世界里又因为系统采用的技术和架构有不同的具体情况。

发生在哪

在广泛应用的客户端服务器架构下,这些阶段是发生在客户端还是服务器端?在传统的桌面客户端和浏览器两类情况下有差异。首先,限制的功能始终位于客户端,原因很简单,这种特性要求即时的响应,把每次按键或鼠标动作都经由网络发到服务器做判断再返回,既在时间上很难满足,又成本过高。转换和校验阶段的工作则有更多选项。如果是桌面客户端,它们可以根据程序员的喜好或系统的架构在客户端和服务器端之间选择一个完成。在web应用程序中,传统上转换和校验都在服务器端完成,为了给用户提供更及时友好的反馈,在网页前端通常也会先采用JavaScript进行这两项工作,但在服务器端的业务逻辑使用或存储这些用户输入前,仍然会再进行一次转换和校验,这样做,既是因为服务器端程序从HTTP获得的原始数据只是字符串,数据被存入数据库之前须被转换成特定的数据类型,也是因为浏览器端的脚本在可靠性和安全性上差于服务器端运行的程序。

现成的功能?

桌面和web应用程序在表单设计所属的用户界面开发领域都有很多现成可用的控件集(如桌面环境下的Windows Forms、Java Swing,web开发有服务器端的ASP.NET、JSF,浏览器端的dojo、ExtJS等),用于接受输入的控件或多或少已具备部分的限制和转换阶段的功能,如文本框可通过属性限制输入的文本的长度,日期时间控件只允许输入合理的年月日和时分秒,可从其直接获得输入的日期时间值。不过仍然有许多场合,开发人员要写代码以完成对输入的限制和转换。比如经常用到的数字类型的字段,在dojo和ExtJS这样的web前端控件集里有专门的控件,但在上面提到的其他几个库里都没有。为了只允许向文本框输入与数字有关的字符(数码、小数点、正负号和退格),就可以在它的KeyPress事件里编码,下面是一个C#里的版本:

        this.textBox1.KeyPress += new System.Windows.Forms.KeyPressEventHandler(this.textBox1_KeyPress);
        //Prevent entering nonnumerical characters into the textbox.
        private void textBox1_KeyPress(object sender, KeyPressEventArgs e)
        {
            char keyChar = e.KeyChar;
            bool isNum = false;
            if ((keyChar >= '0' && keyChar <= '9') || keyChar=='+' || keyChar=='-' || keyChar == '.' || keyChar == (char)8)
            {
                isNum = true;
            }
            if (!isNum) e.Handled = true;
        }

数字、日期时间和列表类型字段的输入,很多时候也需开发人员主动进行类型转换。至于校验,很多用户界面框架也有API供调用。例如ASP.NET和JSF两个框架都具备校验非空、长度、值范围的验证器(validator),都可以创建自定义规则的验证器。

验证

验证是三个阶段中变化最多也最复杂的。我们先来看看理想中的验证是什么样的?我们的讨论针对情况相对棘手的web应用程序。首先如前所述,校验在浏览器端和服务器端都发生,前者给用户即时友好的提示,后者进行“真正的”校验以为业务逻辑服务。做校验的API既可以函数的方式(如validateRequired()、validateLength()、validateRange()),也可以类型的方式呈现(如RequiredValidator、LengthValidator、RangeValidator)。未能通过校验时,提示信息可选择显示在要校验的栏位旁边,或者集中显示在表单的某个位置。对栏位少的表单,可以从第一个栏位获得焦点后,依次在每个栏位失去焦点时校验,甚至在用户输入时对每键入一个字符后的值做即时的校验,比如检查密码是否符合规则和强度;对栏位较多的多列的复杂表单,可以在用户输入完成后点击提交按钮时一次性校验,之后再对未通过的栏位做类似的即时校验。既可在设计时为栏位设置校验,也可在运行时动态进行校验。

最后一点需要特别说明。大部分情况下,表单上哪些栏位需要什么校验,在设计时就可以确定。但是在某些情况下,在程序运行时再设置要校验的栏位可以带来我们想要的灵活性。比如在一个通用的校验系统里,我们将可以把要校验的栏位写在某种形式的可配置的参数里,这样当校验不同的表单时,我们只需要修改参数。在下一篇文章里,笔者将演示XPages环境下对表单上的栏位进行动态的非空校验。

分享到:
评论

相关推荐

    ext_表单提交_数据校验

    ### ext_表单提交_数据校验:深入解析与实践 #### 一、文本框输入控件(Ext.form.TextField) 在Ext JS框架中,`Ext.form.TextField`是一种用于收集用户输入的基本控件,它提供了丰富的配置选项来实现数据校验。...

    Js 表单提交验证函数(很全了)

    在JavaScript中,表单提交验证是确保用户输入的数据符合预设规则的重要环节,这有助于防止无效数据的提交,提升用户体验,以及保护服务器免受恶意数据的冲击。本篇将详细介绍JavaScript表单验证函数的一些关键知识点...

    ajax实现提交时校验表单方法

    本文实例为大家分享了ajax提交时校验表单的方法,供大家参考,具体内容如下 方法一: 代码示例:  巧妙设计之处:ajax提交的话,不能够进行校验拦截,设置一个flag来判断,很巧妙的设计之处,故收藏! function ...

    jquery.validate 扩展身份证校验方法

    ### jQuery.validate 扩展身份证校验方法 在前端开发中,对用户输入的数据进行校验...这种方法不仅能够有效提升用户体验,还可以增强表单提交的安全性。对于涉及用户身份验证的应用程序来说,这是一个非常实用的功能。

    Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar

    Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar Java开发案例-springboot-19-校验表单重复提交-源代码+文档.rar Java开发案例-...

    JavaScript的form表单验证中的身份证校验.pdf

    在进行Web应用程序开发时,表单验证是一项非常重要的功能,它可以确保用户输入的数据格式正确并符合预期的要求。其中,身份证号码验证尤其重要,因为它涉及到个人信息的真实性和合法性。本文将详细介绍如何使用...

    WEB前端校验插件,提供表单字段的配置式校验功能

    在表单提交之前,JavaScript可以检查用户输入的有效性,如邮箱格式、手机号码格式、密码强度等,从而避免无效数据传递到服务器。 这个名为"zhh.validate.js-master"的插件,其核心特性在于"配置式校验"。这意味着...

    Web通用的表单校验JS

    这种校验可以在用户提交表单之前就发现错误,提供即时反馈,提高用户体验,同时减轻服务器端的负担。 "Web通用的表单校验JS"是指一个独立的JS库或函数集,它可以用于各种类型的Web表单,无需针对每个表单编写特定的...

    基于BootStrap与jQuery.validate实现表单提交校验功能

    总结而言,基于 Bootstrap 和 jQuery.validate 实现表单提交校验功能,是一种高效且易于掌握的方法,它可以帮助开发者快速搭建出既美观又功能强大的用户交互界面。通过掌握这两个工具的使用,我们可以轻松应对用户...

    Spring In Action MVC 提交表单(2)-数据绑定和数据校验

    // 这里的user对象会自动填充表单提交的数据 } ``` 2. **模型属性与视图** 在上述例子中,`@ModelAttribute`注解的参数名("user")表示模型属性的名称。这个属性可以在视图层(如JSP、Thymeleaf)中访问,以便...

    基于VueElementUI快速创建生成表单进行数据校验获取表单数据

    `el-form`的`:rules`属性与`el-form-item`的`:prop`属性相结合,实现了表单元素的数据校验。当用户在输入框失去焦点(`blur`事件)时,会触发校验规则。 为了实现动态生成表单,可以借助Vue的计算属性和循环结构。...

    struts2笔记之校验表单信息

    本篇笔记将详细讲解Struts2中服务器端与客户端对表单数据的校验方式。 首先,Struts2提供了一系列内置的校验器,包括: 1. Irequired:检查字段是否为空,是必填项。 2. IIrequiredstring:验证字段是否为非空字符...

    表单校验&文件下载

    表单是用户与Web应用程序交互的主要方式,用于收集和提交数据。表单校验是在用户提交数据之前,对输入的数据进行检查,以确保其符合预设的规则或格式。这有助于防止无效数据的提交,提高数据质量,同时也能为用户...

    原生js实现表单验证(提交后验证)

    在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高用户体验并防止无效或恶意数据的提交。原生JavaScript实现的表单验证可以避免对第三方库的依赖,使得代码更加轻量...

    javascript将异步校验表单改写为同步表单.docx

    这种方式的优点在于能够即时反馈错误信息给用户,减少不必要的表单提交尝试,从而提高用户体验。 然而,异步校验也有其局限性和问题,例如: - **网络延迟**:在网络条件不佳的情况下,异步请求可能会导致用户等待...

    jq 表单校验工具

    通过将正则表达式与表单校验结合,可以精确地控制用户输入的数据格式。 "文本长度"校验是另一种常见的需求,尤其是在限制用户输入字符数的场景下。这个工具可以轻松检查输入字段的长度,确保它们不超过或低于指定的...

    c#以POST方式模拟提交表单 - 真功夫

    POST请求是一种用于向服务器发送数据的方法,常用于表单提交等场景。它将数据放在HTTP请求的主体中,而不是URL中。这种方式更适合于传输大量数据或敏感信息。 #### 三、C#中的HTTP POST请求实现 本案例中,作者通过...

    formcreate具有数据收集校验和提交功能的表单生成器

    5. **Vue.js集成**:`formcreate`与Vue.js深度集成,充分利用Vue的响应式特性和组件化理念,使得表单的创建和管理更加灵活和高效。开发者可以通过Vue的数据绑定和指令来控制表单状态,同时利用Vue生态系统中的其他...

    jQuery中validate表单提交校验Demo

    在这个"jQuery中validate表单提交校验Demo"中,我们将深入探讨如何使用这个插件实现用户注册时的表单验证。 首先,要使用jQuery Validate插件,你需要在项目中引入jQuery库和validate插件的JavaScript文件。通常,...

    jQuery完整注册表单提交验证

    例如,使用`.on('submit', function() {...})`监听表单提交事件,并在回调函数中进行所有验证。如果所有验证都通过,再提交表单到服务器;否则,显示相应的错误信息。 在实际项目中,还可以考虑使用现有的验证库,...

Global site tag (gtag.js) - Google Analytics