嗨，我几乎完成了关于“Javascript”的作业，尽管我找不到任何关于如何使某些字段互斥的信息，基本上我表单的顶部部分用户必须将地址插入必填字段，然后在表单的下方是一个单选复选框，用户必须选择家庭地址或其他，（家庭是他们已经插入的最高地址）如果选择他们不必在其他地方插入任何东西但我需要制作的家庭，表格已经过验证互斥所以如果他们选择其他它不能与上面相同，任何人都可以帮助我或给我一个教程链接，因为我只能在互斥单选按钮或复选框上找到信息用户输入的内容没有到文本框谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Joes Fruit and Vegetable Store</title>
<script>
//calender dropdown menu
var monthtext=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var i=0; i<31; i++)
dayfield.options[i]=new Option(i, i+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<20; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear+=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}
// function validate
function validate_form ()
{
//validate name
valid = true;
if ( document.input.name.value == "")
{
alert ( "Please enter your name");
valid = false;
}
// validate address
if ( document.input.address.value == "")
{
alert ( "Please enter your Address" );
valid = false;
}
// validate Town
if ( document.input.town.value == "")
{
alert ( "Please enter your Town" );
valid = false;
}
// validate postcode
var y = document.getElementById("postcode").value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Postcode must be in numbers.");
document.getElementById("postcode").focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Postcode should be 4 digit");
document.getElementById("postcode").focus();
return false;
}
// validate home phone
var y = document.getElementById('hphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Home Phone number must be in numbers.");
document.getElementById('hphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Home Phone number should be 10 digit");
document.getElementById('hphone').focus();
return false;
}
// validate work phone
var y = document.getElementById('wphone').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("work Phone number must be in numbers.");
document.getElementById('wphone').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Work Phone number should be 10 digit");
document.getElementById('wphone').focus();
return false;
}
// validate fax
var y = document.getElementById('fax').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Fax number must be in numbers.");
document.getElementById('fax').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Fax Phone number should be 10 digit");
document.getElementById('fax').focus();
return false;
}
// validate email
{
var x=document.forms["input"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
// validate radio buttons
var o = document.getElementById('rad1');
var t = document.getElementById('rad2');
if ( (o.checked == false ) && (t.checked == true ) )
{
// validate alternative address
if ( document.input.street.value == "")
{
alert ( "Please enter alternative Address" );
valid = false;
}
// validate alternative suburb town
if ( document.input.suburb.value == "")
{
alert ( "Please enter alternative Suburb or town" );
valid = false;
}
} // validate alternative postcode
if ( (o.checked == false ) && (t.checked == true ) )
{
var y = document.getElementById('postcode2').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Alternative Postcode must be in numbers.");
document.getElementById('postcode2').focus();
return false;
}
if (y.length>4 || y.length<4)
{
alert("Alternative Postcode should be 4 digit");
document.getElementById('postcode2').focus();
return false;
}
}
//validate message box
var o = document.getElementById("card");
if (o.checked == true )
{
if ( document.input.message.value == "" || document.input.message.value == "Please Enter message here" )
{
alert ( "Please enter message" );
valid = false;
}
return valid;
}
}
</script>
</head>
<body>
<b>Order form for Joe's Fruit Shop</b><br>
<br>
<b> * means you must fill in the details.</b><br>
<br>
<b>Your details:</b><br>
<br>
<!-- Beggining of Form -->
<form name="input" action="Joes.html" onsubmit="return validate_form ()">
<!--name input form -->
* Name: <input type="text" name="name" id="name" onclick="this.value='';" placeholder="Enter your Name"><br>
<br>
<!-- Address input form -->
* Address: <input type="text" name="address" id="address" onclick="this.value='';" placeholder="Enter your street address"><br>
<br>
<!-- Town & state dropdown form-->
* Suburb or Town: <input type="text" name="town" id="town" onclick="this.value='';" placeholder="Town"> * State:
<!-- state drop down list -->
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<!-- post code input form -->
* Postcode: <input type='text' name="postcode" id="postcode" onclick="this.value='';" placeholder="****"><br>
<br>
<!-- Home phone input form-->
* Phone: <input type='text' name="hphone" id="hphone" onclick="this.value='';" placeholder="x-xxxx-xxx">
<!-- work phone input form -->
* Work phone <input type='text' name="wphone" id="wphone" onclick="this.value='';" placeholder="x-xxxx-xxx"><br>
<br>
<!-- Fax input form-->
*Fax: <input type='text' name="fax" id="fax" onclick="this.value='';" placeholder="0x-xxxx-xxx">
<!-- Email input form-->
* Email address: <input type='text' name="email" id="email" onclick="this.value='';" onsubmit="return validateForm();" placeholder="Enter your current email"><br>
<br>
<br>
<!-- credit card form --> <b>Credit card details:</b><br>
<br>
* Type:
<select name="credit card">
<option selected="selected" value="AMEX">Amex</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
</select>
<!--credit card month expiry date-->
*Expiry date:
<select name="expiration_month">
<option value="">Choose...</option>
<option selected="selected" value="1">January</option>
<option value="2">Febuary</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<!-- Credit card year expiry date-->
<select name="expiration_year">
<option value="">Choose...</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<br>
<br>
<b>Purchase details</b><br>
<br>
<!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
<!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br>
<br>
<br>
* <b>Deliver to:</b>
<br>
<br>
<!-- Address Radio check buttons-->
<input type='radio' id="rad1" name='rad' checked="checked">Home Address<br>
<input type='radio' id="rad2" name='rad'/>Other Address<br>
<br>
<!-- alternative street form-->
Street <input type='text' name="street" id="street" onclick="this.value='';" placeholder="Street"><br>
<br>
<!-- alternative Suburb form-->
Suburb <input type='text' name="suburb" id="suburb" onclick="this.value='';" placeholder="Suburb or town"><br>
<br>
<!-- alternative State dropdown form-->
State
<select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select>
<br>
<br>
<!-- alternative post code form -->
Postcode:<input type='text' name="postcode2" id="postcode2" onclick="this.value='';" placeholder="****"><br>
<br>
<br>
* Date delivery required:
<!-- Calender drop down menu-->
<select id="daydropdown">
</select>
<select id="monthdropdown">
</select>
<select id="yeardropdown">
</select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>
<br>
<br>
<!-- include a card option-->
Include a card: <input type="checkbox" name="card" id="card">Yes<br>
<br>
Personal message on card: <textarea name="message" id="message" cols="20" rows="10" onclick="this.value='';">Please Enter message here</textarea><br>
<br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
<!-- submit button-->
<input type="submit" value="Submit">
<!-- reset button-->
<input type="reset" value="Reset">
</form><br>
<script>
<!--
document.write("<i>Last updated "+document.lastModified+"<I>");
//-->
</script>
</body>
</html>