1. 首页
  2. 问答
  3. 验证多个表单和计算值

验证多个表单和计算值

2012-09-30 45 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

相关问题

 相关问题