javascript - 带有 html 5 的元素上的自定义表单验证功能

Question

对于自定义图像选择工具，我想创建基于 html 5 表单验证的表单验证。

例如我的表单包含以下元素:

<form class="cms-form" action="">
    <table width="800">
        <tr>
            <td width="30%">Name:</td>
            <td><input type="text" name="name" class="cms-input-text" maxlength="127" /></td>
        </tr>
        <tr>
            <td>Image:</td>
            <td><textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}">/location-to-image.png</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Next"/></td>
        </tr>
    </table>
</form>

我有一个 Javascript 将文本区域(.cms 输入文件)更改为一些 html 以添加图像并隐藏原始文本区域。它看起来像这样:

<textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}" style="display: none;">/location-to-image.png</textarea>
<ul class="cms-input-file-list">
    <li class="cms-input-file-item" data-image="/location-to-image.png">
        <img src="/location-to-thumb.png" alt="" class="cms-input-file-item-thumbnail"/>
        <span class="cms-input-file-item-title">location to image</span>
    </li>
    <li class="cms-input-file-add">Add</li>
</ul>

因为我已经分配了使用 html5 表单验证的现有表单，所以我想在支持 html5 的浏览器中使用默认表单验证来验证此元素，但希望使用现有事件。

我正在寻找这样的东西:

$('.cms-input-file').on('customValidateFunction', function () {
    var options = $(this).data('options');

    if($(this).find('> li.cms-input-file-item').length < options.min)
    {
        return [false, 'Add more images.'];
    }

    if($(this).find('> li.cms-input-file-item').length > options.max)
    {
        return [false, 'Remove some images.'];
    }

    return true;
});

有谁知道使用默认的 html 5 事件是否可以实现类似的事情，或者我将如何将此事件 添加到提交事件中？实际触发默认浏览器验证外观。

-- 编辑--

到目前为止，我已经尝试使用隐藏原始元素的 div 元素来获得此结果。但是现在我需要向元素添加一个模式以根据我的选项进行匹配。这可能吗？

当前进度:http://jsfiddle.net/jeffreydev/YyEVu/

Answer 1

如果我正确理解您的需求，我认为您可以使用 pattern attribute 实现您想要做的事情任何输入元素。

我创建了一个非常简单的 form in jsfiddle说明这一点。

这个想法是，在添加或删除图像时，您可以使用模型中的任何数据更新输入值。该示例只是为每个图标添加一个字母 f。然后，您可以创建一个正则表达式来匹配预期的有效结果。在示例中，pattern="f{1,3}" 表示要有效，内容可以是“f”、“ff”或“fff”，但不能是其他任何内容，这意味着它只会接受一到三个要发送的文件。

您将只使用默认的 html5 表单验证，但您可能需要进行一些调整才能使其正常工作。

但是，如果您尝试这种方式，则应牢记以下几点:

1. 如 specs 中所述，模式被编译为禁用全局、ignoreCase 和多行标志的 JavaScript 正则表达式
2. 设置输入的禁用属性以便用户无法更改它会将其从表单中删除，因此不会对其进行验证
3. 将某些样式作为 *display:none"应用于输入元素可能会在验证失败并且浏览器试图获得对元素的关注时导致错误。

希望对你有帮助