使用 Svelte 验证复选框答案

【问题标题】：Validating Checkboxes using Svelte使用 Svelte 验证复选框
【发布时间】：2020-07-12 14:19:04
【问题描述】：

我正在尝试使用 Svelte 验证带有复选框的问题，但我无法让用户能够选择多种颜色并将他们选择的内容保存在本地存储中。

这是我想要进行的验证：

如果什么都没有，请选择 p 标签说“请选择颜色”
如果选择了多个（或仅选择了 1 个），那么我想创建一个包含他们选择的所有值的字符串。然后我想将该字符串保存在 localStorage 中。我想要字符串，因为我允许用户根据需要检查超过 1 个选项，所以我认为单独保存每个值会花费太长时间，因为我有很多关于复选框的问题。这就是为什么我试图将选定的选项放在一个字符串中，这样我就可以将选定的颜色字符串保存为颜色问题的值。

例如：

颜色问题localstorage.setItem("colors", *color string here*);
如果问题是关于玩具的，那么localstorage.setItem("toys", *toys string here*);

这是我的代码：

所有代码都在 App.svelte 文件中

在脚本标签中：

let blue = false;
let red = false;
let green = false;
let purple = false;

{#if blue== "" | red== "" | green == "" | purple == ""}
<p> please pick a color</p>
{:else}
string r = blue.checked + red.checked + green.checked + purple.checked;
document.localStoragesetItem("colors",r);
{/if}

HTML

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" id="color" name="color" value="blue" bind:checked={blue}>
    <label>Blue</label><br>
    <input type="checkbox" id="color" name="color" value="red" bind:checked={red}>
    <label>Red</label><br>
    <input type="checkbox" id="color" name="color" value="green" bind:checked={green}>
    <label>Green</label><br>
    <input type="checkbox" id="color" name="color" value="purple" bind:checked={purple}>
    <label>Purple</label><br><br>
</div>

【问题讨论】：

标签： svelte

【解决方案1】：

您不能在 REPL 中使用 localstorage，因此我已将其注释掉，但您的解决方案是：

<script>
    const colours = {
        blue: false,
        red: false,
        green: false,
        purple: false
    }

    $: {
        console.log({ colours })
        // localStorage.set({ colours })
    }
</script>

{#if !Object.keys(colours).filter(c => !!colours[c]).length}
<p>please pick a color</p>
{:else}
{JSON.stringify(colours)}
{/if}

<div id="container">
    <label>Select the colors you like:</label><br>
    <input type="checkbox" bind:checked={colours.blue}>
    <label>Blue</label><br>
    <input type="checkbox" bind:checked={colours.red}>
    <label>Red</label><br>
    <input type="checkbox" bind:checked={colours.green}>
    <label>Green</label><br>
    <input type="checkbox" bind:checked={colours.purple}>
    <label>Purple</label><br><br>
</div>

我已将它放在 REPL 中，因此您可以尝试 here

您需要：

从您的模板代码中删除逻辑 - 所有逻辑都应在您的脚本代码中
绑定到包含您的颜色的哈希，可以存储在本地存储中
使用三等号而不是双等号（参见严格等号）
从复选框中删除 value 属性（bind:checked 是值的管理方式）
不要在 HTML 中复制 id 属性（反正你不需要它）
您不需要name 属性
您的 html 也存在许多超出范围的问题（标签的使用、br 的使用）

【讨论】：