1. 首頁
  2. 問答
  3. 驗證多個表單和計算值

驗證多個表單和計算值

2012-09-30 46 views
0

驗證表單時遇到了一些麻煩。表單的設計已提供給我，但我必須編寫腳本來驗證表單。當我開始驗證國家及其後的所有內容時，它不起作用。在完成到期的總額時，假設要更改註冊費用和其他所有內容，但我無法顯示和計算價值。請幫忙。這是一個加速的JavaScript類，我只是習慣了java。驗證多個表單和計算值

我需要做到以下幾點： 當用戶更改出席宴會的數量，計算出總的宴會費用，顯示的金額，並重新計算和顯示總計。

當用戶單擊註冊按鈕時，驗證必填字段已完成。當所需的字段滿足以下條件的表單只能提交：

  • 姓，名，街道和城市不能爲空
  • 一個國家必須選擇
  • 一個5位數郵政編碼必須輸入代碼（可選 - 可以使用5位或9位數字格式）
  • 電子郵件地址必須包含「@」符號（可選 - 查找並應用正則表達式以驗證電子郵件地址的格式）
  • 電話號碼必須正好使用3位數字輸入區號，3位數字前綴T，和一個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 
}

來源

2012-09-30 ai5uzu

+0

1）〜'變化<形式的onsubmit = 「返回validateForm（）」 ...>' 2）添加'返回valid'到功能 – mplungjan

+0

我所做的更改的端你建議，但是當我將表格留空，應該說「必須輸入姓名」。但現在它不會彈出任何東西。 – ai5uzu

+0

我認爲你應該保留你的行'valid = false;'並且在你的函數的結尾放置'return valid;'（在任何'if'語句之外）。這樣，所有字段都會被驗證，並且如果多個字段爲空或無效，用戶將會收到通知。如果您在每個if語句中都返回有效值，那麼只會通知用戶第一個無效字段。但是我想這個偏好取決於你。如果你想這樣保留，你應該在每個if語句中都返回false。 – Ian

回答

0

你失蹤相當bit..there是下面的一些代碼我認爲應該讓你更接近。 一對夫婦的我發現了問題是，城市一直在尋找！=的==而不是提交按鈕，如果驗證成功應該只返回，所以不是

onclick="validateForm()" 

onclick="return validateForm()"

我加入CalcTotal調用身體的HTML，所以它總是設置爲某些東西。

然後我讓你開始了小計領域，我想你需要在那裏做一些編輯，但是希望這會讓你足夠接近完成它。

<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>

來源

2012-09-30 17:56:38 hardba11

+0

您需要在最後返回true，並且爲每個人都提供一個幫助，並附加處理程序以提交而不是點擊時不建議觸摸提交按鈕。最後將內聯計算移動到頁面的onload。 Ps：這顯然是功課，所以儘量不要爲他做所有的工作。家庭作業標籤由於某些深不可測的原因而被棄用。 – mplungjan

相關問題

 相關問題