Javascript 警告框未显示且错误：您请求的文件不存在-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250650551

访问

+关注

分类

暂无分类

日期归档

暂无数据

Javascript 警告框未显示且错误：您请求的文件不存在

发布于2024-11-04 23:22 阅读(242) 评论(0) 点赞(14) 收藏(4)

我有一段 Javascript 代码，我已经研究了几个月了。我的目标是当用户没有选择或输入答案时，显示一个警告框并警告用户。

目前，我遇到了两个问题。一个问题是警告框根本没有显示。另一个问题是，有时我在新页面上收到此错误，提示“错误，您请求的文件不存在”。我不确定我哪里做错了。

<!DOCTYPE html>
<html>
<body>
<form name="quiz" class="quiz" onsubmit="return submitQuiz();">
                <ul style="list-style-type:none;">
                    <li><label id="web">Do you ever think about how you would design a web page?</label></li>
                    <br>
                    <li><input type="radio" value="no" id="rad1" name="rad1"/><span>No</span></li>
                    <li><input type="radio" value="yes" id="rad1" name="rad1"/><span>Yes</span></li>
                    <br>
                    <br>
                    <li><label for="prior">Which the following are your main priorities? If none, select N/A</label></li>
                    <li><select name="prior">
                        <option selected="" value="">**Please select one of the following**</option>
                        <option name="op1" id="op1">Ease of Use</option>
                        <option name="op2" id="op2">Graphics & Content</option>
                        <option name="op3" id="op3">The Data Collected</option>
                        <option name="op4" id="op4">Securing the site from possible attacks</option>
                        <option name="op5" id="op5">Overseeing the creation of software</option> 
                        </select>
                    </li>
                    <br>
                    <br>
                    <li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
                    <br>
                    <li><input type="radio" value="no" id="rad2" name="rad2"/><span>No</span></li>
                    <li><input type="radio" value="yes" id="rad2" name="rad2"/><span>Yes</span></li>
                    <br>
                    <br>
                    <li><label for="tx1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
                    <li><textarea name="tx1" id="text1" maxlength="3"></textarea></li>
                    <br>
                    <li><input type="submit" value="Submit!" id="submit"></li>
                    <li><input type="reset" id="reset"></li>
                </ul>
            </form>

<script>
function submitQuiz() {
    "use strict";
    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 tx1 = document.quiz.text1;

    function answerScore (radio1, radio2, radio3, radio4) {
         var x = 0;
            //inserted missing braces
            if (radio1.checked && radio2.checked) {
                x + 1;
            }
            if (x === 0) {
                alert("You forgot a question!");
                radio1.focus();
                return false;
            }
            else if (x === 1) {
                alert("Completed!");
                window.location.reload();
                return true;
            }
        }
    function vCheck(ch1, ch2, ch3, ch4, ch5) {
                var y = 0;
                //inserted missing braces
                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 vLength(tx1) {
                var txLength = tx1.value.length;
                if (txLength === 0 || txLength < 3) {
                    alert("That is an incorrect entry, try again.");
                    tx1.focus();
                    return false;
                } else {
                    return true;
                }
            }
            function vCheck2(tx1) {
                if ((tx1 === "Yes" || tx1 === "YES" || tx1 === "yes") && (tx1 === "No" || tx1 === "NO" || tx1 === "no")) {
                    tx1.focus();
                    return true;
                } else {
                    alert("Uhoh, you're missing an answer!");
                    txt1.focus();
                    return false;
                }
            }
    }
</script>

</body>
</html>

解决方案

这就是表单验证和提交的方式。

function submitQuiz(myform) {
  "use strict";
  var errMsg = [];
  var hasError = false;
  if (!myform.rad1.value) {
    errMsg.push('Do you ever think...');
    myform.rad1[0].focus();//focus 1st option
    hasError = true;
  }
  if (myform.prior.value === 'none') {
    errMsg.push('Select main priopity');
    hasError || myform.prior.focus();
    hasError = true;
  }
  if (!myform.rad2.value) {
    errMsg.push('Do you enjoy...');
    hasError || myform.rad2[0].focus();
    hasError = true;
  }
  if (myform.tx1.value.toLowerCase() !== 'yes' && myform.tx1.value.toLowerCase() !== 'no') {
    errMsg.push('Type \'yes\' or \'no\'');
    hasError || myform.tx1.focus();
    hasError = true;
  }
  if (hasError) {
    alert(errMsg.join('\n'));
    return false;
  }
  //return false for debug purpose. In production return true
  alert('Submitting form');
 // return false;
}

<form name="quiz" method="get" class="quiz" onsubmit="return submitQuiz(this);">
  <ul style="list-style-type:none;">
    <li><label id="web">Do you ever think about how you would design a web page?</label></li>
    <br>
    <li><input type="radio" value="no" name="rad1" /><span>No</span></li>
    <li><input type="radio" value="yes" name="rad1" /><span>Yes</span></li>
    <br>
    <br>
    <li><label for="prior">Which the following are your main priorities? If none, select N/A</label></li>
    <li>
      <select name="prior">
        <option value="none">**Please select one of the following**</option>
        <option>Ease of Use</option>
        <option>Graphics & Content</option>
        <option>The Data Collected</option>
        <option>Securing the site from possible attacks</option>
        <option>Overseeing the creation of software</option>
      </select>
    </li>
    <br>
    <br>
    <li><label id="res">Do you enjoy conducting research, asking questions, and building reports?</label></li>
    <br>
    <li><input type="radio" value="no" name="rad2" /><span>No</span></li>
    <li><input type="radio" value="yes" name="rad2" /><span>Yes</span></li>
    <br>
    <br>
    <li><label for="tx1">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label></li>
    <!-- maxlength="3" not supported by textarea -->
    <li><textarea name="tx1"></textarea></li>
    <br>
    <li><input type="submit" value="Submit!" id="submit"></li>
    <li><input type="reset" id="reset"></li>
  </ul>
</form>