Javascript HTML画布开关和错误消息

我的代码遇到了一个小问题

看一看这张照片

我想做的是，如果在大小和颜色上键入错误的值，则会收到错误消息

我试着让它工作，但我似乎无法管理

document.getElementById('MyForm').onchange = function (event) {
    event.preventDefault();
    switch (myColor) { 
        case '/':
            if (input.value ? '#' + input.value : '#333') {
                result = input.value;
            } 
            else {
                result = 'Six numbers or letters!';
            }
            break;

    }
    document.getElementsByName('result')[0].innerHTML = result;
};

代码用于颜色，例如，您不能键入

#0000000

我想对尺码做同样的调整。我只希望用户能够选择从

1px

到

300px

的大小

编辑

在我的HTML

#

JS:

---

不起作用：（

首先，您使用的是一个

switch

语句，其中包含一个IF…这本身并不是好的做法

开关是一个IF

switch (myColor) {
    case '/':

这基本上是说：
if（myColor=='/'）{

我猜这永远不会发生

开关应如下所示：

switch (myColor) {
    case '#333':
        result = input.value;
        break;
    default:
        result = 'Six numbers or letters!';
        break;
}

其中
默认值：
是
其他值

其次，您应该使用正则表达式或比开关简单得多的东西来实现这一点

编辑

因为您要检查颜色，它不像检查字符串的长度那么简单。您只允许字母
a-F
和数字
0-9
。这意味着
#GHJKQW
将通过，但不是有效的颜色

为了解决这个问题，你需要一些正则表达式

如果你不知道如何使用它，我建议你仔细阅读，我不能像其他人那样解释它

但是，这是您想要的搜索字符串

/（[A-F0-9]{6}|[A-F0-9]{3}）/i

这表示：“a-f中任意字母的长度为3或6个字符，0-9中任意数字”
您需要在画布单击事件中进行非正常验证。我使用了JS模式匹配



一个建议。您可以给数字类型的输入字段设置“size”@VigneswaranMarimuthu的最小值和最大值。您能再解释一下吗？：）请你再描述一下最后一部分好吗？我仍然有同样的问题…我不熟悉你这样做的方式，但我真的很想理解。我不明白在我的代码中到底应该在哪里使用你的建议。对不起，这就是这样做的方式。我试图解释你这样做的方式，但你不想学习糟糕的做法。谢谢！但是myColor的警报框..警报框会出现几次而不是一次。您是否知道如何使警报框只出现一次。现在您必须单击“确定”太多次了。是的。我会的。我很快会做的，但最初我会告诉你，只有当你用错误的输入单击画布时，你才会得到警报。只需更正输入，然后单击画布。我的问题是，当你单击“确定”时，警报框不会消失。当您单击“确定”时，会显示另一个带有相同消息的警报框。如果可以，请帮助我@Samith这就是我们使用fiddle demo的原因。我看不出您面临的问题。当我在demo链接上收到警报时，它不会在单击“确定”时再次出现。但是，我只能建议使用div来获取验证反馈，而不是警报。我已添加ed a div具有id='color\u反馈。请参阅更新的fiddle链接。问题在其他地方，但它将解决多个警报问题
switch (myColor) {
    case '#333':
        result = input.value;
        break;
    default:
        result = 'Six numbers or letters!';
        break;
}

context.canvas.addEventListener('click', function(event) 
{                                
    var isValidInput = doValidation();
    if (!isValidInput)
        return;

    if(!drawnOnCanvas){
        clearCanvas();
        drawnOnCanvas = true;
    }        
    var mouseX = event.clientX - context.canvas.offsetLeft;
    var mouseY = event.clientY - context.canvas.offsetTop;        
    context.beginPath();        
    context.arc(mouseX, mouseY, size.value / 2, 0, 2 * Math.PI, false);        
    context.fillStyle = input.value ? '#' + input.value : '#333';             
    context.fill();
});

function doValidation()
{
    var isValidInput = validateColor();    
    if(!isValidInput)
    {
        console.log("Invalid Color");
        document.getElementById('myColor').focus();
        return false;
    }

    isValidInput = validateSize();    
    if(!isValidInput)
    {
        console.log("Invalid size");
        document.getElementById('mySize').focus();
        return false;
    }
    return true;
}
function validateColor()
{
    var val = document.getElementById('myColor').value;
    var reg = /^([a-f|A-F]|\d){3,6}$/; // a to f (lower or upper case)
    // or digit of length 3 to 6 this length is valid for color
    var res = reg.test(val);
    return res; //true or false
}
function validateSize()
{
    var val = document.getElementById('mySize').value;
    var reg = /^\d{1,6}$/;
    var res = reg.test(val);
    return res; //true or false
}