发布于2024-11-04 23:22 阅读(282) 评论(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>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/535598/610c8f15be7c03b868ad/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!