表单onSubmit验证无效

Question

我想在将数据发送到php文件之前使用javascript验证我的表单输入。 我尝试使用onSubmit ，但是由于某些原因，javascript函数被跳过了，数据直接进入了php文件。 我不确定我的代码有什么问题-我最初将javascript放在另一个文件中，然后使用<script>标记将其包含在页面本身中，但仍无法正常工作。 这是我的代码-

表格-

<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

不是this.form ，因为this已经引用了表单。 此外，对于包含连字符的任何属性，您都需要使用方括号，因为JS会认为这是减号。 this['last-name']

Answer 2

尝试这个。 我没有传递一堆参数给函数，而是传递了表单本身，然后从那里提取值。

 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>