表单提交验证不起作用

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)(?=.*[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;
}

<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>