javascript - 验证多个表格并计算值

Question

我在验证表格时遇到了一些麻烦。表单的设计已提供给我，但我必须编写脚本来验证表单。当我开始验证状态以及之后的所有内容时，它不起作用。在计算应付总额时，它应该会随着注册费和其他一切而改变，但我无法显示和计算价值。请帮忙。这是一个加速的 javascript 类，我已经习惯了 java。

我需要做以下事情： 当用户更改参加宴会的人数时，计算总的宴会费用，显示金额，并重新计算并显示总计。

当用户单击注册按钮时，验证必填字段是否已填写。仅当必填字段满足以下条件时才应提交表格：

名字、姓氏、街道和城市不能为空
必须选择一个州
必须输入 5 位邮政编码（可选 - 可以使用 5 位或 9 位表格）
电子邮件地址必须包含“@”符号（可选 - 找到并应用正则表达式以验证电子邮件地址的格式）
必须使用 3 位数的区号、3 位数的前缀和 4 位数的交换机输入电话号码

这是表格的样子： https ://angel.aacc.edu/AngelUploads/Content/CSI1498752012FA/Misc/Lab5.htm

到目前为止只得到了这个

function validateForm()
{
    var valid = false;

    if(document.registration.fname.value == "")
    {
        alert("First name must be entered.");
        return valid;
    }
    else if(document.registration.lname.value ==  "")
    {
        alert("Last name must be entered.");
        return valid;
    }
    else if(document.registration.street.value ==  "")
    {
        alert("Sreet address must be entered.");
        return valid;
    }
    else if(document.registration.city.value ==  "")
    {
        alert("City must be entered.");
        return valid;
    }
    else if(document.registration.zip.value == /(^\d{5}$)|(^\d{5}-\d{4}$)/)
    {
        alert("Enter a valid zip code.");
        return valid;
    }
}

function calcTotal()
{
    // some code here
}

score 0 · Accepted Answer

你错过了很多......下面有一些代码我认为应该让你更接近。我注意到的几个问题是，City 正在寻找 != 而不是 ==，提交按钮应该只在验证成功时才返回，所以不是

onclick="validateForm()"

onclick="return validateForm()"

我在 HTML 的正文中添加了对 CalcTotal 的调用，以便它始终设置为某个值。

然后我让你开始处理小计字段，我认为你需要在那里进行一些编辑，但希望这能让你足够接近以完成它。

<html>
<head>
<title>Registration Form</title>
<style>
#main h1 {font-size: 18pt; color: rgb(83,183,51); letter-spacing: 4;
       border-top: 2px solid rgb(83,183,51); font-weight: bold}
#main p {font-size: 9pt;}
#main #intro {text-align: right; font-weight: bold}
span {color: red}

table {font-size: 8pt; width: 510px; padding: 10px;
       border-bottom: 2px solid rgb(83,183,51)}

#lname, #fname, #city, #email, #memberid {width: 198px}
#street {width: 432px}
#zip {width: 88px}
#regFee, #banq, #options, #grandTotal {width: 60px}
</style>
<script type="text/javascript">

function validateForm()
{

    if(document.registration.fname.value == "")
    {
        alert("First name must be entered.");
        return false;
    }
    else if(document.registration.lname.value ==  "")
    {
        alert("Last name must be entered.");
        return false;
    }
    else if(document.registration.street.value ==  "")
    {
        alert("Street address must be entered.");
        return false;
    }
    else if(document.registration.city.value ==  "")
    {
        alert("City must be entered.");
        return false;
    }
    else if(document.registration.state.value ==  "Choose")
        {
            alert("Please select a state");
            return false;
    }
    else if(document.registration.zip.value == /(^\d{5}$)|(^\d{5}-\d{4}$)/)
    {
        alert("Enter a valid zip code.");
        return false;
    }
    return true;          
}


function calcMeals()
{
    var mealTotal = 0.00;

    if(document.getElementById("optBreakfast").checked)
        mealTotal = mealTotal + 5.00;
    if(document.getElementById("optLunch").checked)
        mealTotal = mealTotal + 10.00;
    document.getElementById("options").value = mealTotal.toFixed(2);
    calcTotal();
}

function calcBanq()
{
    var banqTotal = 0
    var numGuests = document.getElementById("guest").value;
    if(numGuests > 0)
        document.getElementById("banq").value = (30 * numGuests);
    else
        document.getElementById("banq").value = 0.00;
}

function calcTotal()
{
    var regFee = 125.00;
    var options = document.getElementById("options");
    var banquet = document.getElementById("banq");
    var total = regFee + Number(options.value) + Number(banquet.value);

    document.getElementById("grandTotal").value = parseFloat(total).toFixed(2)
}



</script>
</head>

<body>
<div id="main">
<p id="intro">15th Annual JavaScript Conference<br />
   Anne Arundel Community College<br />
   April 26<br />
   Conference Fee: $125
</p>
<h1>Conference Registration Form</h1>

<form id="registration" name="registration" >

<table>
<tr>
   <td><span>*</span>First Name</td>
   <td><input name="fname" id="fname" /></td>
   <td><span>*</span>Last</td>
   <td colspan="3"><input name="lname" id="lname" /></td>
</tr>

<tr>
   <td><span>*</span>Street</td>
   <td colspan="5"><input type="text" id="street" name="street" /></td>
</tr>

<tr>
   <td><span>*</span>City</td>
   <td><input type="text" id="city" name="city" /></td>
   <td><span>*</span>State</td>
   <td><select id="state" name="state">
              <option value="" selected>Choose</option>
              <option value="AK" >AK</option>
              <option value="AL" >AL</option>
              <option value="AR" >AR</option>
              <option value="AZ" >AZ</option>
              <option value="CA" >CA</option>
              <option value="CO" >CO</option>

              <option value="CT" >CT</option>
              <option value="DC" >DC</option>
              <option value="DE" >DE</option>
              <option value="FL" >FL</option>
              <option value="GA" >GA</option>
              <option value="HI" >HI</option>

              <option value="IA" >IA</option>
              <option value="ID" >ID</option>
              <option value="IL" >IL</option>
              <option value="IN" >IN</option>
              <option value="KS" >KS</option>
              <option value="KY" >KY</option>

              <option value="LA" >LA</option>
              <option value="MA" >MA</option>
              <option value="MD" >MD</option>
              <option value="ME" >ME</option>
              <option value="MI" >MI</option>
              <option value="MN" >MN</option>

              <option value="MO" >MO</option>
              <option value="MS" >MS</option>
              <option value="MT" >MT</option>
              <option value="NC" >NC</option>
              <option value="ND" >ND</option>
              <option value="NE" >NE</option>

              <option value="NH" >NH</option>
              <option value="NJ" >NJ</option>
              <option value="NM" >NM</option>
              <option value="NV" >NV</option>
              <option value="NY" >NY</option>
              <option value="OH" >OH</option>

              <option value="OK" >OK</option>
              <option value="OR" >OR</option>
              <option value="PA" >PA</option>
              <option value="RI" >RI</option>
              <option value="SC" >SC</option>
              <option value="SD" >SD</option>

              <option value="TN" >TN</option>
              <option value="TX" >TX</option>
              <option value="UT" >UT</option>
              <option value="VA" >VA</option>
              <option value="VT" >VT</option>
              <option value="WA" >WA</option>

              <option value="WI" >WI</option>
              <option value="WV" >WV</option>
              <option value="WY" >WY</option>
              <option value="AA" >AA</option>
              <option value="AE" >AE</option>
              <option value="AP" >AP</option>

              <option value="AS" >AS</option>
              <option value="FM" >FM</option>
              <option value="GU" >GU</option>
              <option value="MP" >MP</option>
              <option value="MH" >MH</option>
              <option value="PR" >PR</option>

              <option value="PW" >PW</option>
              <option value="VI" >VI</option>
            </select></td>
   <td><span>*</span>Zip</td>
   <td><input type="text" id="zip" name="zip" /></td>
</tr>

<tr>
   <td><span>*</span>E-mail</td>
   <td colspan="5"><input name="email" id="email" /></td>
</tr>

<tr>
   <td><span>*</span>Phone Number</td>
   <td colspan="5">
       ( <input id="phone1" name="phone1" size="3" /> )
       <input id="phone2" name="phone2" size="3" /> -
       <input id="phone3" name="phone3" size="4" />
   </td>
</tr>

<tr><td colspan="6">&nbsp;</td>
</tr>

<tr>
   <td colspan="5">Registration Fee</td>
   <td>$<input type="text" id="regFee" name="regFee" value="125.00" readOnly="true" />
</tr>

<tr>
   <td colspan="6">Optional (additional fees may apply)</td>
</tr>

<tr>
   <td colspan="5">
       <input type="checkbox" onchange="calcMeals()" name="opt1" id="optBreakfast" value="5" /> Breakfast ($5)
       <input type="checkbox" onchange="calcMeals()" name="opt2" id="optLunch" value="10" /> Lunch ($10)
       <input type="checkbox" onchange="calcMeals()" name="opt3" id="optHappyHour" checked value="0" /> Happy Hour (free!)
   </td>
   <td>$<input type="text" id="options" name="options" value="0.00" readOnly="true" /></td>
</tr>

<tr>
   <td colspan="2">Number attending dinner banquet ($30 per person)</td>
   <td>&nbsp;</td>
   <td>
       <select id="guests" name="guests" onchange="CalcBanq()">
       <option>0</option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       </select>
   </td>
   <td>&nbsp;</td>
   <td>$<input type="text" id="banq" name="banq" value="0.00" readOnly="true" /></td>
</tr>

<tr><td colspan="6">&nbsp;</td>
</tr>

<tr>
   <td colspan="5">Grand Total Due</td>
    <td>$<input type="text" id="grandTotal" name="grandTotal" readOnly="true" /></td>
</tr>
</table>

<p><span>* Required Information</span></p>
<p style="text-align: center"><input id="sbutton" type="submit" value="Register" onclick="return validateForm()" /></p>

</form>

</div>
<script type="text/javascript">
    calcTotal();
</script>
</body>
</html>

javascript - 验证多个表格并计算值

1 回答 1

Related

Reference