草庐IT

javascript - 触发 Javascript 表单字段验证和格式化的事件是什么？

coder 2024-05-16 原文

首先让我说，我们验证服务器端的每个字段，所以这是一个问题 关于客户端可用性。

什么时候使用 javascript 验证和格式化 html 表单输入字段的传统智慧是什么？

例如，我们有一个电话号码字段。我们允许使用数字、空格、括号和连字符。我们希望该字段有十位数字。此外，我们希望该字段看起来像 (123) 456-7890，即使用户没有那样输入也是如此。

看来我们可以

  • 在用户使用时验证并格式化它 退出该领域。
  • 验证和格式化 在输入的每个字符上。
  • 拦截击键并防止 用户输入错误的字符。
  • 上述的一些组合(例如 进入时格式化，退出时验证，进入时阻止，退出时格式化等)
  • [已添加] 等待并在用户点击提交时执行所有验证和格式设置。

我已经看到它以所有这些方式完成，但我找不到关于什么的信息 从可用性的 Angular 来看是最好的(甚至被普遍接受的)，更重要的是，为什么。

[编辑:一些说明]

我们绝对不会强制执行任何格式标准。当我说格式时，我的意思是我们将使用 javascript 重写内容，使它们看起来不错。如果用户键入 1234567890，我们会将其更改为 (123) 456-7890。没有可能失败的“格式规则”。

我将此与验证区分开来，因为如果他们没有输入足够的数字，我们必须让他们修复它。

我想我应该将问题改写为“关于何时验证以及何时格式化的传统智慧是什么......？

到目前为止，答案中的好信息!

编辑:我在下面接受我自己的回答，希望其他人会发现这个链接和我一样有用。

最佳答案

Validate and format it when the user exits the field.

是的。如果验证或格式化规则失败，则向用户提供无创反馈。 noninasive 我的意思是不要弹出警报或模式对话框，从而迫使用户单击某些内容。而是动态地在验证或格式化失败的字段附近或下方显示一条消息。

Validate and format on every character entered.

没有。我认为这阻碍了可用性。相反，向用户提供工具提示或其他一些提示，说明格式规则或验证规则是什么。例如。对于“必填”字段，几乎无处不在的星号，对于具有格式的字段，预先告诉用户预期的格式是什么。

Intercept keystrokes and prevent the user from entering characters that are wrong.

如果您要阻止用户输入无效字符，请告诉用户您为什么刚刚以非侵入式方式阻止他们的输入。另外，不要窃取该领域的焦点。

所以对我来说，一般原则是:

  1. 预先告知用户您的验证和格式设置规则。
  2. 不要假设用户是视力正常的，因此请牢记网络可访问性和屏幕阅读器。 (除非您正在开发目标受众有限的网站，例如 Intranet。)
  3. 为用户提供非侵入性反馈，这意味着不要让用户在每次失败时点击警告框或模式对话框。
  4. 明确指出哪个输入框未通过验证或格式规则，并告诉用户输入失败的原因。
  5. 在提供反馈时，不要窃取鼠标/指针焦点。
  6. 记住 Tab 键顺序，这样当面向键盘的用户完成一个字段时，他们可以点击 Tab 键并转到下一个逻辑输入/选择字段。

关于javascript - 触发 Javascript 表单字段验证和格式化的事件是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/116736/

javascriptsectionlistrongvalidationusability

有关javascript - 触发 Javascript 表单字段验证和格式化的事件是什么？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  8. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  9. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  10. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

随机推荐