在现代Web开发中，确保用户输入的数据有效性是至关重要的。这不仅可以提高用户体验，还可以防止无效或恶意数据被提交到服务器。本文将介绍一种简单有效的前端表单验证工具，它完全运行在客户端，易于实现和维护。
在本助手中，表单验证分为两个步骤：第一个步骤是用户在输入数据时进行验证，可以防止用户输入无效数据；第二个步骤是用户尝试提交表单时进行验证，此时页面代码必须验证那些在输入时无法完成的验证，如果发现错误，必须通知用户并指导用户如何纠正问题。
该工具提供了一个名为InputValidator的对象，用于验证任何表单的输入。此外，还有一些全局范围内的函数用作格式验证器，分别称为StringFormatter、IntegerFormatter和FloatFormatter。
验证过程如下：
在输入时强制执行：
MaxLength验证。在提交前强制执行：
Required验证。MinValue和MaxValue验证。注意：最初没有包括"maxlength"验证，因为属性MaxLength可以执行相同的验证；但是，TextArea没有MaxLength属性（至少在IE中没有），所以决定包括它，以防想要限制TextArea中的数据量。
另外，请注意，这些验证大多数只适用于文本输入。只有Required验证可以应用于其他元素，例如选择框或单选按钮。如果验证不适用于应用的输入类型，验证将被忽略。
在某个时刻，需要像这样设置输入验证器：
var validator = new InputValidator("FormName");
// 启用输入"InputName"的必填验证
validator["InputName"].required = true;
// 启用任何格式验证
validator["InputName"].format = IntegerFormatter;
// 启用MinValue和MaxValue验证
validator["InputName"].minValue = 0;
validator["InputName"].maxValue = 100;
// 启用正则表达式验证
validator["InputName"].regularExpression = /^\w+@(\w+\.)+\w+$/;
此外，当使用StringFormatter时，需要设置validChars属性：
validator["InputName"].validChars = "abcdefABCDEF0123456789";
// 允许十六进制数字
为了最小化初始化表单不同验证所需的JavaScript代码量，可以直接在HTML元素中使用属性。基本上，对于将使用JavaScript代码初始化的每个属性，可以通过向HTML标签添加属性来实现。例如，而不是这样写：
validator["InputName"].required = true;
可以在HTML中这样做：
<input type="text" name="InputName" required="true" />
对于已经看到的其他验证属性也是如此（注意：属性名是区分大小写的）。
就是这样。基本上，为表单创建一个InputValidator，然后使用JavaScript配置每个输入的不同验证选项，或者如果像一样懒，就向每个HTML标签添加适当的属性。验证器会处理其余的事情。
if (validator.validate()) {
// 提交...
} else {
// 取消提交...
}