Pertanyaan Bagaimana cara memvalidasi alamat email di JavaScript?


Bagaimana alamat email dapat divalidasi di JavaScript?


3244


asal


Jawaban:


Menggunakan ekspresi reguler mungkin adalah cara terbaik. Anda dapat melihat banyak tes sini (diambil dari kromium)

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(String(email).toLowerCase());
}

Berikut contoh ekspresi reguler yang menerima unicode:

var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

Namun perlu diingat bahwa orang tidak boleh hanya mengandalkan validasi JavaScript. JavaScript dapat dengan mudah dinonaktifkan. Ini harus divalidasi di sisi server juga.

Berikut ini contoh aksi di atas:

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

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid :)");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid :(");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

<h2 id='result'></h2>


3779



Hanya untuk kelengkapan, di sini Anda memiliki regex compliant lain RFC 2822

Standar resmi dikenal sebagai RFC 2822. Ini menjelaskan sintaks yang harus dipatuhi alamat email yang valid. Kamu bisa (tetapi Anda tidak seharusnya - baca terus) menerapkannya dengan ekspresi reguler ini:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

(...) Kami mendapatkan implementasi yang lebih praktis dari RFC 2822 jika kami menghilangkan sintaks menggunakan tanda kutip ganda dan tanda kurung siku. Ini akan tetap cocok dengan 99,99% dari semua alamat email yang sebenarnya digunakan hari ini.

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

Perubahan lebih lanjut yang dapat Anda lakukan adalah mengizinkan domain tingkat atas dua tingkat kode negara apa pun, dan hanya domain tingkat atas generik khusus. Regangan ini memfilter alamat surel suram seperti asdf@adsf.adsf. Kamu perlu memperbaruinya karena domain level teratas baru ditambahkan.

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)\b

Jadi bahkan ketika mengikuti standar resmi, masih ada trade-off yang harus dilakukan. Jangan membabi buta menyalin ekspresi reguler dari perpustakaan online atau forum diskusi. Selalu uji mereka pada data Anda sendiri dan dengan aplikasi Anda sendiri.

Penekanan tambang


609



Saya telah sedikit memodifikasi jawaban Jaymon untuk orang-orang yang ingin validasi sangat sederhana dalam bentuk:

anystring@anystring.anystring

Ekspresi reguler:

/\S+@\S+\.\S+/

Contoh fungsi JavaScript:

function validateEmail(email) 
{
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
}

548



Ada sesuatu yang harus Anda pahami ketika Anda memutuskan untuk menggunakan ekspresi reguler untuk memvalidasi email: Itu mungkin bukan ide yang bagus. Setelah Anda sepakat dengan itu, ada banyak implementasi di luar sana yang dapat membuat Anda setengah jalan di sana, artikel ini merangkumnya dengan baik.

Singkatnya, bagaimanapun, satu-satunya cara untuk benar-benar, yakin secara positif bahwa apa yang dimasukkan pengguna sebenarnya adalah email adalah benar-benar mengirim email dan melihat apa yang terjadi. Selain itu semua hanya tebakan.


292



Wow, ada banyak kerumitan di sini. Jika yang ingin Anda lakukan hanyalah menangkap kesalahan sintaks yang paling jelas, saya akan melakukan sesuatu seperti ini:

\S+@\S+

Biasanya menangkap kesalahan paling jelas yang dibuat pengguna dan memastikan bahwa formulirnya sebagian besar benar, yang merupakan apa yang dimaksud dengan validasi JavaScript.


280



HTML5 sendiri memiliki validasi email. Jika browser Anda mendukung HTML5, maka Anda dapat menggunakan kode berikut.

<form><input type="email" placeholder="me@example.com">
    <input type="submit">
</form>

jsFiddle link

Dari Spesifikasi HTML5:

SEBUAH alamat email yang sah adalah string yang cocok dengan emailproduksi ABNF berikut, set karakter untuk yang Unicode.

email   = 1*( atext / "." ) "@" label *( "." label )
label   = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext   = < as defined in RFC 5322 section 3.2.3 >
let-dig = < as defined in RFC 1034 section 3.5 >
ldh-str = < as defined in RFC 1034 section 3.5 >

Persyaratan ini adalah a pelanggaran yang disengaja RFC 5322, yang mendefinisikan sintaks untuk alamat e-mail yang secara bersamaan terlalu ketat (sebelum karakter "@"), terlalu samar (setelah "@" karakter), dan terlalu longgar (memungkinkan komentar, karakter spasi, dan dikutip string dalam perilaku yang tidak dikenal oleh sebagian besar pengguna) menjadi penggunaan praktis di sini.

Ekspresi reguler JavaScript- dan Perl-kompatibel berikut adalah implementasi dari definisi di atas.

/^[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])?)*$/

165



Saya telah menemukan ini sebagai solusi terbaik:

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

Ini memungkinkan format berikut:

1. prettyandsimple@example.com
2. very.common@example.com
3. disposable.style.email.with+symbol@example.com
4. other.email-with-dash@example.com
9. #!$%&'*+-/=?^_`{}|~@example.org
6. "() []:,; @ \\\"! # $% & '* + - / =? ^ _ `{} | ~ .a "@ example.org
7. "" @ example.org (spasi di antara tanda kutip)
8. üñîçøðé@example.com (karakter Unicode di bagian lokal)
9. üñîçøðé@üñîçøðé.com (karakter Unicode di bagian domain)
10. Pelé@example.com (Latin)
11. δοκιμή@παράδειγμα.δοκιμή (Yunani)
12. 我 買 @ 屋企. 香港 (Mandarin)
13. 甲 斐 @ 黒 川. 日本 (Jepang)
14. чебурашка@ящик-с-апельсинами.рф (Cyrillic)

Ini jelas serbaguna dan memungkinkan karakter internasional yang sangat penting, sementara masih menegakkan apa pun yang mendasar: apa pun. Ini akan memblokir ruang yang secara teknis diizinkan oleh RFC, tetapi mereka sangat jarang sehingga saya senang melakukan ini.


95



Di browser modern Anda dapat membangun di atas jawaban @ Sushil dengan JavaScript murni dan DOM:

function validateEmail(value) {
  var input = document.createElement('input');

  input.type = 'email';
  input.required = true;
  input.value = value;

  return typeof input.checkValidity === 'function' ? input.checkValidity() : /\S+@\S+\.\S+/.test(value);
}

Saya telah mengumpulkan contoh dalam biola http://jsfiddle.net/boldewyn/2b6d5/. Dikombinasikan dengan deteksi fitur dan validasi bare-bones dari Jawaban Squirtle, itu membebaskan Anda dari pembantaian ekspresi reguler dan tidak mengganggu browser lama.


76



JavaScript dapat mencocokkan persamaan reguler:

emailAddress.match( / some_regex /);

Ini sebuah RFC22 ekspresi reguler untuk email:

^((?>[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+\x20*|"((?=[\x01-\x7f])[^"\\]|\\[\x01-\x7f])*
"\x20*)*(?<angle><))?((?!\.)(?>\.?[a-zA-Z\d!#$%&'*+\-/=?^_`{|}~]+)+|"((?=[\x01-\x
7f])[^"\\]|\\[\x01-\x7f])*")@(((?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<
!\[)\.)(25[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-\x7f])
[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$

63