只需 5 行即可制作 JSON 文件验证器

在这篇文章中，我们将运用这些知识并制作一个简单的 JSON 文件验证器 Web 应用程序。

用户可以访问我们的应用程序，上传他们的 JSON 文件，它会告诉他们该文件是否有效，所有这些都可以通过浏览器进行。无依赖关系，无需调用外部 API。只是纯 JavaScript 和 HTML。

首先是样板 HTML、CSS 和元素选择器。

<div class="container">
  <h1><code>JSON</code> validator</h1>
  <input name="file" accept=".json" type="file" id="file-input" />
  <div id="message" />
</div>

该属性type=“file"告诉浏览器呈现文件选择器而不是普通的文本输入。 accept=”.json"告诉浏览器只允许用户选择 JSON 文件。

<style>
  .container {
   
    padding-top: 10px;
    max-width: 500px;
    margin: auto;
    display: flex;
    flex-direction: column;
  }
  h1 {
   
    font-size: 30px;
  }
  code {
   
    border-radius: 3px;
    background-color: gainsboro;
    padding: 4px;
    font-size: 0.9em;
  }
  #message {
   
    padding-top: 20px;
    font-size: 20px;
  }
</style>
<script type="module">
  const input = document.getElementById("file-input