使用 Svelte 验证复选框

Question

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

这是我要执行的验证：

如果什么都没有 select p 标签说 "Please select color(s)"
如果多个 selected（或只有 1 个 selected），那么我想创建一个包含它们 selected 的所有值的字符串。然后我想将该字符串保存在 localStorage 中。我想要字符串，因为我允许用户在需要时检查超过 1 个选项，所以我认为单独保存每个值会花费太长时间，因为我对复选框有很多疑问。这就是为什么我试图将 selected 选项放在一个字符串中，这样我就可以将 selected 颜色字符串保存为颜色问题的值。

例如：

颜色问题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>

Answer 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

您需要：

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

使用 Svelte 验证复选框

Validating Checkboxes using Svelte

svelte