0
我在验证表单时遇到了一些问题。当我点击进行验证时，除第一次重新调焦页面以外，第二次页面继续到服务器时，它不会执行任何操作。我一直在寻找几个小时试图找出问题所在，但我无法看到它。Javascript表单验证不会生效
这里是我的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>
这里有很多问题。您可以尝试http://parsleyjs.org进行客户端验证，但也不要忘记服务器端验证。这更重要！ –
另外我希望你也使用服务器端验证，因为客户端可以删除 – Idris
我不是，因为它不是我的任务所必需的。 – Fox