Javascript 使用indexOf（）验证电子邮件

我正在尝试制作一个注册表单，在将任何数据发送到服务器之前进行客户端验证（检查电子邮件的正确布局和匹配的密码）。我一直无法检查电子邮件的格式是否正确。我无法使

if（email.indexOf（@））

正常工作。我想我误用了

.indexOf（）

  <h1 id="pop_up" class="pop_up">Sign Up</h1>

  <form id="sign_up" class="sign_up">
  <label id="alert_s1" class="alert">  <br />  </label>
    <input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
      <label id="alert_s2" class="alert">  <br />  </label>
    <input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
      <label id="alert_s3" class="alert">  <br />  </label>
    <input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
      <label id="alert_s4" class="alert">  <br />  </label>
    <input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
  </form>

  <p id="sign_alert" class="alert"></p>

  <button onclick="sign_check()">Submit</button>

  <a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>

这是我的JavaScript：

function sign_check() {
var email = document.getElementById("sign_email").value;
var user = document.getElementById("sign_user").value;
var pass = document.getElementById("sign_pass").value;
var passcon = document.getElementById("sign_confirm").value;

if(pass !== passcon){
  document.getElementById("sign_alert").innerHTML="The passwords do not match"
}

//This part determines whether or not to send the data to the server
if(email.length >= 7){
  if(email.indexOf("@")){
    if(user.length >= 1){
      if(pass.length >= 1){
        if(passcon.length >= 1){
          if(pass === passcon){
            alert("All of the requirements have been met")
          }
        }
      }
    }
  }
}
}

  <h1 id="pop_up" class="pop_up">Sign Up</h1>

  <form id="sign_up" class="sign_up">
  <label id="alert_s1" class="alert">  <br />  </label>
    <input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
      <label id="alert_s2" class="alert">  <br />  </label>
    <input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
      <label id="alert_s3" class="alert">  <br />  </label>
    <input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
      <label id="alert_s4" class="alert">  <br />  </label>
    <input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
  </form>

  <p id="sign_alert" class="alert"></p>

  <button onclick="sign_check()">Submit</button>

  <a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>

这是我的html：

  <h1 id="pop_up" class="pop_up">Sign Up</h1>

  <form id="sign_up" class="sign_up">
  <label id="alert_s1" class="alert">  <br />  </label>
    <input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
      <label id="alert_s2" class="alert">  <br />  </label>
    <input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
      <label id="alert_s3" class="alert">  <br />  </label>
    <input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
      <label id="alert_s4" class="alert">  <br />  </label>
    <input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
  </form>

  <p id="sign_alert" class="alert"></p>

  <button onclick="sign_check()">Submit</button>

  <a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>

注册















  <h1 id="pop_up" class="pop_up">Sign Up</h1>

  <form id="sign_up" class="sign_up">
  <label id="alert_s1" class="alert">  <br />  </label>
    <input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
      <label id="alert_s2" class="alert">  <br />  </label>
    <input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
      <label id="alert_s3" class="alert">  <br />  </label>
    <input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
      <label id="alert_s4" class="alert">  <br />  </label>
    <input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
  </form>

  <p id="sign_alert" class="alert"></p>

  <button onclick="sign_check()">Submit</button>

  <a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>

提交

首先，您验证电子邮件的方法不太准确：）此外，您使用的方法不正确。用这个代替

  <h1 id="pop_up" class="pop_up">Sign Up</h1>

  <form id="sign_up" class="sign_up">
  <label id="alert_s1" class="alert">  <br />  </label>
    <input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
      <label id="alert_s2" class="alert">  <br />  </label>
    <input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
      <label id="alert_s3" class="alert">  <br />  </label>
    <input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
      <label id="alert_s4" class="alert">  <br />  </label>
    <input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
  </form>

  <p id="sign_alert" class="alert"></p>

  <button onclick="sign_check()">Submit</button>

  <a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>

if(email.indexOf("@") != -1 )

---

您在

（'@'）

中使用了双引号

“

而不是

”

。这应该会让它起作用。而且

==

实际上也很有效。引号是您需要更改的全部内容。我希望这有帮助

0

是有效索引，失败时返回

-1

，因此：

email.indexOf（“@”）！=-如果要确保
@
不是第一个字符，请执行1

或执行

>0

。该死的如果语句，蝙蝠侠！不如干脆

/^\S+@\S+\.\S+$/.test（email）

不喜欢&&operator？链接到用JavaScript验证电子邮件的更好方法它只得到827分，谁知道呢…或>0分。因为

@gmail.com

也不是一封有效的电子邮件。电子邮件验证并不一定要准确。它太复杂了，很难处理，即使你有一个完美的电子邮件验证，你仍然不知道电子邮件是否有效，因为它实际上是由用户拥有的。我认为，过于宽容总比过于严格好。@leigero：我已经澄清了验证方法不准确。有无限多个无效的组合将ignored@cookie怪物：在任何情况下，你都可以有一个更好的验证规则来覆盖卵生错误。不必太复杂，我同意。只是说如果无意中阻止别人屈服会更糟糕。

  <h1 id="pop_up" class="pop_up">Sign Up</h1>

  <form id="sign_up" class="sign_up">
  <label id="alert_s1" class="alert">  <br />  </label>
    <input id="sign_email" class="sign" type="text" placeholder="Email" name="sign_email" /><br />
      <label id="alert_s2" class="alert">  <br />  </label>
    <input id="sign_user" class="sign" type="text" placeholder="Username" name="sign_user" /><br />
      <label id="alert_s3" class="alert">  <br />  </label>
    <input id="sign_pass" class="sign" type="text" placeholder="Password" name="sign_pass" /><br />
      <label id="alert_s4" class="alert">  <br />  </label>
    <input id="sign_confirm" class="sign" type="text" placeholder="Confirm Password" name="sign_confirm" />
  </form>

  <p id="sign_alert" class="alert"></p>

  <button onclick="sign_check()">Submit</button>

  <a href="javascript:void(0)" class="pop_up" id="pop_up" onclick="document.getElementById('sign_box').style.display='none'; document.getElementById('log_box').style.display='block'">Already have an acount? Click here to log in.</a>
</div>