使用 Dojo 进行自定义表单验证答案

【问题标题】：custom form validation using Dojo使用 Dojo 进行自定义表单验证
【发布时间】：2009-12-14 08:39:46
【问题描述】：

我想执行一些客户端表单验证，我正在考虑使用 Dojo 来完成。

我希望用户能够在文本框中插入他想要的内容，但是当他点击提交时，表单会被验证。如果某个字段无效，我想在文本框周围显示一个红色边框，并在右侧显示一条消息，也是红色的。

如果用户点击错误的文本框（onfocus），错误消息就会消失。如果他单击错误消息，则文本框将获得焦点并且错误消息会消失。再次，他可以插入他想要的任何内容，直到验证为止。

据我了解，Dojo 有一些默认行为，如果无效，工具提示和文本框会变为黄色（参见下面的示例）。

是否有可能使用 Dojo 做我想做的事，还是我应该推出自己的实现来进行验证（我的意思是更容易：写一些我理解的东西，可以控制或使用一些未知的工具包）？

如果可能的话，我该怎么做或在哪里可以找到相关信息？

谢谢！

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="dijit/themes/tundra/tundra.css">
      <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
      <script type="text/javascript">
        dojo.require("dijit.form.Form");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.ValidationTextBox");
        dojo.require("dijit.form.DateTextBox");
      </script>
  </head>
  <body class="tundra">
    <table style="border: 1px solid black;">
      <tr>
        <td>Name:</td>
        <td>
          <input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox" />
        </td>
      </tr>
      <tr>
        <td>Date of birth:</td>
        <td>
           <input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox" />
        </td>
      </tr>
     </table>
     <input type="button" name="submitButton" value="Submit" />
  </body>
</html>

【问题讨论】：

听起来 Dijit 可以满足您的大部分需求。另请参见 dijit.form.Form。在可以使用 CSS 的范围内更改外观不应该那么难。如果你需要改变行为，尤其是注意力，我怀疑那会更痛苦。

标签： validation dojo dijit.form

【解决方案1】：

dojo 仅将错误消息显示为工具提示，而不是像实时验证这样的文本消息，我认为这是您正在寻找的内容

http://livevalidation.com/examples

但是使用dojo你不能将消息作为文本获取，而只能作为工具提示红色边框你可以使用验证文本框来获取，如果你想验证表单提交使用dojo表单而不是html。Dojo表单有一个名为validate的函数，它实际上是自动的内部调用所有 dijit 小部件并检查其中任何一个是否无效并分别返回 true 和 false。您可以使用此功能控制表单的提交

【讨论】：

【解决方案2】：

让我们考虑一下，我们有一个 dijit 表单：-

<form id="formId" data-dojo-type="dijit.form.Form">
...<!--all form widgets are here-->
</form>

当用户提交表单时，您需要进行如下验证：-

registry.byId("formId").validate(); //returns boolean value

这将返回一个布尔值 - 如果所有字段都有效，则返回 true，如果任何一个字段无效，则返回 false。因此，如果返回 true，您可以继续执行逻辑，否则您可以显示一些自定义错误消息。

如果任何 dijit 表单小部件被动态添加到此表单中，那么首先，我们需要连接它们。

var form = registry.byId("formId");
form.connectChildren(); //connects all child widgets of this form
form..validate(); // returns boolean value

【讨论】：