基础 CSS 厨房水槽 Abide

Abide 是基础 CSS 中的表单验证工具，用于验证表单中的输入是否符合规范。它可以检测文本框、下拉列表、单选和多选按钮等表单元素。

如何使用 Abide

使用 Abide 非常简单，只需要在表单元素或表单标签上添加 data-abide 属性，然后在表单元素中的每个需要验证的输入框中添加相应的验证规则即可。

基本的验证规则

以下是一些基本的验证规则及其相应的说明。

| 验证规则 | 说明 | | --- | --- | | required | 必填字段 | | pattern="^(.*)$|(empty)$" | 不允许为空 | | minlength="3" | 最小长度为 3 | | maxlength="10" | 最大长度为 10 | | pattern="email" | 邮箱格式 | | pattern="url" | 网址格式 | | pattern="number" | 数字 | | pattern="date" | 日期格式 YYYY-MM-DD | | pattern="time" | 时间格式 HH:MM:SS |

自定义验证规则

如果以上的验证规则无法满足您的需求，您可以使用自定义验证规则。您只需要在表单元素中指定 data-validator 属性和 data-validator-[name] 属性即可自定义名称为 [name] 的验证规则。

下面是一个简单的例子：

<form data-abide>
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required data-validator="custom" data-validator-custom="checkPassword" data-validator-custom-message="密码不符合要求">
<button type="submit" class="button">提交</button>
</form>

在上面的代码中，我们指定了一个名为 custom 的验证规则，并将其自定义为一个名为 checkPassword 的函数。我们还指定了一个错误消息，当验证失败时显示。

您可以在 JavaScript 中添加以下代码来定义名为 checkPassword 的函数：

$(document).foundation({
  abide : {
    validators: {
        checkPassword: function(el, required, parent) {
            var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
            var value = el.val();
            return regex.test(value);
        }
    }
  }
});

以上代码使用正则表达式来验证密码是否包含至少一个小写字母、至少一个大写字母、至少一个数字，并且长度为至少 8 个字符。

如何处理验证结果

当用户提交表单时，Abide 会自动验证每个表单元素并显示错误消息，如果所有表单元素都通过验证，则表单提交成功。您可以使用以下 JavaScript 代码来处理验证结果：

$(document).on('formvalid.zf.abide', function (e) {
  // 表单验证通过的代码
});

$(document).on('forminvalid.zf.abide', function (e) {
  // 表单验证失败的代码
});

当表单验证通过时，会触发 formvalid.zf.abide 事件；当表单验证失败时，会触发 forminvalid.zf.abide 事件。