一个非常强大完整的web表单验证程序Validator v1.05

Validator v1.05 - 一个强大的web表单验证程序

Validator v1.05 是一个高效，灵活和功能强大的表单验证程序，可以帮助web开发人员轻松地验证使用者提交的表单输入。其主要特点包括：

• 简单易用：具有清晰的API和文档，易于配置和使用。
• 强大的验证能力：可以确保输入符合特定格式而且符合业务规则。
• 可扩展性：可以通过编写自定义插件来进行扩展。

下面是使用 Validator 的攻略。

步骤 1：引入 Validator

将 Validator 的 JS 文件引入到 HTML 文件中：

<script type="text/javascript" src="/js/validator-1.05.js"></script>

步骤 2：配置验证规则

在JS代码中配置验证规则（这里以一个注册表单为例），定义输入框的验证规则，包括输入内容的类型、长度、必填等：

var validator = (function () {
  var init = function () {
      validator.addValidation(
        document.getElementById('username'),
        'req',
        '请输入用户名'
      );
      validator.addValidation(
        document.getElementById('email'),
        'req',
        '请输入邮箱'
      );
      validator.addValidation(
        document.getElementById('email'),
        'email',
        '请输入正确的邮箱格式'
      );
      validator.addValidation(
        document.getElementById('password'),
        'minlen=8',
        '密码长度至少8位'
      );
      validator.addValidation(
        document.getElementById('password_confirm'),
        'eqelmnt=password',
        '两次密码输入不一致'
      );
  };
  return { init: init };
})();

window.onload = function() {
  validator.init();
};

在该段代码中，我们配置了对用户名、邮箱、密码和确认密码四个输入框的验证规则，比如必填、邮箱格式、密码长度、两次密码输入的一致性等等。

步骤 3：提交表单

最后，在表单提交时，给出一个 onsubmit 函数来验证表单数据是否符合规则：

<form method="post" action="#" onsubmit="return validator.validate(this)">
    <!-- 表单元素省略 -->
    <input type="submit" value="提交" />
</form>

通过这一步，我们完成了基本的表单验证功能。

示例说明

假设我们有一个用户注册表单，里面包括用户名、邮箱、密码和确认密码四个输入框。为了更清晰地阐述 Validator 的使用方法，以下我们举两个具体的示例说明。

示例1：检查邮箱格式是否正确

为了确保用户输入的邮箱格式符合要求，我们需要验证它是否包含 "@" 字符和 "." 字符，这个可以通过配置 Validator 的 email 规则来实现：

validator.addValidation(
  document.getElementById('email'),
  'email',
  '请输入正确的邮箱格式'
);

其中，第一个参数是输入框的 DOM 元素，第二个参数是验证规则，第三个参数是错误提示。

示例2：检查两次密码输入是否一致

为了确保用户两次输入的密码相同，我们需要在确认密码框中验证它是否跟密码框输入的一致，这个可以通过 Validator 的 eqelmnt 规则来实现：

validator.addValidation(
  document.getElementById('password_confirm'),
  'eqelmnt=password',
  '两次密码输入不一致'
);

其中，password_confirm 输入框使用了 eqelemnt 规则，并且给出了错误提示。

通过以上两个示例，我们可以感觉到 Validator 能够通过提供丰富的验证规则以及简单而易懂的API来帮助web开发人员实现高效、灵活和可扩展的表单验证功能。