javascript - 使用 Javascript 进行验证

Question

我正在尝试使用 Javascript 验证这个简单的测验。这个想法是在用户提交测验时忘记输入时发出警告。

我想要弹出警报:

1. 当文本丢失时，
2. 当输入的文字超过3个字符时，
3. 当文本不是"is"或“否”时，当提供的选项之一尚未标记时(对于单选框和复选框输入)。

我将包含下面的表单和 JavaScript 来配合此操作，因为我发现有必要了解该问题。

    <form name="quiz" onsubmit="return validateForm();" >
                <ul>
                    <li><label id="web">Do you ever think about how you would design a web page?</label></li>
                    <li><input type="radio" value="no" name="rad1"/><span>No</span></li>
                    <li><input type="radio" value="yes" name="rad2"/><span>Yes</span></li>
                    <li><label for="check">Which the following are your main priorities? If none, please check N/A</label> </li>
                    <li><input type="checkbox" name="op1" value="op1"/><span>Ease of Use</span></li>
                    <li><input type="checkbox" name="op2" value="op2"/> <span>Graphics & Content</span></li>
                    <li><input type="checkbox" name="op3" value="op3"/><span> The Data Collected</span></li>
                    <li><input type="checkbox" name="op4" value="op4"/><span>Securing the site from possible attacks</span></li>
                    <li><input type="checkbox" name="op2" value="op2"/><span>N/A</span></li>
                    <li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
                    <li><input type="radio" value="no" name="rad3"/><span>No</span></li>
                    <li><input type="radio" value="yes" name="rad4"/><span>Yes</span></li>
                    <li><label for="text1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
                    <li><textarea name="text1" id="text1" maxlength="3"></textarea></li>
                    <li><input type="submit" value="Finished!" id="submit"></li>
                    <li><input type="reset" id="reset"></li>
                </ul>
            </form>
<script>
    function validateForm() {
        var radio1 = document.quiz.rad1;
        var radio2 = document.quiz.rad2;
        var ch1 = document.quiz.op1;
        var ch2 = document.quiz.op2;
        var ch3 = document.quiz.op3;
        var ch4 = document.quiz.op4;
        var ch5 = document.quiz.op5;
        var radio3 = document.quiz.rad3;
        var radio4 = document.quiz.rad4;
        var tx1 = document.quiz.text1;
        function vWebRes(radio1, radio2, radio3, radio4){
            x=0;
            if(radio1.checked) || (radio2.checked) || (radio3.checked) || (radio4.checked) {
                x++;
            }
            if (x==0) {
                alert('You forgot a question!')
                radio1.focus();
                return false;
            }
            else {
                alert('Completed!');
                window.location.reload()
                return true;
            }
        }
        function vCheck(ch1, ch2, ch3, ch4, ch5){
            y=0;
            if(ch1.checked) || (ch2.checked) || (ch3.checked) || (ch4.checked) || (ch5.checked){
                y++;
            }
            if (y==0) {
                alert('You forgot a question!')
                radio1.focus();
                return false;
            }
            else {
                alert('Completed!');
                window.location.reload()
                return true;
            }
        }
        function vLenght(tx1) {
            var txLength = tx.value.length;
            if (txLength == 0 || txLength < 3) {
                alert("That is an incorrect entry, try again.")
                txLength.focus();
                return false
            }
            else {
                return true
            }
        }
        function vCheck(tx1) {
            if (tx1 == Yes && tx1 == YES && tx1 == yes) || (tx1 == No && tx1 == NO && tx1 == no) {
                tx1.focus();
                return true
            }
            else {
                return false
            }
        }
    }

</script>

Answer 1

这是一个非常简化的版本:

function validateForm() {

  //Use query selector all to get the humber of checked check boxes
  var numChChecked = document.querySelectorAll("input[type=checkbox][name=op1]:checked").length;

  var numRad1Checked = document.querySelectorAll("input[type=radio][name=rad1]:checked").length;

  var numRad2Checked = document.querySelectorAll("input[type=radio][name=rad2]:checked").length;

  var text = document.getElementById("text1");

  //Check there is atleast 1 Checkbox checked
  if (numChChecked == 0) {
    alert("You missed a question")
    document.quiz.op1[0].focus();
    return false;
  }


  //Check there is atleast 1 radio button checked
  if (numRad1Checked + numRad2Checked === 0) {
    alert("You missed a question");
    document.quiz.rad1[0].focus();
    return false;
  }

  //Check the text length
  if (text.value.length > 3 || text.value.length === 0) {
    alert("Invalid response length");
    text.focus();
    return false;
  }

  //Nortmalise the case to lower case to simplyfy the check
  //also note the " this denotes a string.
  if (!(text.value.toLowerCase() === "yes" || text.value.toLowerCase() === "no")) {
    alert("Invalid response");
    text.focus();
    return false;
  }

  alert("Success");
  return true;
}

<form name="quiz" onsubmit="return validateForm();">
  <ul>
    <li><label id="web">Do you ever think about how you would design a web page?</label></li>
    <!-- note the radio buttons must have the same name if you want to 
    toggle between them -->
    <li><input type="radio" value="no" name="rad1" /><span>No</span></li>
    <li><input type="radio" value="yes" name="rad1" /><span>Yes</span></li>
    <li><label for="check">Which the following are your main priorities? If none, please check N/A</label> </li>
    <!-- If these are a groupm they probably should have the same name -->
    <li><input type="checkbox" name="op1" value="op1" /><span>Ease of Use</span></li>
    <li><input type="checkbox" name="op1" value="op2" /> <span>Graphics & Content</span></li>
    <li><input type="checkbox" name="op1" value="op3" /><span> The Data Collected</span></li>
    <li><input type="checkbox" name="op1" value="op4" /><span>Securing the site from possible attacks</span></li>
    <li><input type="checkbox" name="op1" value="op2" /><span>N/A</span></li>
    <li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
    <!-- note the radio buttons must have the same name if you want to 
    toggle between them -->
    <li><input type="radio" value="no" name="rad3" /><span>No</span></li>
    <li><input type="radio" value="yes" name="rad3" /><span>Yes</span></li>
    <li><label for="text1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
    <li><textarea name="text1" id="text1" maxlength="4"></textarea></li>
    <li><input type="submit" value="Finished!" id="submit"></li>
    <li><input type="reset" id="reset"></li>
  </ul>
</form>

请注意，您的 HTML 存在一些问题。多组单选按钮或复选框应具有相同的名称

有关我上面使用的一些技术的更多信息，请参阅:

1. querySelectorAll这与 querySelector 有重要区别
2. getElementById
3. attribute selector
4. Check Boxes
5. The :checked pseudoclass
6. toLowerCase