如果 我 正确 理解 了 您 的 需求 ， 我 认为 您 可以 使用 任何 input 元素 的 pattern 属性 来 实现 您 正在 尝试 做 的 事情 。
我 创建 了 一 个 非常 简单 的 form in jsfiddle 来 说明 这 一 点 。
其 思想 是 ， 在 添加 或 删除 图像 时 ， 使用 模型 中 的 任何 数据 更新 输入 值 。 该 示例 仅 为 每个 图标 添加 一 个 字母 * f * 。 然后 ， 您 可以 创建 一 个 正则 表达式 来 匹配 预期 的 有效 结果 。 在 该 示例 中 ， * pattern = " f {1 ， 3} " * 表示 要 有效 ， 内容 可以 是 " f " 、 " ff " 或 " fff " ， 但 不能 是 其他 内容 。这 意味 着 它 只 接受 一到 三 个 要 发送 的 文件 。
您 将 只 使用 默认 的 html5 表单 验证 ， 但 可能 需要 一些 调整 才能 使 其 正常 工作 。
但是 ， 如果 您 尝试 使用 这种 方法 ， 则 应 记住 以下 几 点 ：
1.正如 规范 中 所 解释 的 ， 模式 被 * 编译 为 JavaScript 正则 表达式 ， 并 禁用 了 global 、 ignoreCase 和 multiline 标志 *
1.如果 设置 输入 的 disabled 属性 ， 使 用户 无法 更改 它 ， 则 会 将 其 从 表单 中 删除 ， 因此 不会 对其 进行 验证
1.如果 将 某些 样式 作为 * display ： none " 应用 于 input 元素 ， 则 当 验证 失败 并且 浏览 器 试图 获得 元素 的 焦点 时 ， 可能 会 导致 错误 。
我 希望 这 对 你 有 帮助

您可以在<form>上安装submit行程常式，并从该处传送自订事件。
它看起来像这样：

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

Here's an example at jsFiddle。

编辑

您可以设定错误报告的样式，并调整程式码，让它的外观和行为符合您的需求。Here's an example。

Mike Alsup One是一个非常好的jquery插件，可以验证表单。您可以在这里找到它：http://jquery.malsup.com/form/
它是文档化的， AJAX 兼容。
它可以对表单中的一个字段或所有字段进行序列化，因此对于您可能需要处理表单中的字段验证和错误逻辑的问题，它是一个很大的优势。
您可以添加同一作者的blockUI插件来增强用户体验，并且在启用javascript时不必管理表单的双重提交。http://jquery.malsup.com/block/

2022 年 答案 ：是 的 ， 没有 jQuery 等 也 是 可以 的 。
大多 数 浏览 器 都 支持 约束 验证 API （ 甚至 IE 11 根据 " caniuse " ）
建议 的 做法 是 侦听 input/submit 事件 ， 然后 在 输入 框 上 设置 有效 性 标志 。

<form>
    <input type="text" required id="answer">
    <input type="submit">
</form>

中 的 每 一 个
确认 JS ：

const nameInput = document.querySelector("#answer");
const form = document.querySelector("form");

function validate(e) {
  if (nameInput.value == "42") { //correct!
    nameInput.setCustomValidity(""); // empty means "no error"
  }
  else {
    nameInput.setCustomValidity("Wrong answer!"); //show error text
    e.preventDefault(); //prevent form submit
  }
}

nameInput.addEventListener("input", validate);
form.addEventListener("submit", validate);

格式
即使 以 编程 方式 更改 该 值 ， input 事件 也 会 触发
P.S. Codepen 的 玩法 ：https://codepen.io/jitbit/pen/XWYZjXO 的 最 大 值