如何解决HTML 变量不能为空
我正在尝试为一个愚蠢的小疯狂库创建一个表单。将表单放在一起后,我想确保从每个部分中选择了一些内容。每个部分都将信息传递给我创建的一个变量。我想确保总是选择某些东西,但从来没有做过这样的事情,因为这是编码新手。我尝试使用 required 属性,但没有任何结果。如果有人能在正确的方向上给我一点推动力,那就太棒了。
<body>
<script language="JavaScript">
function generateMadLib() {
//Declaring and Initializing variables
var Hobbies = "";
var name ="";
var PersonalityTrait = "";
var ColorChoice = "";
var DayOrNight ="";
var theSelect;
var choice = 0;
var theOption;
var story = "";
/*
Retrieving Name
document.madLibForm.txtName
-- madLibForm matches the name of the <form> element.
-- txtName matches the name of the <input> element.
*/
name = document.madLibForm.txtName.value;
//Retrieving Hobbies
if (document.madLibForm.chkVideoGames.checked == true) {
Hobbies = "Video Games ";
} //end if
if (document.madLibForm.chkWorkingOut.checked == true) {
Hobbies += "Working Out ";
} //end if
if (document.madLibForm.chkReading.checked == true) {
Hobbies += "Reading ";
} //end if
if (document.madLibForm.chknothing.checked == true) {
Hobbies += "Other ";
} //end if
//Retrieving Meal Type
if (document.madLibForm.DayOrNight[0].checked == true) {
DayOrNight = document.madLibForm.DayOrNight[0].value;
} else {
DayOrNight = document.madLibForm.DayOrNight[1].value;
} //end if
//Retrieving Personality trait
theSelect = document.madLibForm.Personality;
choice = theSelect.selectedindex;
theOption = theSelect.options[choice];
PersonalityTrait = theOption.value;
//Retrieving Color choice
theSelect = document.madLibForm.FavoriteColor;
choice = theSelect.selectedindex;
theOption = theSelect.options[choice];
ColorChoice = theOption.value;
/*
Create the story using the user input that was provided
*/
story = name + " such an odd name. Well " + name + " what kind of hobbies do you have? Oh I see you enjoy " + Hobbies +
". That's cool I personally enjoy playing video games and soccer so my hobbies are better than yours. It also seems you enjoy " + Hobbies +
" at " + DayOrNight + " that is strange,I enjoy the opposite time of day. Lets see what kind of personality you have. " + name +
" has " + PersonalityTrait + ". Wow finally something we have in common. Now lets see what color you picked. " + name +
" picked " + ColorChoice + ",and we are back to disagreeing again. Based on the answers you have given we can't be friends.";
document.madLibForm.story.value = story;
}
</script>
</head>
<h1>Mad Lib</h1>
Create a Mad-lib story by filling out the input controls listed.
<form name = "madLibForm">
<h3>Give a name,any name will do:</h3>
<input type = "text" name = "txtName" value = "">
<P>
<h3>what kind of hobbies do you have?:</h3>
<input type = "checkBox" name = "chkVideoGames" value = "Video Games">Video games<br>
<input type = "checkBox" name = "chkWorkingOut" value = "Working Out">Working out<br>
<input type = "checkBox" name = "chkReading" value = "Reading">Reading<br>
<input type = "checkBox" name = "chknothing" value = "Other">Other<br>
<h3>Morning or Night</h3>
<input type = "radio" name = "DayOrNight" value = "Morning">Morning<br>
<input type = "radio" name = "DayOrNight" value = "Night">Night<br>
<P>
<h3>What kind of personality do you have?</h3>
<select name = "Personality">
<option value = ""></option>
<option value = "Shy">Shy</option>
<option value = "Outgoing">Outgoing</option>
<option value = "Crazy">Crazy</option>
</select>
<p>
<h3>Of the three which color do you prefer</h3>
<select name = "FavoriteColor">
<option value = ""></option>
<option value = "Red">Red</option>
<option value = "Blue">Blue</option>
<option value = "Yellow">Yellow</option>
</select>
<p>
<input type = "button" value = "display Story" onClick = "generateMadLib()">
<p>
<h3>Mad-lib story:</h3>
<textarea name= "story" rows="20" cols="80" wrap>
</textarea>
<p/>
<input type="reset" value="Reset Mad-lib">
</form>
</body>
解决方法
您可以在某些表单元素上使用 HTML 属性来强制用户选择或输入某些内容。 请参阅 HTML select required attribute 和 HTML input required attribute。
不过,这不会禁止用户提交包含空白元素的表单,因此如果您将其提交到某个服务器,则应始终在前端和后端进行验证。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。