使用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,将textarea(.cms-input-file)更改为一些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属性来实现你想要做的事情.

我在jsfiddle中创建了一个非常简单的表单来说明这一点.

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

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

但是,如果你尝试这种方式,你应该记住以下几点:

1. 正如规范中所解释的那样,patttern被编译为JavaScript正则表达式,禁用了global,ignoreCase和multiline标志
2. 设置输入的disabled属性以便用户无法更改它会将其从表单中删除,因此不会对其进行验证
3. 将某些样式作为*display:none"应用于输入元素可能会在验证失败并且浏览器试图关注元素时导致错误.

我希望你这有帮助