HTML canvas 开关和错误信息

Question

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

上查看

我想做的是，如果您输入错误的尺寸和颜色值，我会收到一条错误消息。

我试图完成这项工作，但我似乎做不到。

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#<input id="myColor" type="text" pattern="/([A-F0-9]{6}|[A-F0-9]{3})/i" placeholder="Exempel: 0088FF" />

JS:

document.getElementById('MyForm').onchange = function (event) {
    event.preventDefault();
$('div').click(function(){

if($('input').val().length > 6){

return "Error"

$('div').css('background-color', "#" + $('input').val());
}
    document.getElementsByName('result')[0].innerHTML = result;
};

无效:(

Answer 1

首先，您使用的是包含 IF 的 switch 语句...这本身并不是好的做法。

switch是一个IF

switch (myColor) {
    case '/':

这基本上是在说：if(myColor == '/'){

我猜它永远不会？

开关应如下所示：

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

其中 default: 是 else

其次，您应该使用 RegEx 或比开关更简单的东西。

编辑

因为您要检查颜色，所以它不像检查字符串的长度那么简单。您只能使用字母 A-F 和数字 0-9。这意味着 #GHJKQW 会通过，但不是有效的颜色。

要解决这个问题，您需要一些 RegEx。

如果您不知道如何使用它，我建议您阅读它，我无法像其他人那样解释它。

然而，这就是您想要的搜索字符串。

/([A-F0-9]{6}|[A-F0-9]{3})/i

这表示："either 3 or 6 characters in length of any letter from a-f, and any number from 0-9"

Answer 2

您需要在您的 canvas 点击事件中进行验证。我使用了 JS 模式匹配

Updated Fiddle Link Fro Demo

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
}

HTML canvas 开关和错误信息

HTML canvas switch and error message

html

javascript

regex

canvas

onchange