Javascript 未链接到注册表（此问题已得到解答）[已关闭]

问题描述 投票：0回答：2

对于“onsubmit”我已经尝试过“onclick”，但它仍然不起作用。另外，我的 JavaScript 应该没问题，但如果总体上有任何错误，请告诉我。我的一个朋友告诉我这与 type="submit" 有关，但我不知道解决这个问题的方法。当我将“onclick”更改为“onsubmit”时，我将“onsubmit”移动到顶部，而不是提交按钮所在的位置。

function Signup() {
  vfname = document.forms["register_form"]['fname'].value;
  vlname = document.forms["register_form"]['lname'].value;
  vemail = document.forms["register_form"]['email'].value;
  vphone = document.forms["register_form"]['phone'].value;
  vpassw = document.forms["register_form"]['passw'].value;
  vpassc = document.forms["register_form"]['passc'].value;
}
if (Name(vfname, vlname)) {
  if (Email(vemail)) {
    if (Phone(vphone)) {
      if (Password(vpassw, vpassc)) {
        alert("Verify success");
        register_form.submit();
        return true;
      }
    }
  }
}

function Password(vpassw, vpassc) {
  var passwordmatch = /^[A-Za-z0-9\s]+$/;
  if (vpassw.match(passwordmatch) = vpassc.match(passwordmatch)) {
    if (vpassw.match(passwordmatch) == null) {
      alert("Must enter a password");
      return false;
    } else {
      alert("Passwords match");
      return true;
    }
  } else {
    alert("Password error");
    return false;
  }
}

function Phone(vphone) {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  } else {
    if (vphone.length != 10) {
      alert("Phone number is not the required length");
    } else {
      return true;
    }
  }
}

function Email(vemail) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  } else {
    alert("Email address does not follow the format");
    return false;
  }
}

function Name(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  } else {
    return true;

  }

}
<script type="text/javascript" src="cue/js/veri.js"></script>

<form name="register_form" method="post" action="http://tlocalhost/ds/signup.php" onsubmit="return Signup();">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required>
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required>
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" name="email" placeholder="[email protected]" class="form-control" required>
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" name="phone" placeholder="0412456789" class="form-control" required>
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required>
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required>
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET"></input>
    <input type="submit" value="SUBMIT" class="btn-submit"></input>
  </div>
  <div>
    <p class="link"><a href="http://localhost/ds/html-2column.php"> Got an account? Login here! </a></p>
  </div>
</form>

javascript html
2个回答
1
投票

几个错误

  • 在错误的位置有 
    }
    。我简化了测试
  • ===
    是比较，你的比赛密码中有
    =
  • 密码测试无论如何都不正确，我简化了它们
  • 您不需要在提交事件中提交表单，但我使用了推荐的 PreventDefault 而不是返回 true 或 false
  • 不使用 let 或 var 作为变量会污染全局范围
  • 返回后无需使用else
  • HTML 无效

我添加了一些 ID，并使用 ID 代替名称。表单名称已被弃用。

我还将函数设为常量并使用推荐的事件监听器

最后我将测试更改为测试不正确并停止提交，而不是测试正确并允许。

const isPassword = (vpassw, vpassc) => {
  var passwordmatch = /^[A-Za-z0-9\s]+$/;
  if (!vpassw.match(passwordmatch) || !vpassc.match(passwordmatch)) {
    alert("Password error");
    return false
  }
  if (vpassw !== vpassc) {
    alert("Passwords must match");
    return false;
  }
  return true;
};
const isPhone = (vphone) => {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  }
  if (vphone.length != 10) {
    alert("Phone number is not the required length");
    return false
  }
  return true;
};

const isEmail = (vemail) => {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  }
  alert("Email address does not follow the format");
  return false;
};

function isName(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  }
  return true;
};


window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_form').addEventListener('submit', (e) => {
    let vfname = document.getElementById('fname').value,
      vlname = document.getElementById('lname').value,
      vemail = document.getElementById('email').value,
      vphone = document.getElementById('phone').value,
      vpassw = document.getElementById('passw').value,
      vpassc = document.getElementById('passc').value;
    if (!isName(vfname, vlname) || !isEmail(vemail) || !isPhone(vphone) || !isPassword(vpassw, vpassc)) {
      e.preventDefault(); // stop submission
    }
  });
});
<script type="text/javascript" src="cue/js/veri.js"></script>

<form id="register_form" method="post" action="signup.php">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required />
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required />
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" required />
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" id="phone" name="phone" placeholder="0412456789" class="form-control" required />
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required />
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required />
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET" />
    <input type="submit" value="SUBMIT" class="btn-submit" />
  </div>
</form>

-1
投票

function Signup() {
  var vfname = document.forms["register_form"]['fname'].value;
  var vlname = document.forms["register_form"]['lname'].value;
  var vemail = document.forms["register_form"]['email'].value;
  var vphone = document.forms["register_form"]['phone'].value;
  var vpassw = document.forms["register_form"]['passw'].value;
  var vpassc = document.forms["register_form"]['passc'].value;

  if (Name(vfname, vlname)) {
    if (Email(vemail)) {
      if (Phone(vphone)) {
        if (Password(vpassw, vpassc)) {
          alert("Verify success");
          return true;
        }
      }
    }
  }
  return false; // Return false if any validation fails
}

function Password(vpassw, vpassc) {
    var passwordmatch = /^[A-Za-z0-9\s]+$/;
    
    // Check if passwords match directly
    if (vpassw === vpassc) {
        // Check if password matches the pattern
        if (vpassw.match(passwordmatch) === null) {
            alert("Must enter a password");
            return false;
        } else {
            return true;
        }
    } else {
        alert("Passwords do not match");
        return false;
    }
}

function Phone(vphone) {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  } else {
    if (vphone.length != 10) {
      alert("Phone number is not the required length");
      return false;
    } else {
      return true;
    }
  }
}

function Email(vemail) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  } else {
    alert("Email address does not follow the format");
    return false;
  }
}

function Name(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  } else {
    return true;
  }
}
<form name="register_form" method="post" action="http://tlocalhost/ds/signup.php" onsubmit="return Signup();">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required />
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required />
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" id="email" name="email" placeholder="[email protected]" class="form-control" required />
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" id="phone" name="phone" placeholder="0412456789" class="form-control" required />
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required />
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required />
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET" />
    <input type="submit" value="SUBMIT" class="btn-submit" />
  </div>
</form>

这是修改的部分。 你可以改变这个。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.