如何使用onClick ONLY，如果电子邮件输入字段是有效的

Question

代码如下:

<input id="subscribe-email" type="email" placeholder="[e-mail]" />
            <button type="submit" id="subscribe-submit" onClick="javascript:omgemailgone();" />

我如何检查和运行JS函数只有当电子邮件是有效的(验证由用户代理，没有额外的验证)?

更新。新的浏览器可以自己验证input=email，也有伪类:valid和:invalid。我需要运行功能，只有当浏览器'知道'，电子邮件是有效的。

Answer 1

您可以使用输入元素(在本例中是电子邮件输入字段)的.checkValidity()方法。这将返回一个布尔值，指示输入是否有效。这里有一把小提琴可以演奏:

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

和代码:

<input id="subscribe-email" type="email" required="required" placeholder="[e-mail]" />
<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");
}

Answer 2

check Validate email address in JavaScript?用于验证，然后将其实现到omgemailgone方法中的if语句中(如果有效继续，否则什么都不做)

编辑:

function validateEmail(email) { 
    var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(
".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA
-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

从链接

Answer 3

您可以使用正则表达式来检查您的omgemailgone()上的电子邮件是否有效:

function omgemailgone (){
   var mail = $('#subscribe-email').val();
   //Example of regular expression
   if(mail.match(/YourRegexp/)
   {
      //Do stuff
   }
   else alert("Invalid e-mail");
}

(这里使用jQuery)

Answer 4

您需要一个函数来验证电子邮件并返回真或假在JavaScript中验证电子邮件地址?

<button type="submit" id="subscribe-submit" onClick="javascript:validateEmail(document.getElementById('subscribe-email').value) ? omgemailgone() : alert('email is wrong dude');" />

这是一个快速的解决方案，我建议你这样做正确，不使用内联onclick js