Validasi email menggunakan jQuery

356

Saya baru mengenal jQuery dan bertanya-tanya bagaimana cara menggunakannya untuk memvalidasi alamat email.

DuH
sumber
Sebelum mencoba "memvalidasi" alamat email, Anda harus membaca ini: hackernoon.com/...
Mikko Rantalainen

Jawaban:

703

Anda dapat menggunakan javascript lama biasa untuk itu:

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
Fabian
sumber
66
Ya itu akan, ingat jQuery masih javascript :)
Fabian
36
Meskipun regexp ini menganggap sebagian besar alamat dunia nyata valid, ia masih memiliki banyak positif palsu dan negatif palsu. Misalnya, lihat contoh alamat email yang valid dan tidak valid di Wikipedia.
Arseny
1
@Umingo [email protected] masih merupakan email yang valid, namun, masih bisa ditulis dengan cara yang lebih baik. Tidak ada bagian dari domain yang dapat dimulai dengan karakter selain [a-z0-9] (case-sensitive). Selain itu, e-mail (dan domain) yang valid memiliki batas beberapa, yang juga tidak diuji.
Tomomi
10
Dengan domain tingkat atas yang baru menjadi lebih umum, regex ini mungkin perlu memodifikasi .sistem dan .poker dll semua adalah TLD yang valid sekarang tetapi akan gagal dengan pemeriksaan regex
Liath
3
Per Theo mengomentari jawaban lain, Anda harus beralih var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;ke var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/;untuk mendukung TLD yang lebih baru seperti .museum, dll
Ira Herman
165

Fungsi jQuery untuk Memvalidasi Email

Saya benar-benar tidak suka menggunakan plugin, terutama ketika formulir saya hanya memiliki satu bidang yang perlu divalidasi. Saya menggunakan fungsi ini dan menyebutnya kapan pun saya perlu memvalidasi bidang formulir email.

 function validateEmail($email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( $email );
}

dan sekarang untuk menggunakan ini

if( !validateEmail(emailaddress)) { /* do stuff here */ }

Bersulang!

Manish Shrivastava
sumber
16
Anda harus kembaliemailReg.test($email);
nffdiogosilva
7
Hanya FYI ini mengembalikan true untuk alamat email kosong. mis emailReg.text("") true. Saya hanya akan fungsi ke deklarasi emailReg var maka ini:return ( $email.length > 0 && emailReg.test($email))
Diziet
14
Regex untuk memeriksa validitas alamat surel sudah usang karena kami sekarang memiliki ekstensi nama domain dengan 6 karakter seperti .museum, karenanya Anda ingin mengubahnya var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;menjadivar emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
Theo
3
benar kamu adalah @ h.coates! Saya datang ke utas ini berharap menemukan bahwa jQuery sebenarnya memiliki validasi email bawaan. Bergeraklah, ini bukan droid yang Anda cari ...
iGanja
3
@ Theo point sangat penting, tetapi panjang sebenarnya dari TLD harus lebih dari 6, batas atas teoritis untuk ekstensi adalah 63 karakter. saat ini yang terpanjang adalah lebih dari 20 lihat data.iana.org/TLD/tlds-alpha-by-domain.txt
Jeroenv3
41

Saya akan menggunakan plugin validasi jQuery karena beberapa alasan.

Anda divalidasi, oke, sekarang apa? Anda perlu menampilkan kesalahan, menangani menghapusnya ketika valid, menampilkan berapa banyak total kesalahan mungkin? Ada banyak hal yang bisa ditangani untuk Anda, tidak perlu menemukan kembali roda.

Juga, manfaat besar lainnya adalah di-host di CDN, versi saat ini pada saat jawaban ini dapat ditemukan di sini: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Ini berarti waktu muat yang lebih cepat untuk klien.

Nick Craver
sumber
6
Ok ... tidak perlu menemukan kembali roda. Tetapi mengapa saya harus menginstal puluhan KByte dari Javascript untuk memvalidasi suatu bidang. Ini seperti membangun pabrik mobil jika semua yang Anda butuhkan adalah roda baru :)
kraftb
3
@ kraftb Seperti yang dinyatakan dalam jawaban saya, ini adalah penanganan dan tampilan di sekitar validasi, bukan hanya memvalidasi teks itu sendiri.
Nick Craver
5
Terima kasih atas @NickCraver ini: Ini benar-benar terlihat sebagai pendekatan "praktik terbaik" untuk masalah penanganan validasi untuk email. Ini tentunya TIDAK seperti membangun pabrik (menulis lib untuk melakukan semua pekerjaan) untuk mendapatkan roda. Ini seperti mengikuti instruksi dari pabrik untuk memasang roda pada kendaraan modern (dongkrak mobil, letakkan roda - pasang mur roda) daripada mencoba mencari cara bagaimana mendapatkan roda gerobak di mobil Anda. Plugin ini sangat mudah digunakan. Untuk melakukan validasi formulir, itu benar-benar sebuah include, beberapa anotasi, dan pemanggilan metode tunggal.
jfgrissom
3
Sekarang Anda menemukan kembali metafora 'reinventing the wheel'!
Dom Vinyard
Untuk orang-orang yang terjebak mengerjakan aplikasi formulir web encosia.com/using-jquery-validation-with-asp-net-webforms
Jerreck
38

Lihatlah http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . Ini adalah plugin jQuery yang bagus, yang memungkinkan untuk membangun sistem validasi yang kuat untuk formulir. Ada beberapa contoh yang berguna di sini . Jadi, validasi bidang email dalam bentuk akan terlihat seperti ini:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

Lihat dokumentasi metode Email untuk detail dan sampel.

Andrew Bashtannik
sumber
1
Yang terakhir masih hidup)
Andrew Bashtannik
6
tetapi format yang diterima adalah x@x(itu aneh) itu harus [email protected]Bagaimana saya bisa memperbaikinya?
Basheer AL-MOMANI
2
@ BasheerAL-MOMANI [ jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); }
Bill Gillingham
17
<script type="text/javascript">
    $(document).ready(function() {
      $('.form_error').hide();
      $('#submit').click(function(){
           var name = $('#name').val();
           var email = $('#email').val();
           var phone = $('#phone').val();
           var message = $('#message').val();
           if(name== ''){
              $('#name').next().show();
              return false;
            }
            if(email== ''){
               $('#email').next().show();
               return false;
            }
            if(IsEmail(email)==false){
                $('#invalid_email').show();
                return false;
            }

            if(phone== ''){
                $('#phone').next().show();
                return false;
            }
            if(message== ''){
                $('#message').next().show();
                return false;
            }
            //ajax call php page
            $.post("send.php", $("#contactform").serialize(),  function(response) {
            $('#contactform').fadeOut('slow',function(){
                $('#success').html(response);
                $('#success').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>

<form action="" method="post" id="contactform">
                            <table class="contact-table">
                              <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="form_error">Please enter your name</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="form_error">Please enter your email</span>
                                  <span class="form_error" id="invalid_email">This email is not valid</span></td>
                              </tr>
                              <tr>
                                <td><label for="phone">Phone :</label></td>
                                <td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
                              </tr>
                              <tr>
                                <td><label for="message">Message :</label></td>
                                <td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
                              </tr>
                              <tr>
                                <td></td>
                                <td>
                                  <input type="submit" class="contactform-buttons" id="submit"value="Send" />
                                  <input type="reset" class="contactform-buttons" id="" value="Clear" />
                                </td>
                              </tr>
                            </table>
     </form>
     <div id="success" style="color:red;"></div>
pengguna1993920
sumber
15

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

</script>

<style>
    #validEmail
    {
        margin-top: 4px;
        margin-left: 9px;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .text
    {
        font-family: Arial, Tahoma, Helvetica;
    }
</style>

    <title>Live Email Validation with jQuery Demo</title>
</head>
<body>
    <div class="text"><h1>Reynoldsftw.com - Live Email Validation</h1><h2>Type in an email address in the box below:</h2></div>
    <div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>
    <div class="text"><P>More script and css style

: www.htmldrive.net


Sumber: htmldrive.com

SwatiKothari
sumber
14

Saya akan merekomendasikan Verimail.js , ia juga memiliki plugin JQuery .

Mengapa? Verimail mendukung yang berikut ini:

  • Validasi sintaksis (menurut RFC 822)
  • Validasi IANA TLD
  • Saran pengejaan untuk TLD dan domain email paling umum
  • Tolak domain akun email sementara seperti mailinator.com

Jadi selain validasi, Verimail.js juga memberi Anda saran. Jadi, jika Anda mengetik email dengan TLD atau domain yang salah yang sangat mirip dengan domain email umum (hotmail.com, gmail.com, dll), itu bisa mendeteksi ini dan menyarankan koreksi.

Contoh:

Dan seterusnya..

Untuk menggunakannya dengan jQuery, cukup sertakan verimail.jquery.js di situs Anda dan jalankan fungsi di bawah ini:

$("input#email-address").verimail({
    messageElement: "p#status-message"
});

Elemen pesan adalah elemen di mana pesan akan ditampilkan. Ini bisa semuanya mulai dari "Email Anda tidak valid" hingga "Apakah maksud Anda ...?".

Jika Anda memiliki formulir dan ingin membatasi sehingga tidak dapat dikirimkan kecuali emailnya valid, maka Anda dapat memeriksa status menggunakan fungsi getVerimailStatus seperti yang ditunjukkan di bawah ini:

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid
}else{
    // Valid
}

Fungsi ini mengembalikan kode status integer sesuai dengan objek Comfirm.AlphaMail.Verimail.Status. Tetapi aturan umum adalah bahwa setiap kode di bawah 0 adalah kode yang menunjukkan kesalahan.

Robin Orheden
sumber
.getVerimailStatus()tidak mengembalikan kode status numerik, hanya nilai string success, erroratau mungkin pending(tidak memverifikasi yang terakhir).
Niko Nyman
14

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here (email is invalid) */ }

ini disediakan oleh pengguna Luca Filosofi dalam jawaban ini

Amila kumara
sumber
Jika Anda menggunakan ini di halaman ASP.NET MVC Razor, jangan lupa untuk keluar dari @karakter dengan @karakter lain . Seperti itu @@, jika tidak, Anda akan mendapatkan galat build.
Rosdi Kasim
11

Solusi yang sangat sederhana adalah dengan menggunakan validasi HTML5:

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

  <input type="submit">
</form>

http://jsfiddle.net/du676/56/

iamse7en
sumber
10

Ini melakukan validasi yang lebih menyeluruh, misalnya memeriksa terhadap titik-titik berturut-turut dalam nama pengguna seperti john..doe @ example.com

function isValidEmail(email)
{
    return /^[a-z0-9]+([-._][a-z0-9]+)*@([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,4}$/.test(email)
        && /^(?=.{1,64}@.{4,64}$)(?=.{6,100}$).*/.test(email);
}

Lihat memvalidasi alamat email menggunakan ekspresi reguler dalam JavaScript .

Kutu buku
sumber
1
Tetapi apakah titik-titik yang berurutan benar-benar tidak valid? Sebaliknya saya pikir Anda tidak akan memasukkan alamat email yang valid dengan melakukan itu.
icktoofay
9

Seperti yang disebutkan orang lain, Anda dapat menggunakan regex untuk memeriksa apakah alamat email cocok dengan suatu pola. Tetapi Anda masih dapat memiliki email yang sesuai dengan pola tetapi saya masih bouncing atau email spam palsu.

memeriksa dengan regex

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

memeriksa dengan API validasi email nyata

Anda dapat menggunakan API yang akan memeriksa apakah alamat email itu asli dan saat ini aktif.

var emailAddress = "[email protected]"
response = $.get("https://isitarealemail.com/api/email/validate?email=" +
    emailAddress,
    function responseHandler(data) {
        if (data.status === 'valid') {
            // the email is valid and the mail box is active
        } else {
            // the email is incorrect or unable to be tested.
        }
    })

Untuk lebih lanjut lihat https://isitarealemail.com atau posting blog

Stephen
sumber
8

Jika Anda memiliki formulir dasar, cukup buat jenis masukan email: <input type="email" required>

Ini akan berfungsi untuk browser yang menggunakan atribut HTML5 dan kemudian Anda bahkan tidak perlu JS. Hanya menggunakan validasi email bahkan dengan beberapa skrip di atas tidak akan banyak membantu sejak:

[email protected] [email protected] [email protected]

dll ... Semua akan divalidasi sebagai email "nyata". Jadi Anda akan lebih baik memastikan bahwa pengguna harus memasukkan alamat email mereka dua kali untuk memastikan bahwa mereka memasukkan yang sama. Tetapi untuk memastikan bahwa alamat email itu asli akan sangat sulit tetapi sangat menarik untuk melihat apakah ada cara. Tetapi jika Anda hanya memastikan bahwa itu adalah email, tetap pada input HTML5.

CONTOH FIDDLE

Ini berfungsi di FireFox dan Chrome. Ini mungkin tidak berfungsi di Internet Explorer ... Tapi internet explorer sucks. Jadi ada itu ...

isaac weathers
sumber
Metode regexp biasanya mencegah email-email konyol seperti @ bc (contoh JSFiddle yang ditautkan memungkinkan Anda menggunakan Chrome terbaru), sehingga solusi HTML5 jelas merupakan solusi yang tidak memadai.
SnowInferno
keren. Jadi bagaimana kalau hanya menggunakan pencocokan pola seperti HTML5 yang "seharusnya" dilakukan? Mengapa Anda tidak mencoba ini di chromebook Anda: jsfiddle.net/du676/8
isaac weathers
8

Validasi Email Javascript di MVC / ASP.NET

Masalah yang saya temui saat menggunakan jawaban Fabian, adalah mengimplementasikannya dalam tampilan MVC karena @simbol Razor . Anda harus menyertakan @simbol tambahan untuk menghindarinya, seperti:@@

Untuk Menghindari Razor Di MVC

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

Saya tidak melihatnya di tempat lain di halaman ini, jadi saya pikir ini mungkin membantu.

EDIT

Berikut ini tautan dari Microsoft yang menjelaskan penggunaannya.
Saya baru saja menguji kode di atas dan mendapat js berikut:

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

Yang melakukan persis apa yang seharusnya dilakukan.

Trevor Nestman
sumber
@nbrogi Apa maksudmu ini tidak berhasil? Saya baru saja memeriksa ini lagi dan ini menghasilkan js berikut var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; Apa yang terjadi pada kode Anda?
Trevor Nestman
Maaf, saya tidak yakin saat ini, saya benar-benar mengubahnya.
nkkollaw
Tolong beri tahu saya kapan Anda bisa. Jika ini informasi yang buruk, maka saya akan menghapusnya. Saya mencoba menyumbangkan informasi yang membantu bila memungkinkan dan ini membantu saya ketika menulis regex dalam tampilan MVC.
Trevor Nestman
Sekali lagi, saya ingin tahu mengapa ini diturunkan. Itu tidak persis apa yang saya inginkan yang menghasilkan @simbol dalam regex di .cshtml. Biasanya itu akan mencoba memperlakukan semuanya setelah @simbol sebagai kode silet, tetapi ganda @@mencegahnya.
Trevor Nestman
Masalah utama yang saya lihat adalah di codeblock kedua regex Anda diatur ke variabel bernama regex, tetapi baris kedua menggunakan variabel bernama re
phlare
7
function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailText);
};

Gunakan Seperti Ini:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
JayKandari
sumber
6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
TUSUKAN
sumber
5
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    $("#btnValidate").live("click", function () {
        if (!ValidateEmail($("#txtEmail").val())) {
            alert("Invalid email address.");
        }
        else {
            alert("Valid email address.");
        }
    });
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />
Pritam
sumber
4

Mendarat di sini ..... berakhir di sini: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

... yang menyediakan regex berikut:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

... yang saya temukan berkat catatan di plugin jQuery Validation readme: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

Jadi, versi terbaru dari @Fabian 's jawabannya akan:

function IsEmail(email) {
  var regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
  return regex.test(email);
}

Semoga itu bisa membantu

timborden
sumber
Yang ini adalah jawaban terbaik untuk saya - itu kembali benar [email protected]tetapi ingin itu salah
Adam Knights
3

Gunakan ini

if ($this.hasClass('tb-email')) {
    var email = $this.val();
    var txt = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!txt.test(email)) {
        e.preventDefault();
        $this.addClass('error');
    } else {
        $this.removeClass('error');
    }
}
Ankit Agrawal
sumber
3

Bug ada di Jquery Validation Validation Plugin Hanya memvalidasi dengan @ untuk mengubahnya

ubah kode menjadi ini

email: function( value, element ) {
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    // Retrieved 2014-01-14
    // If you have a problem with this implementation, report a bug against the above spec
    // Or use custom methods to implement your own email validation
    return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}
pengguna4974898
sumber
3

Untuk mereka yang ingin menggunakan solusi yang dapat dikelola lebih baik daripada mengganggu RegEx tahun cahaya, saya menulis beberapa baris kode. Mereka yang ingin menyimpan byte, tetap pada varian RegEx :)

Ini membatasi:

  • Tidak ada @ dalam string
  • Tidak ada titik dalam string
  • Lebih dari 2 titik setelah @
  • Karakter buruk pada nama pengguna (sebelum @)
  • Lebih dari 2 @ dalam string
  • Karakter buruk di domain
  • Karakter buruk di subdomain
  • Karakter buruk di TLD
  • TLD - alamat

Bagaimanapun, masih mungkin bocor, jadi pastikan Anda menggabungkan ini dengan validasi sisi server + verifikasi tautan email.

Ini JSFiddle

 //validate email

var emailInput = $("#email").val(),
    emailParts = emailInput.split('@'),
    text = 'Enter a valid e-mail address!';

//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) { 

    yourErrorFunc(text);

} else {

    //split domain, subdomain and tld if existent
    var emailDomainParts = emailParts[1].split('.');

    //at least one . (dot), catches error
    if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) { 

        yourErrorFunc(text); 

     } else {

        //more than 2 . (dots) in emailParts[1]
        if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) { 

            yourErrorFunc(text); 

        } else {

            //email user
            if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {

               yourErrorFunc(text);

            } else {

                //double @
                if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) { 

                        yourErrorFunc(text); 

                } else {

                     //domain
                     if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {

                         yourErrorFunc(text); 

                     } else {

                         //check for subdomain
                         if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) { 

                             //TLD
                             if (/[^a-z]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text);

                              } else {

                                 yourPassedFunc(); 

                              }

                        } else {

                             //subdomain
                             if (/[^a-z0-9-]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text); 

                             } else {

                                  //TLD
                                  if (/[^a-z]/i.test(emailDomainParts[2])) {

                                      yourErrorFunc(text); 

                                  } else {

                                      yourPassedFunc();
}}}}}}}}}
SEsterbauer
sumber
3

Anda dapat menggunakan Validasi jQuery dan, dalam satu baris HTML, Anda dapat memvalidasi email dan pesan validasi email:type="email" required data-msg-email="Enter a valid email account!"

Anda dapat menggunakan parameter data-msg-email untuk menempatkan pesan yang dipersonalisasi atau jika tidak menempatkan parameter ini dan pesan default akan ditampilkan: "Silakan masukkan alamat email yang valid."

Contoh lengkap:

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required data-msg-email="Enter a valid email account!">
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
JC Gras
sumber
2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

if($("input#email-address").getVerimailStatus() == 'error') { 

(right code)

}
Lorenzo
sumber
9
Bisakah Anda menguraikan jawaban Anda ... misalnya Anda harus menyebutkan bahwa getVerimailStatus adalah plugin tambahan.
Dave Hogan
2
checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );

Referensi: SITUS WEB JQUERY UI

Daniel Adenew
sumber
2

Anda harus melihat ini: jquery.validate.js , tambahkan ke proyek Anda

menggunakannya seperti ini:

<input id='email' name='email' class='required email'/>
Chuanshi Liu
sumber
2

Opsi sederhana dan lengkap lainnya:

<input type="text" id="Email"/>
<div id="ClasSpan"></div>   
<input id="ValidMail" type="submit"  value="Valid"/>  


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

$("#ValidMail").click(function () {
    $('span', '#ClasSpan').empty().remove();
    if (IsEmail($("#Email").val())) {
        //aqui mi sentencia        
    }
    else {
        $('#ClasSpan').append('<span>Please enter a valid email</span>');
        $('#Email').keypress(function () {
            $('span', '#itemspan').empty().remove();
        });
    }
});
jorcado
sumber
3
Stack Overflow adalah situs dalam bahasa Inggris. Tolong jangan memposting konten dalam bahasa lain.
Anders
2

Anda dapat membuat fungsi Anda sendiri

function emailValidate(email){
    var check = "" + email;
    if((check.search('@')>=0)&&(check.search(/\./)>=0))
        if(check.search('@')<check.split('@')[1].search(/\./)+check.search('@')) return true;
        else return false;
    else return false;
}

alert(emailValidate('[email protected]'));
Wahid Masud
sumber
1

Yang disederhanakan yang baru saja saya buat, melakukan apa yang saya butuhkan. Hanya sebatas alfanumerik, titik, garis bawah, dan @.

<input onKeyUp="testEmailChars(this);"><span id="a"></span>
function testEmailChars(el){
    var email = $(el).val();
    if ( /^[[email protected]]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

Dibuat dengan bantuan orang lain

nathan
sumber
1

Regexp ini mencegah duplikasi nama domain seperti [email protected], ini hanya akan memungkinkan domain dua kali seperti [email protected]. Itu juga tidak memungkinkan statring dari nomor seperti [email protected]

 regexp: /^([a-zA-Z])+([a-zA-Z0-9_.+-])+\@(([a-zA-Z])+\.+?(com|co|in|org|net|edu|info|gov|vekomy))\.?(com|co|in|org|net|edu|info|gov)?$/, 

Semua yang terbaik !!!!!

Brijeshkumar
sumber
1

Validasi email saat mengetik, dengan penanganan kondisi tombol.

$("#email").on("input", function(){
    var email = $("#email").val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!filter.test(email)) {
      $(".invalid-email:empty").append("Invalid Email Address");
      $("#submit").attr("disabled", true);
    } else {
      $("#submit").attr("disabled", false);
      $(".invalid-email").empty();
    }
  });
Radovan Skendzic
sumber
1

jika Anda menggunakan validasi jquery

Saya membuat metode emailCustomFormatyang digunakan regexuntuk format custm saya, Anda dapat mengubahnya untuk memenuhi persyaratan Anda

jQuery.validator.addMethod("emailCustomFormat", function (value, element) {
        return this.optional(element) || /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/.test(value);
    }, abp.localization.localize("FormValidationMessageEmail"));// localized message based on current language

maka kamu bisa menggunakannya seperti ini

$("#myform").validate({
  rules: {
    field: {
      required: true,
      emailCustomFormat : true
    }
  }
});

regex ini menerima

[email protected], [email protected] tapi tidak ini

abc@abc, [email protected],[email protected]

Semoga ini bisa membantu Anda

Basheer AL-MOMANI
sumber