Javascript html 5中元素的自定义表单验证函数

对于自定义图像选择工具，我希望基于HTML5表单验证创建表单验证

例如，我的表单由以下元素组成：

<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>

姓名：
图片：
/location-to-image.png

我有一个Javascript，它可以将textarea（.cms输入文件）更改为一些html来添加图像并隐藏原始textarea。 它看起来像这样：

<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>

$('.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;
});

$('form.cms-form').on('submit', function(evt) {
    var frm = $(this);
    var allElements = $(this.elements);
    $('#errors').empty();   

    var errors = [];
    var arg = {
        reportValidationError : function( msg ) {
            errors.push(msg);
        },
        form : this
    };
    console.log("all elements: ", allElements);
    allElements.trigger('customValidate', [ arg ]);

    if( errors.length !== 0 ) {
        showValidationErrors(errors);
        return false;
    }
    return true;
});

/location-to-image.png


位置到图像

添加

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

我在找这样的东西：

<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>

$('.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;
});

$('form.cms-form').on('submit', function(evt) {
    var frm = $(this);
    var allElements = $(this.elements);
    $('#errors').empty();   

    var errors = [];
    var arg = {
        reportValidationError : function( msg ) {
            errors.push(msg);
        },
        form : this
    };
    console.log("all elements: ", allElements);
    allElements.trigger('customValidate', [ arg ]);

    if( errors.length !== 0 ) {
        showValidationErrors(errors);
        return false;
    }
    return true;
});

$（'.cms输入文件'）。在（'customValidateFunction'，function（）{
var options=$（this.data（'options'）；
if（$（this）.find（'>li.cms输入文件项'）.lengthli.cms输入文件项'）.length>options.max）
{
返回[false，‘删除一些图像’；
}
返回true；
});

是否有人知道使用默认HTML5事件是否可以执行类似的操作，或者我如何将此事件添加到提交事件中？以实际触发默认浏览器验证外观

--编辑--

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

---

当前进度：

您可以在

上安装

submit

处理程序，并从那里发送自定义事件

看起来是这样的：

<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>

$('.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;
});

$('form.cms-form').on('submit', function(evt) {
    var frm = $(this);
    var allElements = $(this.elements);
    $('#errors').empty();   

    var errors = [];
    var arg = {
        reportValidationError : function( msg ) {
            errors.push(msg);
        },
        form : this
    };
    console.log("all elements: ", allElements);
    allElements.trigger('customValidate', [ arg ]);

    if( errors.length !== 0 ) {
        showValidationErrors(errors);
        return false;
    }
    return true;
});

然后，您可以“钩住”

customValidate

事件，并安装您自己的逻辑

$('textarea[name=icon]').on('customValidate', function(evt, reporter) {
    var options = $(this).data('options');

    // ... your validation here ...

    // for example:
    var txt = $(this).val();
    if( txt.length < options.min || txt.length > options.max ) {
        reporter.reportValidationError('error: "icon" min/max exceeded!');
    }
})

$（'textarea[name=icon]'）。在（'customValidate'，函数（evt，reporter）上{
var options=$（this.data（'options'）；
//…您的验证在这里。。。
//例如：
var txt=$（this.val（）；
如果（txt.lengthoptions.max）{
reporter.reportValidationError（'错误：“超过最小/最大值！”）图标）；
}
})

---

编辑

---

您可以设置错误报告的样式，并调整代码，使其外观和行为符合您的要求

如果我正确理解了您的需求，我认为您可以使用任何输入元素的

我创建了一个非常简单的示例来说明这一点

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

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

但是，如果您尝试这种方式，您应该记住以下几点：

如中所述，Pattern被编译为禁用全局、ignoreCase和多行标志的JavaScript正则表达式

设置输入的disabled属性，以便用户无法更改它，这将使其脱离表单，因此不会对其进行验证

当验证失败且浏览器试图获得对输入元素的关注时，将某些样式应用为*display:none“可能会导致错误

---

我希望这对您有所帮助

验证表单的一个非常好的jquery插件是Mike Alsup one的。 你可以在这里找到它：

它是有文档记录的，与ajax兼容

它可以对表单中的一个字段或所有字段进行序列化，因此对于您可能需要处理表单中的字段验证和错误逻辑的问题来说，这是一个很大的优势

您可以添加同一作者的blockUI插件以增强用户体验，并且在启用javascript时不必管理表单的双重提交。

---

您使用的是jquery表单验证插件吗？不，我只使用默认的html5浏览器验证，但我想知道是否可以使用javascript进行验证。您是否仍然希望在添加1到3个图像后提交该表单？我仍然认为您可以使用中显示的或下面发布的任何方法进行验证。Bo这样做。我还没想过，我可能最终会使用高度和宽度为0的父元素隐藏原始元素，并将溢出设置为无（这样浏览器中的弹出窗口仍会显示），然后在更改时而不是在表单提交时使用SetCustomValidation函数来显示正确的消息。谢谢！是的，但是这不会从浏览器触发默认验证，因为它看起来与默认浏览器验证看起来不同。此外，它也会在默认表单验证之后触发。尽可能请参见此处：[1]您可以设置错误报告的样式，使其外观符合您的要求。|[2]我不确定为什么在HTML5验证之后运行自定义验证会有问题……所有这些都必须运行（并通过）在提交表单之前。你能详细说明一下这个问题吗？提交表单有多烦人，因为你没有填写所有内容而出现错误。然后填写这些字段，再次提交，然后出现更多错误。在我的浏览器（chrome）上，内置HTML5就是这样有效的