有没有办法在 Vue 中验证 HTML 语法？答案

【问题标题】：Is there a way to validate HTML syntax in Vue?有没有办法在 Vue 中验证 HTML 语法？
【发布时间】：2019-06-05 09:11:18
【问题描述】：

我有一个组件，它基本上从输入中获取所有内容并呈现 html：

<template>
    <div>
        <input type="text" v-model="html">
        <VRuntimeTemplate :template="html" />
    </div>
</template>

<script>
import VRuntimeTemplate from 'v-runtime-template'

export default {
    data: () => ({
        html: ''
    }),
    components: {
        VRuntimeTemplate
    }
}
</script>

现在当我开始输入时，它显然会抛出错误，说输入值没有结束或结束标记。

有没有办法预先验证 HTML？ v-html 可以正常工作，但第三方模块存在问题。

沙盒：https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14

【问题讨论】：

您可能想要编辑/更新问题，以便更清楚地了解“预先验证 HTML？”的确切含义。 codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14 表单的全部目的似乎是使用户能够输入带有标记的输入（每次按下键或在输入字段中输入任何字符时都会得到（重新）检查/（重新）验证......为什么?) — 所以，鉴于此，不清楚您所说的“事先”是什么意思。在什么之前？
@sideshowbarker 我事先使用了这个词，因为我想先验证输入，然后在输入有效时将输入作为道具发送。好吧，当前的设置不是这样工作的，但我只是想要一些方法来验证 HTML。只需验证 HTML，仅此而已。如果我不这样做，那么在每次击键时，v-runtime-template 都会让控制台充满错误。

标签： javascript html vue.js w3c-validation html-validation

【解决方案1】：

根据您需要验证 HTML 的时间，有几个选项。

要动态验证输入，您可以遵循以下答案： Check if HTML snippet is valid with JavaScript

如果你想验证 Vue 组件的 HTML 输出，这里有一个 vue-cli 插件： https://gitlab.com/html-validate/html-validate-vue

我遇到了同样的问题，最终选择了第一个选项，因为我需要验证用户提供的 HTML，该 HTML 将在另一个 vue 应用程序中发出。

【讨论】：

【解决方案2】：

您需要将其包装在一个 div 中才能工作，请按照下面的示例进行操作

<v-runtime-template :template="`<div>${template}</div>`"/>

【讨论】：