65.9K
CodeProject 正在变化。 阅读更多。
Home

轻量级 JavaScript 验证库

Nitij
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.85/5 (16投票s)

2013年10月15日

MIT

4分钟阅读

viewsIcon

27189

downloadIcon

320

一个轻量级的 JavaScript 库，有助于轻松设置各种客户端验证

引言

几乎所有的 Web 应用程序都使用 JavaScript 来从客户端验证 HTML 表单输入。通常，这些验证非常基础，从验证必填字段到电子邮件地址和日期字段，但为此，我们必须编写自定义代码来处理每种不同的输入和验证。当页面上有大量输入需要验证时，这种方法将变得更加难以管理。

市面上有许多库和 API 可以通过编写最少的代码来简化表单验证，在大多数情况下，它们都能兑现承诺，但我发现它们缺乏一个适当的系统来向用户提供各种验证通知。我想实现一些东西来解决这个问题，这个脚本就是这项努力的结果。

Using the Code

使用此代码非常简单，可下载的 zip 文件包含 validateJS 脚本文件，一个压缩的脚本文件（如果您不使用构建过程）以及一些不同大小的可免费使用的通知图像。使用默认设置，您只需初始化该库即可为您的输入表单元素添加各种验证器。

请遵循以下简单步骤来使用此代码设置客户端验证。

步骤 1

下载脚本文件（您可以 LIǎn Yòng 随 validateJS 脚本附带的免费验证图像，也可以 LIǎn Yòng 您自己的图像）。

第二步

将输入元素添加到 HTML 页面，并将 `validatorName` 属性值设置为验证器的名称。

<label for="txtFirstName">First Name:</label>
<input id="txtFirstName" maxlength="20" validatorName="FirstName" />

步骤 3

添加验证通知“div”元素，并将 `validator` 属性值设置为您希望显示此通知的验证器的名称。

<label for="txtFirstName">First Name:</label>
<input id="txtFirstName" maxlength="20" validatorName="FirstName" />
<div validator="FirstName"></div>

目前，有三种通知可以显示给用户：图像、工具提示消息和背景高亮。这三者都可以根据需要打开和关闭。上面的 `div` 将用作通知图标的容器。

步骤 4

初始化库并添加新的验证器。

$(document).ready(function () {
...
    vManager = new ValidationManager()
                .addValidator(["FirstName"], 
                [{ type: ValidationType.Required, message: "Please enter your first name." }
                ,{type: ValidationType.Alphabets, message: "Only alphabts are allowed here."}])
		.validateOnTextChange(true, SetDemoSummary)
                .highlightBackground(true)
                .initialize();
    //This function is not part of the syntax
    function SetDemoSummary() {
        var i = 0;
        var validationResults = null;
        var validationSummary = "";
        validationResults = vManager.getValidationResults();
        validationSummary += "<ul>";
        for (; i < validationResults.length; i++) {
            validationSummary += "<li style='padding:4px;'>";
            validationSummary += validationResults[i].message;
            validationSummary += "</li>";
        }
        validationSummary += "</ul>";
        $("#divFormSummary").html(validationSummary);
    }

在上面的代码中，首先初始化了一个新的验证管理器对象。然后使用 `.addValidator()` 函数向其添加了两个验证器（Required 和 Alphabets），之后使用 `.initialize()` 函数初始化了该对象。验证将在更改事件上触发，并通过自动调用 `SetSummary()` 函数创建验证摘要。`.addValidator()` 的语法解释如下

vManager = new ValidationManager()
    .addValidator([validatorName1, validatorName2,...], 
    [{ validation Rules 1 }, { validation Rules 2 },...])
    .initialize();

其中 Validation Rules 格式 = {type: Validation Type, rule: Validation Rule, message: Validation Message}

有关上述语法和其他文档的详细说明，您需要访问 此 页面。

步骤 5

通过使用 `ValidationManager` 对象的 `.validate()` 或 `.validateAll()` 函数来触发验证。

vManager.validate(["FirstName"]);

目前，支持以下验证类型，可用于验证各种输入

必需

这是必填字段验证器。它确保用户必须输入某个值或进行某种选择。

Compare

此验证类型将输入值与提供的比较规则类型进行比较。

Range

此验证类型检查输入值是否在指定范围内。

RegularExpression

此验证类型使用提供的正则表达式字符串来验证输入。

自定义

此验证会调用提供的函数，并将输入控件的值作为参数传递给该函数。

MinLength

此验证类型验证输入值的长度小于或等于最小值。

MaxLength

此验证类型验证输入值的长度大于或等于最大值。

Alphabets

此验证类型确保输入仅包含字母和空格。

AlphaNumeric

此验证类型确保输入仅包含字母和数字。

数值

此验证类型确保输入仅包含数字。

在使用此代码之前，您需要添加对 jQuery 库的引用，因为该库严重依赖 jQuery 来实现跨浏览器兼容性。我已经尝试使实现能够扩展到任意数量的验证。此外，代码需要在触发任何验证之前更新 DOM，因此您始终需要调用 `.initialize()` 方法来正确设置验证管理器。

默认配置指向静态图像资源，您可以通过调用 `.setPassImage()` 和 `.setFailImage()` 方法来更改该设置。

有关完整文档，请访问 validateJS 的 GitHub 页面，您也可以从该页面下载脚本

此代码根据 MIT 许可发布，您可以以任何您想要的方式使用它。我欢迎任何问题/错误（如果您愿意，请在此处记录 此处）以及有用的建议，或者您可以 Fork GitHub 上的代码并根据您的需求进行修改。

历史

  • 2013年10月15日：初始版本
© . All rights reserved.