Question

这是我试图为其创建异常处理的 html 代码。我正在尝试为此代码中的第一个表单创建例外。

<form id="survey" name="survey" method="post">
<div id="errorText"></div>
<fieldset class="labelfloatleft" id="contactinfo"><legend>Your Thoughts</legend>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" />

<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname"  />

<label for="emailaddress">Email Address</label>
<input type="email" name="emailaddress" id="emailaddress" 
size="30" placeholder="foryou@yahoo.com" />
</fieldset>
<fieldset><legend>Best Movie</legend>

<input type="radio" name="movie" id="horror" value="horror" checked="checked"/>
<label for="horror">The Horror</label>

<input type="radio" name="movie" id="badabing" value="badabing" />
<label for="badabing">Bada-Bing Bada-Boom</label>

<input type="radio" name="movie" id="roll" value="roll" />
<label for="roll">Roll or Die</label>
</fieldset>
<fieldset><legend>Comments</legend>
<label for="message">Your Opinion</label>
<textarea name="message" id="message" rows="7" cols="30"></textarea>
</fieldset>
<input type="submit" value="Send" class="button" id="submitBtn"/>
<input type="reset" value="Cancel" class="button" />
</form>


<h2>Welcome To Our World</h2>

<p class="very">We are a small time movie theater looking to help inspire
people who come to our theater. Our theaters come with
fresh food, cold and hot drinks, souvenirs and comfortable
seats to help make your experience worth while.
</p>

<h2>Most Popular</h2>

<ul>
<li>The Horror</li> 
<li>Bada-Bing Bada-Boom</li> 
<li>Roll or Die</li>
</ul>


<h2>Prices</h2>
<table title="prices">
<tr>
    <th>Ticket</th>
    <th>Price</th>
    <th>Thursday Deal</th>
</tr>
<tr>
    <td>Adult</td>
    <td>$10.00</td>
    <td rowspan="3">Half-Off</td>
    
</tr>
<tr>
    <td>Child</td>
    <td>$6.00</td>
</tr>
<tr>
    <td>Senior</td>
    <td>$8.00</td>
</table>

<form id="price" name="price" method="post">

<fieldset><legend>Ticket Quantity</legend>
<label for="adultinput">Adult 15-60
<input type="text" id="adultinput" value="1" size="2"/>
</label>
<label for="childinput">Child 1-14
<input type="text" id="childinput" value="0" size="2"/>
</label>
<label for="seniorinput">Senior 50 and up
<input type="text" id="seniorinput" value="0" size="2"/>
</label>
</fieldset>

<input type="submit" value="Calculate" id="calculate" class="button" />
<input type="reset" value="Cancel" class="button" />
</form>

这是我试图开始工作的异常处理代码。但是，无论我修改多少，它都无法正确显示。我已在 Chrome 中运行它并尝试使用调试器来提供帮助，但是当我单击提交按钮时仍然无法显示异常。

 "use strict";
var fnameComplete = true;
var lnameComplete = true;
var emailComplete = true;
var fname = document.getElementById("firstname").value;
var lname = document.getElementById("lastname").value;
var email = document.getElementById("emailaddress").value;
var errorDiv = document.getElementById("errorText");

function verifyFname() {
var validity = true;    
var messageText = "";
var errorDiv = document.getElementById("errorText");
try {
    if(!(isNaN(fname.value)) || (fname.value === "")){
            fname.style.background = "rgb(255,233,233)";
            throw "Please enter your first name.";
        } 
}
catch(message) {
    validity = false;
    messageText = message;
}
finally{
    numErrorDiv.style.display = "block";
    fnameComplete = validity;
    errorDiv.innerHTML = messageText;
}
}

function verifyLname() {
var validity = true;    
var messageText = "";
var errorDiv = document.getElementById("errorText");
try {
    if(!(isNaN(lname.value)) || (lname.value === "")){
            lname.style.background = "rgb(255,233,233)";
            throw "Please enter your first name.";
        } 
}
catch(message) {
    validity = false;
    messageText = message;
}
finally{
    errorDiv.style.display = "block";
    lnameComplete = validity;
    errorDiv.innerHTML = messageText;
}
}

function verifyEmail() {
var validity = true;    
var messageText = "";
var errorDiv = document.getElementById("errorText");
try {
    if(email === "") {
        email.style.background = "rgb(255,233,233)";
        throw "Please enter your email.";
    }
}
catch(message) {
    validity = false;
    messageText = message;
}
finally{
    numErrorDiv.style.display = "block";
    emailComplete = validity;
    errorDiv.innerHTML = messageText;
}
}

function validateForm(e) {
if (e.preventDefault) {
    e.preventDefault(); //prevent form from submitting
} else {
    e.returnValue = false; //prevent form from submitting in IE8
}
formValidity = true; //reset value for revalidation
verifyEmail();
verifyFname();
verifyLname();
if(formValidity === true) {
    document.getElementsByTagName("form")[0].submit();
}
}

function createEventListeners() {
var form = document.getElementsByTagName("form")[0];
if (form.addEventListener){
    form.addEventListener("submit", validateForm, false);
} else if(form.attachEvent) {
    form.attachEvent("onsubmit", validateForm);
}
}

if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
} else if(window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}

Answer 1

您似乎试图访问一个不存在的字段。

这里你已经得到了字段的值

var fname = document.getElementById("firstname").value;
var lname = document.getElementById("lastname").value;
var email = document.getElementById("emailaddress").value;

并且在您的比较中，您尝试再次访问值字段。但是你已经拥有了普通的价值

if(!(isNaN(lname.value)) || (lname.value === "")){
}

改成这样

if(!(isNaN(lname)) || (lname === "")){
}

为什么我的异常处理没有被捕获？

1 个答案: