Question

我已经提出了一个问答形式＆＃39;在HTML中并将其与Javascript链接，以便人们可以使用特定的数字进行回答。以下是我的代码示例：

HTML code：

<p>Question</p>
<p>1)"ans1"</p>
<p>2)"ans2"</p>
<p>3)"ans3"</p>
<p>4)"ans4"</p>
<form method="POST" name="CorrectForm" 
   onSubmit="checkCorrect(document.CorrectForm.numCorrect.value); return false;">

    <input type="text" name="numCorrect" id="numCorrect">
    <input type="Submit" name="Submit">
</form>

JavaScript的：

var correctnumber = 1;
var errormessage = "blabla";

function checkTrue (numTrue){        
    if (numCorrect == correctNumber){  
         alert("Correct")
    }else{
        alert(errormessage);
    }
}

现在我想要的是让人们从下拉列表中选择答案。所以我希望在按下提交按钮时检查答案。

所以，HTML看起来像

<p>Question</p>
<select>
    <option value="ans1">ans1</option>
    <option value="ans2">ans2</option>
    <option value="ans3">ans3</option>
    <option value="ans4">ans4</option>
</select>

所以现在我需要JS部分。

如果我之前已经问过这个问题一百万次，我很抱歉，因为我试图寻找一个解决方案，但却找不到解决方案。

提前致谢！

Answer 1

您可以创建一个验证完整表单的函数，而不是创建仅验证输入数字的函数。见这个例子：

<!DOCTYPE html>
<html>
<head>
<title>Validation test</title>

<script>
var rightAnswer = 3;

function checkAnswer(form) {
    if (parseInt(form.elements["answer"].value) == rightAnswer) {
        alert("Correct");
    } else {
        alert("Wrong");
    }
    return false;
}
</script>

</head>
<body>

<form method="POST" onsubmit="checkAnswer(this); return false;">
    <p>Question:</p>
    <select name="answer">
        <option value="1">ans1</option>
        <option value="2">ans2</option>
        <option value="3">ans3</option>
        <option value="4">ans4</option>
    </select>
    <input type="submit">
</form>

</body>
</html>

一些评论：

在事件onsubmit=""的代码中，您可以使用关键字this来引用表单本身，并将其传递给checkAnswer()函数。
如果您的变量form指向HTML表单，则可以通过form.elements["NAME"]检索其字段，其中NAME与HTML标记中的属性name=""匹配。这适用于所有控件，select，button，input，但<input type="image">除外。

有关此问题，请参阅MDN，其中包含有关HTML DOM中每个对象的详细参考，特别是<select>。

您可能仍需要将value转换为整数才能将其与正确答案进行比较，这就是parseInt的原因。
这种方法可以概括：您想要做的是等同于表单验证，您可以在网上找到大量的库和教程，详细说明如何操作;如果你知道要寻找什么，也有很多答案。

如何对下拉列表进行简单验证？

1 个答案: