[Code Snippets] Validate email hợp lệ bằng Javascript

Bởi

Trong thế giới công nghệ hiện nay, hầu như ai cũng có một địa chỉ email của riêng mình, giống như số điện thoại vậy di động vậy. Do đó, rất nhiều ứng dụng đã sử dụng email như một thông số để xác định một tài khoản. Ứng dụng của bạn cũng phải không? Mình tin là có vì nếu không bạn đã không gặp phải bài viết này 😊

Có rất nhiều tính huống mà ứng dụng cần phải kiểm tra (validate) một chuỗi mà người dùng nhập vào có phải là một địa chỉ email hợp lệ hay không? Điển hình nhất màn hình đăng ký tài khoản, đăng nhập.

Với Javascript nói riêng hay các ngôn ngữ lập trình khác nói chung, bạn có rất nhiều cách để validate một địa chỉ email. Một trong những cách làm phổ biến nhất là sử dụng regular expression.

Dưới đây là một phương pháp validate một email string bằng Javascript. Hi vọng bạn có thể sử dụng nó trong dự án sắp tới 😊

Thế nào là một địa chỉ email hợp lệ

Căn cứ theo tài liệu đặc tả mới nhất về email là RFC 5322, trong này họ đã mô tả chi tiết thế nào là một địa chỉ email hợp lệ.

Tài liệu mô tả thì nó nhiều tiêu chí lắm, cảnh báo bạn đọc nó có thể sẽ bị “tiền đình” đấy. Đã từng như vậy nên mình sẽ tóm gọn lại các quy tắc xác định email hợp lệ như sau:

Một địa chỉ email được chia là 2 phần và được ngăn cách bởi ký tự @. Cụ thể: local-part@domain

Phần local-part chấp nhận các ký tự sau:

Là các chữ in hoa (A-Z) hoặc chữ thường (a-z)
Là các chữ số (0-9)
Chấp nhận các ký tự đặc biệt: ! # $ % & ‘ * + – / = ? ^ _ { | } ~</li> <li>Chấp nhận ký tự dấu chấm (.)</li> </ul> Phần <em>domain</em> phải tuân theo quy tắc sau: <ul> <li>Là các chữ cái in hoa (A-Z) hoặc thường (a-z)</li> <li>Là các chữ số (0-9)</li> <li>Chấp nhận dấu gạch ngang (-)</li> <li>Chấp nhận dấu chấm (.)</li> </ul> <h2>Validate email sử dụng Regular Expression</h2> Chúng ta sẽ viết một hàm với đầu vào là một string, kết quả trả về là true/false tương ứng nếu string đó là một địa chỉ email hợp lệ. <pre class="EnlighterJSRAW" data-enlighter-language="js">const validate = email => { const expression = /^((?:[A-Za-z0-9!#$%&'*+\-\/=?^_{|}~]|(?<=^|\.)”|”(?=$|\.|@)|(?<=”.*)[ .](?=.*”)|(?<!\.)\.){1,64})(@)((?:[A-Za-z0-9.\-])*(?:[A-Za-z0-9])\.(?:[A-Za-z0-9]){2,})$/i
return expression.test(String(email).toLowerCase())
}

Để đảm bảo hàm chạy đúng, chúng ta thử chạy unit test cái nhỉ.
```
console.log(validate('[email protected]')) // true
console.log(validate('[email protected]')) // true
console.log(validate('foo @bar.com')) // false
console.log(validate('{a}!%?@@bar.com')) // false
```
Validate được thực hiện phía client (trình duyệt) là việc nên làm nhưng không phụ thuộc hoàn toàn vào nó. Bạn vẫn rất cần phải validate lại ở phia server side phòng một số trường hợp như trình duyệt disable Javascript hoặc một lý do nhạy cảm nào khác. Nếu hệ thống của bạn sử dụng NodeJS làm backend thì có thể tái sử dụng luôn đoạn code trên, quá tiện phải không!.

Trên đây là chỉ là một giải pháp validate email bằng javascript, bạn có giải pháp nào ổn hơn thì để lại bình luận bên dưới nhé.

💦 Đọc thêm về Javascript:
Nhận sách học Flutter qua 65 ứng dụng
Flutter là nền tảng lập trình đa nền tảng (Android & iOS) do Google chống lưng. Nếu bạn muốn học Flutter thì không nên bỏ qua cuốn sách này. Hiện sách này đang bán trên Amazon với giá 19,99 $ và giờ VNTALKING miễn phí cho bạn.