Question

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

表格 -

<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

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

＆＃13;

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

＆＃13;

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

＆＃13;

表单onSubmit验证不起作用

2 个答案: