javascript - 检查 javascript 中的空表单元素

Question

我正在做一个简单的客户端自评分测验。

我问了 6 个问题，我想提醒用户他们的分数(保持简单)。如果他们将答案留空，则会出现警报。

我是 javascript 新手，并不真正知道如何检查各个表单元素以查看它们是否为空。我在运行代码时也遇到问题。

JS

编辑

function grade() {
    var score = 0;
    var elt = document.quiz;

    // Check to see if no questions were left unanswered.
    if elt.question1.value.length == 0 || elt.question2.value.length == 0 ||   
       elt.question3.value.length == 0 || elt.question4.value.length == 0 ||
       elt.question5.value.length == 0 || elt.question6.value.length == 0
      {
        alert ("Whoops, you're missing an answer!")
    }

    if (elt.question1[1].checked) {
        score += 1;
    }
    if (elt.question2[0].checked) {
        score += 1;
    }
    if (elt.question3[0].checked == false && elt.question3[1].checked &&  
        elt.question3[2].checked == false && elt.question3[3].checked == false) {
        score += 1;
    }
    if (elt.question4[0].checked == false && elt.question4[1].checked == false &&
        elt.question4[2].checked == false && elt.question4[3].checked) {
        score += 1;
    }
    elt.question5 = elt.question5.toLowerCase()
    if (elt.question5.value != '' && elt.question5.value.indexOf('galaxy') != -1) {
        score += 1;
    }
    elt.question6 = elt.question6.toLowerCase()
    if (elt.question5.value != '' && elt.question6.value.indexOf('age') != -1) {
        score += 1;
    }

    score = score / 6 * 100;
    score = score.toFixed(2);
    alert("You scored " + score + "%");

    return false; // Return true if you want the form to submit on validation/grade
}

Answer 1

您的标记中有一些重大错误:

1. 不要将 form 元素包裹在每个问题周围。这些都应该位于一个 form 元素中。 (此外，每个问题都在 OL 中，以便对问题进行系列编号。)
2. 您没有正确关闭所有标签，因此当您点击它们时，它们会选择其他元素(尝试问题 3，第一个复选框)。
3. 您需要在表单的 submit 处理程序上使用 grade() 函数，并且该函数必须是 onsubmit="returngrade()" ，当 grade() 未“通过”阻止表单提交时返回 false*。

* 请注意，我在示例中将 grade() 函数设置为始终 return false。您需要添加何时允许提交表单的逻辑。

就 JavaScript 而言...

您需要 elt 变量等于您的 document.quiz (注意，我将主 form 更改为具有 >name="quiz" 在你的标记中)。如果您只想进行简单的检查，则可以使用 indexOf() 而不是正则表达式(不过，正则表达式可以将 age 作为单词进行检查)。

如果您只是想确保文本输入不为空，可以使用 el.value.length != 0 或 el.value != '' .

此外，查看您的评分代码，如果您只想选择一个，您可以使用 radio ，除非您希望参加测验的人不知道一个或多个答案是否有效。但单选仅允许您选择单个值。

HTML

<h3> Self-Grading Astronomy Quiz </h3>
<form action="" name="quiz" onsubmit="return grade();">
 <p>1. According to Kepler the orbit of the earth is a circle with the sun at the center.</p>
 <p>
  <label><input type="radio" name="question1" value="true" /> True </label>
  <label><input type="radio" name="question1" value="false" /> False </label>
 </p>
 <p>2. Ancient astronomers did consider the heliocentric model of the solar system but rejected it because they could not detect parallax.</p>
 <p>
  <label><input type="radio" name="question2" value="true" /> True </label>
  <label><input type="radio" name="question2" value="false" /> False </label>
 </p>
 <p>3. The total amount of energy that a star emits is directly related to its:</p>
 <p>
  <label><input type="checkbox" name="question3" value="1" /> a) surface gravity and magnetic field </label><br/>
  <label><input type="checkbox" name="question3" value="2" /> b) radius and temperature </label><br/>
  <label><input type="checkbox" name="question3" value="3" /> c) pressure and volume </label><br/>
  <label><input type="checkbox" name="question3" value="4" /> d) location and velocity </label>
 </p>
 <p>4. Stars that live the longest have:</p>
 <p>
  <label><input type="checkbox" name="question4" value="1" /> a) high mass </label><br/>
  <label><input type="checkbox" name="question4" value="2" /> b) high temperature </label><br/>
  <label><input type="checkbox" name="question4" value="3" /> c) lots of hydrogen </label><br/>
  <label><input type="checkbox" name="question4" value="4" /> d) small mass </label>
 </p>
 <p>5. A collection of a hundred billion stars, gas, and dust is called a __________.</p>
 <p>
  <input type='text' id='question5' />
 </p>
 <p>6. The inverse of the Hubble's constant is a measure of the __________ of the universe.</p>
 <p>
  <input type='text' id='question6' />
 </p>
 <p>
  <input type='button' onclick='grade()' value='Grade' />
 </p>
</form>

Javascript

function grade() {
    //**Would I do something like this?
    //if(elem.value.length == 0){
    // alert("Whoops, looks like you didn't answer a question.")}
    var score = 0;
    var elt = document.quiz;

    if (elt.question1[1].checked) {
        score += 1;
    }
    if (elt.question2[0].checked) {
        score += 1;
    }
    if (elt.question3[0].checked == false && elt.question3[1].checked && elt.question3[2].checked == false && elt.question3[3].checked == false) {
        score += 1;
    }
    if (elt.question4[0].checked == false && elt.question4[1].checked == false && elt.question4[2].checked == false && elt.question4[3].checked) {
        score += 1;
    }
    if (elt.question5.value != '' && elt.question5.value.indexOf('galaxy') != -1) {
        score += 1;
    }
    if (elt.question5.value != '' && elt.question6.value.indexOf('age') != -1) {
        score += 1;
    }

    score = score / 6 * 100;
    score = score.toFixed(2);
    alert("You scored " + score + "%");

    return false; // Return true if you want the form to submit on validation/grade
}

http://jsfiddle.net/BeD3Z/10/