表单onSubmit验证无效

Question

I want to use javascript to validate my form's input before sending the data to the php file. I tried using onSubmit , but for some reason the javascript function is getting skipped over and the data is going straight to the php file. I'm not sure what's wrong with my code- I'd initially put the javascript in another file, then I included it in the page itself with a <script> tag, it's still not working. Here's my code-

The form-

<form action="includes/register.inc.php" name="registration_form" method="post" onSubmit="return regform(this.form,
 this.form.first-name, this.form.last-name, this.form.signup-username, this.form.signup-email, 
this.form.signup-password, this.form.confirm-password);">

    <input id="first-name" name="first-name" type="text" placeholder="First Name"/>
    <input id="last-name" name="last-name" type="text" placeholder="Last Name"/>
    <input id="signup-username" name="signup-username" type="text" placeholder="Username"/>
    <input id="signup-email" name="signup-email" type="email" placeholder="E-mail"/>
    <input id="signup-password" name="signup-password" type="password"  placeholder="Password"/>
    <input id="confirm-password" type="password" name="confirm-password" placeholder="Confirm Password"/>

    <input type="submit" value="CREATE ACCOUNT"/>
</form>

Javascript-

function regform(form, fname, lname, uid, email, password, conf) {
 // Check each field has a value
if (uid.value == ''         || 
      email.value == ''     || 
      password.value == ''  || 
      fname.value == ''     ||
      lname.value == ''     ||
      conf.value == '') {

    alert('You must provide all the requested details. Please try again');
    return false;
}

// Check the username

re = /^\w+$/; 
if(!re.test(uid.value)) { 
    alert("Username must contain only letters, numbers and underscores. Please try again"); 

    return false; 
}

var alphaExp = /^[a-zA-Z\-]+$/;
if(!fname.value.match(alphaExp)) { 
    alert("First name must contain only letters and hyphens. Please try again"); 

    return false; 
}

if(!lname.value.match(alphaExp)) { 
    alert("First name must contain only letters and hyphens. Please try again"); 

    return false; 
}

// Check that the password is sufficiently long (min 6 chars)
// The check is duplicated below, but this is included to give more
// specific guidance to the user
if (password.value.length < 6) {
    alert('Passwords must be at least 6 characters long.  Please try again');

    return false;
}

// At least one number, one lowercase and one uppercase letter 
// At least six characters 

var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/; 
if (!re.test(password.value)) {
    alert('Passwords must contain at least one number, one lowercase and one uppercase letter.  Please try again');
    return false;
}

// Check password and confirmation are the same
if (password.value != conf.value) {
    alert('Your password and confirmation do not match. Please try again');

    return false;
}


// Finally submit the form. 
return true;
}

Answer 1

it's not this.form , since this already refers to the form. also you need to use brackets for any properties that contain a hyphen as JS will think it's a minus sign. this['last-name']

Answer 2

Try this. Instead of pass a bunch of params to the function, I'm passing the form itself, then pulling out values from there.

 function regform(form) { // Check each field has a value if (form['signup-username'].value == '' || form['signup-email'].value == '' || form['signup-password'].value == '' || form['first-name'].value == '' || form['last-name'].value == '' || form['confirm-password'].value == '') { alert('You must provide all the requested details. Please try again'); return false; } // Check the username re = /^\\w+$/; if (!re.test(uid.value)) { alert("Username must contain only letters, numbers and underscores. Please try again"); return false; } var alphaExp = /^[a-zA-Z\\-]+$/; if (!fname.value.match(alphaExp)) { alert("First name must contain only letters and hyphens. Please try again"); return false; } if (!lname.value.match(alphaExp)) { alert("First name must contain only letters and hyphens. Please try again"); return false; } // Check that the password is sufficiently long (min 6 chars) // The check is duplicated below, but this is included to give more // specific guidance to the user if (password.value.length < 6) { alert('Passwords must be at least 6 characters long. Please try again'); return false; } // At least one number, one lowercase and one uppercase letter // At least six characters var re = /(?=.*\\d)(?=.*[az])(?=.*[AZ]).{6,}/; if (!re.test(password.value)) { alert('Passwords must contain at least one number, one lowercase and one uppercase letter. Please try again'); return false; } // Check password and confirmation are the same if (password.value != conf.value) { alert('Your password and confirmation do not match. Please try again'); return false; } // Finally submit the form. return true; } 

 <form action="" name="registration_form" method="post" onSubmit="return regform(this);"> <input id="first-name" name="first-name" type="text" placeholder="First Name" /> <input id="last-name" name="last-name" type="text" placeholder="Last Name" /> <input id="signup-username" name="signup-username" type="text" placeholder="Username" /> <input id="signup-email" name="signup-email" type="email" placeholder="E-mail" /> <input id="signup-password" name="signup-password" type="password" placeholder="Password" /> <input id="confirm-password" type="password" name="confirm-password" placeholder="Confirm Password" /> <input type="submit" value="CREATE ACCOUNT" /> </form>