-3
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Exercises</title>
<style type="text/css">
body {
font-family:Verdana, Geneva, sans-serif;
font-size:100%;
margin:0;
padding:0;
}
p {
color:#900;
margin-left:20px;
}
fieldset {
border-color: #FFF;
border-radius: 15px;
}
div#results {
background-color:#FF6;
height:auto;
width:500px;
border:1px solid red;
padding:10px;
margin-left:20px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
border-radius:7px;
}
div#more {
background-color: #39F;
height:auto;
width:500px;
border:1px solid #036;
padding:10px;
margin-left:20px;
margin-top:20px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
color:#CF0;
}
#form1
{
padding: 10px;
width: 500px;
border-style: solid;
border-color: #063;
border-radius: 15px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #CFF;
margin:20px;
}
</style>
<script type="text/javascript">
function validateForm1() //function called validateForm1 is associated with the
Submit button at the bottom of the form. NOTICE that the button element is a
type=button NOT a type=submit
{
var message; //this variable is going to be for your first message
var checkValue; // this variable is going to be for the value of your radio group
var fname = document.form1.firstName;//equal to the value of your name field --
create code here
var yage = document.form1.yourAge;//equal to the value of your age field -- create
code here
if (fname.value=="") { //if the name field is null -- create code here
message = "Hey, you forgot to fill in your name!"; //message value will be
this string
document.getElementById("results").innerHTML = message; //element called
results is a division at the bottom of the page where the message will be displayed
document.form1.firstName.focus(); //refocus the cursor to the name field
return;
} else {
message = ""; //if the name field is not null, no message will be generated
document.getElementById("results").innerHTML = message;
}
if (yage.value=="") { //if the age field is null -- create code here
message = "Your age is required!"; //message value will be this string
document.getElementById("results").innerHTML += "<br>"+message; //element
called results is a division at the bottom of the page where the message will be
displayed
document.form1.yourAge.focus(); //refocus the cursor to the age field
return;
} else if(isNaN(yage.value)) { //if the input of the age field is not a number
-- create code here
message = "Your age is supposed to be a number, please enter a number!";
//message value will be this string
document.getElementById("results").innerHTML += "<br>"+message; //element called
results is a division at the bottom of the page where the message will be displayed
document.form1.yourAge.focus(); //refocus the cursor to the age field
return;
}else if(yage.value < 10 || yage.value > 100) { //if the age field is less
than 10 or greater than 100 -- create code here
message = "You know, I do not believe your age is correct!"; //message value
will be this string
document.getElementById("results").innerHTML += "<br>"+message; //element
called results is a division at the bottom of the page where the message will be
displayed
document.form1.yourAge.focus(); //refocus the cursor to the age field
return;
} else { //when all validations for name and age are clear
message = fname.value + " you are " + yage.value + ". Welcome!"; //message that is generated if the name and age fields are validated
document.getElementById("results").innerHTML = message; //output message to div called results
}
var radiogrp = document.form1.skilltype.length; //create a variable to the radio group -- create code here
for(var i=0; i<radiogrp; i++) //loop through to check to see if a radio button was selected -- create code here
{
在這裏的文字是代碼我有 我想要得到它，選擇什麼樣的問題的區鍵入，但現在當沒有收音機被選中時，它會起作用，當你選擇一個時，它說沒有。
if（document.form1.skilltype [i] .checked）{//在這裏創建代碼
checkValue = document.form1.skilltype [i] .value; //在這裏創建代碼 } } if（checkValue == radiogrp [0]）{//如果單選按鈕被選中，則創建以下消息 - 在此處創建代碼 st_message =「哇！」+ checkValue +「 ，那石頭！「; //生成的消息 document.getElementById（「more」）。innerHTML = st_message; //在div中顯示的消息更多 } else {//如果沒有選中單選按鈕 var st_message =「您沒有選擇技能！」; //生成此消息 document.getElementById（「more」）。innerHTML = st_message; //顯示此消息在div叫得更 }試圖讓無線電集團的驗證工作正確的，但是我似乎有它向後
message = ""; //clear out your message variables so old data does not linger
st_message = "";
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" type="radio">
<fieldset>
<div style="float:left"><strong>First Name:</div>
<div style="float:right; margin-right:150px"></strong><input type="text" name="firstName" id="firstName" /></div>
<div style="clear:both"></div>
<div style="float:left"><strong>Your Age:</strong></div>
<div style="float:right; margin-right:150px"><input type="Text" name="yourAge" id="yourAge" /></div>
<div style="clear:both"></div><br />
<center>
<label><input type="radio" name="skilltype" value="Designer" id="skilltype_0" /><strong>Designer</strong></label>
<label><input type="radio" name="skilltype" value="Developer" id="skilltype_1" /><strong>Developer</strong></label>
<label><input type="radio" name="skilltype" value="Programmer" id="skilltype_2" /><strong>Programmer</strong></label>
<label><input type="radio" name="skilltype" value="Artist" id="skilltype_3" /><strong>Artist</strong></label>
</center>
</fieldset>
<br />
<center>
<input type="button" value="Submit" onClick="validateForm1()" />
<input type="reset" value="Clear Form" />
</center>
</form>
<div id="results"></div>
<div id="more"></div>
</body>
</html>
還是很難看。將來，請考慮創建一個小提琴。 –