我的代码遇到了一个小问题。
在JSFiddle上看一下
如果您在大小和颜色上输入了错误的值，我想做的就是得到一条错误消息。
我试图使这项工作奏效，但似乎无法解决。
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;
};
不起作用:(
最佳答案
您需要在画布单击事件之类的路线外进行验证。我使用了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
}
关于javascript - HTML Canvas 开关和错误消息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30193687/