MooTools-输入过滤

简介

MooTools-输入过滤是一个基于 MooTools 框架的插件，用于对输入框中输入的内容进行过滤和校验。它允许你定义不同的过滤规则和校验规则，以确保用户输入的内容符合你的要求。

安装

你可以从 GitHub 上下载最新版本的 MooTools-输入过滤插件，并将其包含在你的网页中。

<script src="http://cdn.jsdelivr.net/mootools/1.6.0/mootools-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/guillaumepotier/InputFilter/InputFilter.js"></script>

用法

使用 MooTools-输入过滤非常简单。你只需要给需要过滤或校验的输入框添加相应的规则即可。下面是一个基本的例子：

<input type="text" id="username" data-inputfilter="alphanumeric">

在这个例子中，我们将输入框的 data-inputfilter 属性设置为 alphanumeric，这意味着只允许输入字母和数字。你可以使用下面的代码来初始化输入过滤器：

window.addEvent('domready', function() {
  new InputFilter(document.id('username'), {
    filters: {
      alphanumeric: {
        regex: /^[a-z0-9]+$/i
      }
    }
  });
});

在这个代码中，我们使用了 MooTools 的 domready 事件，在文档加载完成后初始化了输入过滤器。我们指定了一个名为 alphanumeric 的过滤器，并将其 regex 属性设置为 /^[a-z0-9]+$/i，它将只允许输入字母和数字。你可以根据需要定义自己的规则。

规则

作为开发人员，你可以定义自己的过滤器和校验规则。下面是一些内置的规则，你可以在你的代码中使用它们：

• alpha: 只允许输入字母
• alphanumeric: 只允许输入字母和数字
• numeric: 只允许输入数字
• integer: 只允许输入整数
• positive: 只允许输入正数
• negative: 只允许输入负数
• email: 只允许输入邮件地址
• url: 只允许输入 URL

下面是一个例子，使用内置的 url 规则：

<input type="text" id="website" data-inputfilter="url">

初始代码如下所示：

window.addEvent('domready', function() {
  new InputFilter(document.id('website'), {
    filters: {
      url: {
        regex: /^(ftp|http|https):\/\/?[a-z0-9]+\.[a-z0-9]+[\/#?]?.*$/i
      }
    }
  });
});

结束语

MooTools-输入过滤是一个非常实用的插件，它可以帮助你确保用户输入的内容符合你的要求，从而提高你的网站的安全性和可靠性。你可以使用它来过滤和校验各种类型的输入，比如文本、数字、邮箱地址、URL 等。希望这份介绍对你有所帮助。