苗条中的颜色组件答案

【问题标题】：Color component in svelte苗条中的颜色组件
【发布时间】：2021-07-04 04:14:33
【问题描述】：

我正在学习 svelte，想知道如果我尝试将除颜色以外的任何内容作为输入，svelte 中是否存在错误颜色处理程序？

const submitHandler = (e) => {
    valid = true;
    if(e.color != couleur){
        valid = false;
    } 
    else {
        color = e.target.value;
    }
}

【问题讨论】：

也许您正在寻找html颜色输入：w3schools.com/TAGS/att_input_type_color.asp
你可以使用class: directive

标签： svelte svelte-3 svelte-component

【解决方案1】：

虽然要求特定颜色数据而不提供颜色选择器通常不是很好的用户体验，但这是可能的，也许你有一个正当的理由。

您可以使用 RegEx 检查用户是否提供了有效的颜色代码（假设您指的是十六进制）。 Here 是一个将为您进行验证的表达式，只需使用它创建一个 RegExp 对象：const regex = new RegExp('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$')

并检查用户提供的值是否通过了测试regex.test(yourValue)，或者您是否只是要求提供十六进制代码而不是之前的#，然后是regex.test('#' + yourValue)。也不需要e.target.value，因为您可以将输入绑定到一个变量并使用它来测试。

这是一个REPL，显示了一种可能的方法

目前尚不清楚您的目标是什么以及为什么要在提交时检查输入的有效性，但是如果您使用响应式声明来检查有效性，对您的用户可能会更好，如图所示这个REPL。

或者只在REPL 中检查：blur 的有效性。

【讨论】：