如何使用jQuery验证电子邮件?

要使用jQuery验证电子邮件,请使用正则表达式模式。您可以尝试运行以下代码,以了解如何使用jQuery验证电子邮件-

示例

<!DOCTYPE html>

<html>

  <head>

  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <script>  

    $(document).ready(function() {

      $('.error').hide();

      $('#submit').click(function(){

        var name = $('#name').val();

        var email = $('#email').val();

        if(name== ''){

          $('#name').next().show();

          return false;

        }

        if(email== ''){

          $('#email').next().show();

          return false;

        }

        if(IsEmail(email)==false){

          $('#invalid_email').show();

          return false;

        }

        $.post("", $("#myform").serialize(),  function(response) {

          $('#myform').fadeOut('slow',function(){

          $('#correct').html(response);

          $('#correct').fadeIn('slow');

       });

     });

    return false;

  });

 });

 function IsEmail(email) {

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

  if(!regex.test(email)) {

    return false;

  }else{

    return true;

  }

}

</script>

</head>

<body>

  <form action="" method="post" id="contactform">

  <table class="mytable">

    <tr>

     <td><label for="name">Name :</label></td>

     <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="error">Enter your name here</span></td>

    </tr>

    <tr>

     <td><label for="email">Email :</label></td>

       <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="error">Enter your email-id here</span>

         <span class="error" id="invalid_email">Email-id is invalid</span>

       </td>

     </td>

    </tr>

    <tr>

     <input type="submit" class="contactform-buttons" id="submit"value="Send" />

     <input type="reset" class="contactform-buttons" id="" value="Clear" />

   </tr>

  </tr>

</table>

</form>

  <div id="correct" style="color:gray;"></div>

</body>

</html>

以上是 如何使用jQuery验证电子邮件? 的全部内容, 来源链接: utcz.com/z/316535.html

回到顶部