如果电子邮件输入字段有效,如何使用onClick?

时间:2013-03-21 16:50:51

标签: javascript html validation

这是代码:

<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。我只有在浏览器“知道”电子邮件有效时才需要运行。

4 个答案:

答案 0 :(得分:10)

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

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");
}

答案 1 :(得分:1)

您可以使用Regular expressions检查电子邮件是否有效omgemailgone()

function omgemailgone (){
   var mail = $('#subscribe-email').val();

   //Example of regular expression
   if(mail.match(/YourRegexp/)
   {
      //Do stuff
   }
   else alert("Invalid e-mail");

}

(在这里使用jQuery)

答案 2 :(得分:1)

检查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);
}

来自链接

答案 3 :(得分:0)

你需要一个验证电子邮件并返回true或false的函数 Validate email address in JavaScript?

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

这是一个快速解决方案,我建议您正确使用,而不是使用内联onclick js