javascript - 创建登录名并验证电子邮件地址

Question

我想用 JavaScript 创建一个登录页面，但这里的代码是错误的。我想要的是，当我输入错误的电子邮件地址时，它应该显示一个警报，当我将其留空时，它会显示一个警报。

function check(form) {
  if (form.email.value == "id@gmail.com") {
    alert("correct username")
  } else if (form.email.value == "") {
    alert("blank username")
       }

    var email = document.getElementById('email');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email.value)) {
      alert('Please provide a valid email address');
      email.focus;
      return false;
    }
  } else if (form.pswrd.value == "123") {
    alert("correct details")
  } else if (form.pswrd.value == "") {
    alert("blank password")
  }
}

<h1>Login </h1>
<form name="login">
  Username <input type="text" name="email"/>
  Password <input type="password" name="pswrd"/>
  <input type="button" onclick="check(this.form)" value="Login"/>
  <input type="reset" value="reset"/>
</form>

Answer 1

错误:

1. 您不应该使用 <script> JavaScript 中的标签。它们无效。
2. 您还没有给出 id="email"到input 。所以这是行不通的。
3. 添加else用于电子邮件验证的部分。
4. 分隔您的password从 email 检查检查if...else阻止。

工作片段

function check(form) {
  if (form.email.value == "id@gmail.com") {
    alert("correct username")
  } else if (form.email.value == "") {
    alert("blank username")
  } else if (form.email.value != "") {
    var email = document.getElementById('email');
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (!filter.test(email.value)) {
      alert('Please provide a valid email address');
      email.focus;
      return false;
    }
  }
  if (form.pswrd.value == "123") {
    alert("correct details")
  } else if (form.pswrd.value == "") {
    alert("blank password")
  }
}

<h1>Login </h1>
<form name="login">
  Username <input type="text" name="email" id="email" />
  Password <input type="password" name="pswrd"/>
  <input type="button" onclick="check(this.form)" value="Login" />
  <input type="reset" value="reset"/>
</form>