javascript - 如果电子邮件输入字段有效，如何仅使用 onClick？

Question

代码如下:

<input id="subscribe-email" type="email" placeholder="john.doe@example.com" />
            <button type="submit" id="subscribe-submit" onClick="javascript:omgemailgone();" />

如何仅在电子邮件有效时检查和运行 JS 函数(由用户代理验证，无额外验证)？

更新。新的浏览器可以自己验证input=email，也有伪类:valid和:invalid。仅当浏览器“知道”该电子邮件有效时，我才需要运行函数。

Answer 1

您可以使用输入元素(在本例中为电子邮件输入字段)的.checkValidity() 方法。这将返回一个 bool 值，指示输入是否有效。这是一个可以玩的 fiddle :

http://jsfiddle.net/QP4Rc/4/

还有代码:

<input id="subscribe-email" type="email" required="required" placeholder="john.doe@example.com" />

<button type="submit" id="subscribe-submit" onClick="check()">
click me
</button>

function check()
{
  if(!document.getElementById("subscribe-email").checkValidity())
  {

    //do stuff here ie. show errors
    alert("input not valid!");

  }else
  {
      callMeIfValid();
  }
}

function callMeIfValid()
{
  //submit form or whatever
  alert("valid input");
}