Javascript表单验证无法验证

时间:2014-04-28 01:44:11

标签: javascript html

我在验证表单方面遇到了一些问题。当我点击验证时,除了第一次重新聚焦页面以及第二次页面继续到服务器时,它不会做任何其他事情。我一直在寻找几个小时试图找出问题所在,但我无法看到它。

这是我的Javascript代码:

function formValidation() {
var uname = document.GetElementByName("UserName");

var uname = document.joinform.UserName;
var password = document.joinform.Password;
var fname = document.joinform.firstname;
var mname = document.joinform.middlename;
var lname = document.joinform.lastname;
var unationality = document.joinform.nationality;
var ulcontact = document.joinform.lpreferredcontact;
var umcontact = document.joinform.mpreferredcontact;
var uecontact = document.joinform.epreferredcontact;
var ulandline = document.joinform.dayphone;
var umobile = document.joinform.mobphone;
var uemail = document.joinform.email;
var uadd1 = document.joinform.address1;
var uadd2 = document.joinform.address2;
var upostcode = document.joinform.postcode;
var city = document.joinform.city;
var state = document.joinform.state;
var occupation = document.joinform.occupation;
var hobbies = document.joinform.hobbies;
var interest = document.joinform.interest;

if (username_validation(uname, 20, 20)) {
} else {
return false;
}
{
    if (username_validation(uname, 20, 20)) {
        if (password_validation(password, 20, 20)) {
            if (allLetter(fname)) {
                if (allLetter(mname)) {
                }
            }
        }
    }
    return false;
}


if(username_validation(uname,20,20))  {  
  if(passid_validation(password,20,20))  {  
      if(allLetter(fname))   {  
         if(allLetter(mname))  {  
             if(allLetter(lname))  {  
                 if(allLetter(unationality))   {  
                   if(validcontact(ulcontact,umcontact,uecontact))  {  
                          if(allnumeric(ulandline))  {  
                             if(allnumeric(umobile)) {  
                                  if(ValidateEmail(uemail))  {  
                                     if(alphanumeric(uadd1))   {  
                                        if(alphanumeric(uadd2))  {  
                                            if(allnumeric(upostcode))  {  
                                                if(allLetter(city))   {   
                                                    if(stateselect(state))  {  
                                                          if(allLetter(occupation))  {  
                                                            if(allLetter(hobbies))  {   
                                                               if(interestselect(interest)) {  
                                                                }  
                                                            }   
                                                        }
                                                    }  
                                                }   
                                            }  
                                        }  
                                    }  
                                }
                            }
                        }
                    }
                }
            }
        }
    }
} 
} 

function username_validation(uname,mx,my)  
{  
    var uname_len = uname.value.length;  
    if (uname_len >= my || uname_len < mx)  
    {  
        alert("User name length should be between "+mx+" to "+my);  
        uname.focus();  
        return false;  
    }  
    return true;  
}  

function password_validation(password,mx,my)  
{  
    var password_len = password.value.length;  
    if (password_len >= my || password_len < mx)  
    {  
    alert("Password length should be between "+mx+" to "+my);  
    password.focus();  
    return false;  
    }  
    return true;  
}  
function allLetter(fname)  
{   
    var letters = /^[A-Za-z]+$/;  
    if(fname.value.match(letters))  
    {  
    return true;  
    }  
    else  
    {  
    alert('First name must have alphabet characters only');  
    fname.focus();  
    return false;  
    }  
}
function allLetter(mname)  
{   
    var letters = /^[A-Za-z]+$/;  
    if(mname.value.match(letters))  
    {  
    return true;  
    }  
    else  
    {  
    alert('Middle name must have alphabet characters only');  
    mname.focus();  
    return false;  
    }  
}
function allLetter(lname)  
{   
var letters = /^[A-Za-z]+$/;  
 if(lname.value.match(letters))  
   {  
   return true;  
   }  
   else  
   {  
   alert('Last name must have alphabet characters only');  
   lname.focus();  
   return false;  
   }  
}
function allLetter(unationality)  
{   
    var letters = /^[A-Za-z]+$/;  
    if(unationality.value.match(letters))  
    {  
    return true;  
    }  
   else  
    {  
    alert('Nationality must have alphabet characters only');  
    unationality.focus();  
    return false;  
    }  
}
function validcontact(ulcontact,umcontact,uecontact)  
{  
   x=0;  

   if(ulcontact.checked)   
   {  
       x++;  
   } 
   if(umcontact.checked) 
   {  
       x++;   
   } if(uecontact.checked)
   {
       x++;
   } 
   if(x==0)  
   {  
       alert('Select the preferred Contact method');  
       ulcontact.focus();  
       return false;  
   }
   function allnumeric(ulandline)  
   {   
       var numbers = /^[0-9]+$/;  
       if(ulandline.value.match(numbers))  
       {  
           return true;  
       }  
       else  
       {  
           alert('landline number must have numeric characters only');  
           ulandline.focus();  
           return false;  
       }  
    }
   function allnumeric(umobile)  
   {   
       var numbers = /^[0-9]+$/;  
       if(umobile.value.match(numbers))  
       {  
           return true;  
       }  
       else  
       {  
           alert('mobile number must have numeric characters only');  
           umobile.focus();  
           return false;  
       }  
    } 
   function ValidateEmail(uemail)  
   {  
       var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
       if(uemail.value.match(mailformat))  
       {  
           return true;  
       }  
       else  
       {  
           alert("You have entered an invalid email address!");  
           uemail.focus();  
           return false;  
       }  
   }
}
     function alphanumeric(uadd1)  
     {   
        var letters = /^[0-9a-zA-Z]+$/;  
        if(uadd1.value.match(letters))  
        {  
            return true;  
        }  
         else  
        {  
            alert('User address must have alphanumeric characters only');  
            uadd1.focus();  
             return false;  
        }  
    }
    function alphanumeric(uadd2)  
    {   
        var letters = /^[0-9a-zA-Z]+$/;  
         if(uadd2.value.match(letters))  
        {  
            return true;  
        }  
         else  
        {  
            alert('User address must have alphanumeric characters only');  
            uadd2.focus();  
            return false;  
        }  
    }
     function allnumeric(postcode)  
    {   
        var numbers = /^[0-9]+$/;  
         if(postcode.value.match(numbers))  
        {  
             return true;  
        }  
         else  
        {  
            alert('postcode must have numeric characters only');  
            postcode.focus();  
             return false;  
        }  
    } 
     function allLetter(city)  
    {   
         var letters = /^[A-Za-z]+$/;  
         if(city.value.match(letters))  
        {  
             return true;  
        }  
         else  
        {  
             alert('City must have alphabet characters only');  
             city.focus();  
             return false;  
        }  
    }
     function stateselect(state)  
    {  
         if(state.value == "Default")  
        {  
             alert('Select your state from the list');  
             state.focus();  
            return false;  
        }  
        else  
        {  
            return true;  
        }  
    }
    function allLetter(occupation)  
    {   
        var letters = /^[A-Za-z]+$/;  
        if(occupation.value.match(letters))  
        {  
            return true;  
        }  
        else  
        {  
            alert('Occupation must have alphabet characters only');  
            occupation.focus();  
            return false;  
        }  
    }
    function allLetter(hobbies)  
    {   
        var letters = /^[A-Za-z]+$/;  
        if(hobbies.value.match(letters))  
        {  
            return true;  
        }  
        else  
        {  
            alert('Hobbies must have alphabet characters only');  
            hobbies.focus();  
            return false;  
        }  
    }
    function interestselect(interest) {
        if (interest.value == "Default") {
            alert('Select your interest from the list');
            interest.focus();
            return false;
        }

        else {
            alert('Form is Successfully Submitted, thank you');
            window.location.reload()
            return true;
        }
    }

这是我的HTML代码:

<form action="http://******/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return check_compulsory(joinform);">
            <form action="http://********/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return formValidation();">

            <form  name="loginform" onsubmit="return loginValidation();">
                <table style="margin: 0px auto;">
                   <tr>
                    <td>UserName:</td>
                    <td><input type="text" name="UserName" value="" size="20" maxlength="40" /></td>
                    <td></td>
                   </tr>
                   <tr>
                      <td>Password:</td>
                      <td><input type="text" name="Password" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                </table>
                <div style=margin-left:475px;>
                   <input type="submit" value="Sign In" />
                </div>
             </form>
             <br>
        <h1>Join Us Today!</h1>
        <p>Please complete this simple form to Sign Up to CWON-Australia!</p>
             <p style=color:blue;>*CompulsoryField</p>
             <form action="http://******/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return check_compulsory(joinform);">
             <form action="http://******/cgi-bin/echo_form" method="post" name="joinform" onsubmit="return formValidation()">
             <form  name="joinform" onsubmit="return formValidation()">
                <table>
                   <tr>
                      <td>First Name:*</td>
                      <td><input type="text" name="firstname" value="" size="20" maxlength="40" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Middle Name:</td>
                      <td><input type="text" name="middlename" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Last Name:*</td>
                      <td><input type="text" name="lastname" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Date Of Birth*</td>
                      <td><input type="text" name="dateofbirth" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Nationality</td>
                      <td><input type="text" name="nationality" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Preferred Contact Method: *</td>
                      <td><input type="radio" name="preferredcontact" id="cl" value="L"  /> Landline</td>
                    </tr>
                   <tr>
                      <td></td>
                      <td><input type="radio" name="preferredcontact" id="cm" value="M" /> Mobile</td>
                   </tr>
                   <tr>
                      <td></td>
                      <td><input type="radio" name="preferredcontact" id="ce" value="E" checked="checked" /> E-Mail</td>
                   </tr>
                   <tr>
                      <td>Landline Phone Number:</td>
                      <td><input type="text" name="dayphone" value="" size="20" maxlength="20" /></td>

                   </tr>
                   <tr>
                      <td>Mobile Phone Number:</td>
                      <td><input type="text" name="mobphone" value="" size="20" maxlength="20" /></td>
                   </tr>
                   <tr>
                      <td>e-Mail Address: *</td>
                      <td><input type="text" name="email" value="" size="30" maxlength="30" /></td>
                   </tr>

                   <tr>
                      <td>Address Line 1: *</td>
                      <td><input type="text" name="address1" value="" size="40" maxlength="40" /></td>
                   </tr>
                   <tr>
                      <td>Address Line 2: *</td>
                      <td><input type="text" name="address2" value="" size="40" maxlength="40" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Postcode: *</td>
                      <td><input type="text" name="postcode" value="" size="4" maxlength="4" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>City: *</td>
                      <td><input type="text" name="city" value="" size="25" maxlength="25" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>State: *</td>
                      <td>
                         <select name="state" size="1">
                            <option selected = "selected">Please Choose</option>
                            <option>NSW</option>
                            <option>VIC</option>
                            <option>WA</option>
                            <option>SA</option>
                            <option>TAS</option>
                            <option>QLD</option>
                            <option>ACT</option>
                          </select>                             
                      </td>
                      <td></td>
                   </tr>

                   <tr>
                      <td>Occupation:</td>
                      <td><input type="text" name="occupation" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                   <tr>
                      <td>Hobbies:</td>
                      <td><input type="text" name="hobbies" value="" size="20" maxlength="60" /></td>
                      <td></td>
                   </tr>
                    <tr>
                      <td>You Are Interested in:* </td>
                      <td>
                         <select name="interest" size="1">
                            <option selected = "selected">Please Choose</option>
                            <option>Fund Raisers</option>
                            <option>Domestic Volunteering</option>
                            <option>Foreign Volunteering</option>
                            <option>All of Them</option>
                          </select>                             
                      </td>
                      <td></td>
                   </tr>
                   <tr>
                      <td><input type="checkbox" name="TandC" id="TandC" value="yes" checked="checked"> </td>
                        <td>I have read the Terms & Conditions of being the member of CWON-Australia, and I agree to abide by the rules and regulations.</td>
                      <td></td>
                   </tr>
                   <tr>
                      <td><input type="checkbox" name="newsletter" id="newsletter" value="yes" checked="checked"></td>
                        <td>Sign Up for CWON-Australia Newsletter.</td> 
                      <td></td>
                   </tr>
                   <tr>
                      <td></td>
                      <td><input type="hidden" name="signupdate" value="" /></td>
                      <td></td>
                   </tr>
                </table>
                <div align="right">
                   <input type="reset" value="Reset" onclick="set_focus()" />
                   <input type="submit" value="Join Now!" />
                </div>
            </form>

2 个答案:

答案 0 :(得分:2)

删除所有杂乱的代码并尝试jQuery.validateReally simple validation

欢迎你〜

答案 1 :(得分:0)

结帐AngularJS。如果您正在编写面向javascript的大型Web应用程序,它可以让您的生活更轻松。