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

检查单个表单元素以查看它们是否为空

您只需将该值与空字符串进行比较：

if(elt.question6.value == '') {
  alert('Unanswered');
}

Answer 2

您可以使用jquerys内置验证http://docs.jquery.com/Plugins/validation。它具有内置功能，可以检查是否需要并在字段下方显示错误消息，该消息是空白的。

Answer 3

您的标记中存在一些重大错误：

不要在每个问题周围包裹form元素。这些都应该在一个form元素中。（另外，每个问题都在OL中，以问题编号。）
您没有正确关闭所有label，因此当您点击它们时会选择其他元素（尝试问题3，首先选中复选框）。
您需要表单的grade()处理程序中的submit函数，并且它必须是onsubmit="return grade()"，grade()返回false “通过”以防止表单提交*。

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

就Javascript而言......

您需要elt变量等于document.quiz（注意，我更改了主form以在您的标记中添加name="quiz"。如果您只想进行简单的检查（正则表达式可以检查indexOf()作为单词），则可以使用age代替正则表达式。

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

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

<强> 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/

检查javascript中的空表单元素

3 个答案: