Javascript 输入类型 ="color"表单验证

Question

Javascript 初级水平，对输入类型颜色有疑问。

我试图让用户在继续表单的下一页之前选择黑色。默认颜色为黄色。

有人可以帮我解决这个问题并解释我哪里出了问题或遗漏了什么吗？

并且已经进行了研究，试图自己解决这个问题，但卡住了，这可能是正常情况下最简单的事情。谢谢

这是一个片段:

function validate() {

    var elements = document.getElementById("form1").elements;
        
    for (var i = 0, element; element = elements[i++];) {
            
        if (element.style.backgroundColor =='rgb(255, 153, 153)') {
        
            alert("Please enter data for any fields highlighted in red");
        
            return false;
        
        }

    }
}


function spamCheck() {
        
    //alert("Spam Check Working.......");
        
    var color = document.getElementById("color").value;
        
    if (!color == "#000000") {
            
        alert("Please enter the color black to proceed.");
        color.focus;
        return false;
                
    }
}

<form id="form1">
  <span class="center">Spam Check. What colour is black? (choose a colour) 
    <input name="color" id="color" type="color" value="#FFFF00" />
  </span>
            
  <span class="button">
    <button type="submit" onClick="validate(), spamCheck()">Continue &rarr;  </button>
  </span>
</form>

Answer 1

这里有一些需要改进的地方，因为逻辑并没有真正相加。这是您的代码，已修改并带有注释注释:

function validate() {
    var elements = document.getElementById("form1").elements;
    for (var i = 0, element; element = elements[i++];) {

        // When using the `not equal` operator, use it _in the operator_.
        // Putting a `!` in front of a variable will change the variable first
        // before comparing. This can cause unexpected issues!
        // Also added a type check as the button does not have a value of
        // '#000000', so the alert would _always_ show. This prevents that.

        if (element.type === 'color' && element.value !== '#000000') {
            alert("Please enter data for any fields highlighted in red");
            return false;
        }
    }
    // to allow your HTML prevention of submission, make sure to always return a boolean value.
    return true;
}


function spamCheck() {
    // As you want to focus on this element later, store the element
    // NOT the value.
    var color = document.getElementById("color");

    // This is the point where the placement of the `!` is changed
    // Because if you invert the value of a string, you might get
    // unexpected results!
    if (color.value !== "#000000") {
            
        alert("Please enter the color black to proceed.");

        // Focus is a _method_ of an <input> node,
        // not a property, so call it with ().
        // Also, because you originally set color to the _value_, 
        // it is only a string and not the <node>
        color.focus();

        return false; 
    }
    // to allow your HTML prevention of submission, make sure to always return a boolean value.
    return true;
}

<form id="form1">
  <span class="center">Spam Check. What colour is black? (choose a colour) 
    <input name="color" id="color" type="color" value="#FFFF00" />
  </span>
            
  <span class="button">
    <!-- To prevent submission, your onclick is changed -->
    <button type="submit" onClick="return (validate() && spamCheck())">Continue &rarr;  </button>
  </span>
</form>

请注意，您的 validate() 将始终发出警报，因为您的 button 的值不是 #000000，即也被认为是一个元素。因此，并非所有元素都通过您的测试。但是，我通过检查元素类型是否为 color 对此进行了修改，然后才检查该值并发出警报。

但主要问题是:如何正确地做到这一点？好吧，JavaScript 使用事件监听器来实现这一点，它可以极大地改进您的代码。我已将我的建议添加到下面的代码片段中。请记住，使用元素上的 onSomething 属性将事件附加到 HTML 元素被认为是不好的做法。这主要是因为它使你的代码耦合得太紧密，这意味着如果你以后必须修改它，它将是 JS、HTML 和其他元素的混合，并且会变得困惑。

事件监听器为您解决了这个问题，您可以仅使用 javascript 将它们附加到元素，但这确实意味着您的表单可以在没有 javascript 的情况下提交。从技术上讲，这就是您想要的 - 但请记住，垃圾邮件机器人通常会禁用 javascript，因此您所做的任何事情都不会产生任何影响，除非您仅使用 javascript 编写表单。

现在，我们来看看所提供代码的改进版本，该代码耦合不那么紧密。我向您的 HTML 添加了一些属性(并删除了其他属性，只是为了使其更简单，但您可以保留跨度，例如)。这些属性不与 JS 紧密耦合。它们是供 JS 阅读的，但除此之外没有什么区别。这也意味着只懂 HTML 的人也可以编辑消息。

checkColor 现在也被纳入您的验证函数中，就像对任何内容的验证一样。现在更好的是使用正则表达式模式进行检查，但这超出了这个问题的范围。

var form = document.getElementById('myForm');

// Only run this function when a submit button is clicked and the form is
// considered to be submitted. Pass the function an event as well.
form.addEventListener('submit', function(event){
  
  // Lets assume the form is valid
  var isValid = true;
  
  // Lets use a standard for loop, it's easier to read
  for(var i = 0, element; element = form.elements[i]; i++){

    // I;ve added two data-properties in your HTML, one that tells us what
    // value your are looking for and another that provides the hint
    // you want to show people
    var match = element.getAttribute('data-match');
    var hint = element.getAttribute('data-hint');

    // If there is something to match and it does not match the value provided
    // then set isValid to false and alert the hint (if there is one);
    if(match && match !== element.value){
       isValid = false;
       if(hint) alert(hint);
    }
  }
  
  // If one element has set the isValid to false, then we want to prevent
  // the form from actually submitting. Heres were the event comes into play:
  // event.preventDefault() will stop the form from actually submitting.
  if(!isValid) event.preventDefault();
  
});

<form id="myForm">
  <input name="color" id="color" data-hint="Enter the color black in HEX to proceed." data-match="#000000" type="color" placeholder="#000000" />
  <input type="submit" value="Continue &rarr;" />
</form>