Question

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

上查看一下

我想要做的是在输入大小和颜色错误的值时收到错误消息。

我试图让这项工作成功，但我似乎无法管理。

#0000000

代码用于颜色，例如，您无法输入1px 我想对尺寸做同样的事情。我只希望用户能够选择从300px到#<input id="myColor" type="text" pattern="/([A-F0-9]{6}|[A-F0-9]{3})/i" placeholder="Exempel: 0088FF" />的尺寸。

修改

在我的HTML 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; };

中

JS：

{{1}}

不起作用：（

Answer 1

您需要在画布点击事件中进行验证。我使用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
}

Answer 2

首先，您正在使用switch语句，其中包含IF ...这本身并不是一种好习惯。

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

这表示：＆＃34;来自a-f的任何字母长度为3或6个字符，以及0-9＆＃34;
中的任何数字

HTML画布切换和错误消息

2 个答案: