javascript - 表单验证无法正常工作，不检查条目就继续

Question

Javascript 中的代码在这里:

<script  type="text/javascript">

function validateForm()
{
    var firstname=document.getElementById("firstname").value;
    var tel=document.getElementById("tel").value;
    var textarea=document.getElementById("textarea").value
    var email1=document.getElementById("email1").value;
    var email2=document.getElementById("email2").value;

if(validate_req(firstname,tel,textarea,email1,email2)==true&&
validate_name(firstname)==true&&
isnumeric(tel)==true&&
isAlpha(prof)==true&&
validate_email(email1)==true&&
validate_email(email2)==true&&
equal_emails(email1,email2)==true)
return true;
else
return false;}

function validate_req(firstname, tel,textarea,email1,email2)
{ if(firstname==null || firstname==" ")
    {alert("Please enter your first name");
    return false;
    }
if(tel==null || tel==" ")
    {alert("Please enter your telephone");
    return false;
    }
if(email1==null || email1==" ")
    {alert("Please enter your email");
    return false;
    }
if(email2==null || email2==" ")
    {alert("Please repeat your email");
    return false;
    }
if(textarea==null || textarea==" ")
    {alert("Please enter your message");
    return false;
    }
    return true;
}

function validate_name(firstname){
    if(firstname.length>20){
        alert("Name is longer than 20 characters");
        return false;
    }
    return true;
}
function isNumeric(tel)
    var numberpattern = /^(-0+[0-9]{2}-)[0-9]{3}-[0-9]{4}$/;

    if(numberPattern.test(tel)==false){
        alert("Please enter correct telephone number");
        return false;
    }
    else return true;
    }
function validate_email(email1){
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(emailPattern.test(email1)==false{
        alert("Please check your email");
        return false;
    }
    else return true;
}
function equal_emails(email1,email2){
    if(email1!=email2){
        alert("Email are not the same");
        return false;
        }
        return true;
}
</script>    

表单代码在这里:

 <form action="confirm.html" method="post" onSubmit="return validateForm();">
<table width="50%" border="3" cellspacing="3%" cellpadding="3%" id="table1">
<tbody>
<tr>
  <th colspan="2" style="text-align: center" scope="col" >Contact Us by Filling Out The Form</th>
  </tr>
<tr>
  <td colspan="2">Required field*</td>
  </tr>
<tr>
  <td width="44%"><label for="firstname">Name:*</label></td>
  <td width="56%"><input name="firstname" type="text" id="firstname" maxlength="20"></td>
</tr>
<tr>
  <td><label for="address">Address:</label></td>
  <td><input type="text" name="address" id="address"></td>
</tr>
<tr>
  <td><label for="email1">Email:*</label></td>
  <td><input type="email" name="email1" id="email1"></td>
</tr>
<tr>
  <td><label for="email2">Retype your Email:*</label></td>
  <td><input type="email" name="email2" id="email2"></td>
</tr>
<tr>
  <td>Are you a member of our website?</td>
  <td><p>
    <label>
      <input type="radio" name="RadioGroup1" value="Member" id="RadioGroup1_0">
      Member
    </label>
    <br>
    <label>
      <input type="radio" name="RadioGroup1" value="Non-member" id="RadioGroup1_1">
      Non-member
    </label>
    <br>
  </p></td>
</tr>
<tr>
  <td><label for="tel">Telephone number:*</label></td>
  <td><input type="tel" name="tel" id="tel"></td>
</tr>
<tr>
  <td><label for="textarea">Queries/ Comments:*</label></td>
  <td><textarea name="textarea" id="textarea"></textarea></td>
</tr>
<tr>
  <td colspan="2"><input type="submit" name="submit" id="submit" value="Submit"></td>
  </tr>
</tbody>
</table>
</form>

按下提交按钮后，表单继续 confirm.html 而不检查条目。我可以将它们留空，我可以在名字字段中写信，它仍然会继续确认页面。我不确定为什么会这样，所以我决定问问你们。

Answer 1

除了一些区分大小写的错误/问题外，您的代码很好。

例如:

if(validate_req(firstname,tel,textarea,email1,email2)==true&&
    validate_name(firstname)==true&&
    isnumeric(tel)==true <----- isnumeric() doesn't exist, but isNumeric() does.

我已经为您清除了这些错误。以下 JS 在语法上是正确的:

function validateForm()
{
    var firstname=document.getElementById("firstname").value;
    var tel=document.getElementById("tel").value;
    var textarea=document.getElementById("textarea").value
    var email1=document.getElementById("email1").value;
    var email2=document.getElementById("email2").value;

if(validate_req(firstname,tel,textarea,email1,email2)==true&&
validate_name(firstname)==true&&
isNumeric(tel)==true&&
isAlpha(prof)==true&&
validate_email(email1)==true&&
validate_email(email2)==true&&
equal_emails(email1,email2)==true)
return true;
else
return false;}

function validate_req(firstname, tel,textarea,email1,email2)
{ if(firstname==null || firstname==" ")
    {alert("Please enter your first name");
    return false;
    }
if(tel==null || tel==" ")
    {alert("Please enter your telephone");
    return false;
    }
if(email1==null || email1==" ")
    {alert("Please enter your email");
    return false;
    }
if(email2==null || email2==" ")
    {alert("Please repeat your email");
    return false;
    }
if(textarea==null || textarea==" ")
    {alert("Please enter your message");
    return false;
    }
    return true;
}

function validate_name(firstname){
    if(firstname.length>20){
        alert("Name is longer than 20 characters");
        return false;
    }
    return true;
}
function isNumeric(tel) {
    var numberPattern = /^(-0+[0-9]{2}-)[0-9]{3}-[0-9]{4}$/;

    if(numberPattern.test(tel)==false){
        alert("Please enter correct telephone number");
        return false;
    }
    else return true;
}
function validate_email(email1) {
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(emailPattern.test(email1)==false){
        alert("Please check your email");
        return false;
    }
    else return true;
}
function equal_emails(email1,email2){
    if(email1!=email2){
        alert("Email are not the same");
        return false;
        }
        return true;
}