Kiểm tra tính hợp lệ của mail bằng Javascript

Việc đảm bảo người dùng đã cung cấp các thông tin yêu cầu trong form HTML là dạng kiểm tra tính valid căn bản đổi với form. Nếu bạn muốn người dùng cung cấp tên, tuổi, email… ta cần một hàm Javascript để đảm bảo rằng họ đã nhập với các thông tin này.

Ở ngôn ngữ HTML5 ta dễ dàng ràng buộc được kiểu dử liệu người dùng nhập vào thông quan các thuộc tính trong thẻ Input như:

text
number
date
email

…
Trong đó ta dễ dàng bắt người dùng nhập đúng một địa chỉ mail thông qua thuộc tính type=”mail”.

<input type="email" name=""emai" id="" placeholder="Nhập địa chỉ mail"/>

Ta có thể dễ dàng áp dụng nhưng ta ít khi hiểu rõ cơ chế hoạt động như thế nào???

Trong việc kiểm tra đúng định dạng của một địa chỉ mail phải tuân thủ 6 quy tắc sau đây

Phải có ký tự @
Ký tự @ không nằm ở vị trí đầu
Phải có ít nhất một dấu . trong địa chỉ mail
Phải có ít nhất 1 ký tự giữa @ và dấu . cuối cùng
Phải có ít nhất một ký tự sau dấu . cuối cùng
Không có khoảng trắng trong địa chỉ mail

Ví dụ các địa chỉ mail sau đây là không hợp lệ:

<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kiểm tra tính hợp lệ của mail</title>
</head>
 
<body>

Phải có ký tự @
Ký tự @ không nằm ở vị trí đầu
Phải có ít nhất một dấu . trong địa chỉ mail
Phải có ít nhất 1 ký tự giữa @ và dấu . cuối cùng
Phải có ít nhất một ký tự sau dấu . cuối cùng
Không có khoảng trắng trong địa chỉ mail

<script>
 function IsInvalidEmail(the_email) {
 var at = the_email.indexOf("@");
 var dot = the_email.lastIndexOf(".");
 var space = the_email.indexOf(" ");
 
if ((at != -1) && //có ký tự @
 (at != 0) && //ký tự @ không nằm ở vị trí đầu
 (dot != -1) && //có ký tự .
 (dot > at + 1) && (dot < the_email.length - 1) //phải có ký tự nằm giữa @ và . cuối cùng
 &&
 (space == -1)) //không có khoẳng trắng 
 {
 alert("Email valid");
 return true;
 } else {
 alert("Email Invalid");
 return false;
 }
 }
 </script>

<form action="#" method="POST" onsubmit="var result = IsInvalidEmail(this.emailbox.value);return result;">
<input type="text" name="emailbox" value="" placeholder="Nhập email">
<button type="submit" value="Submit">Submit</button>
</form>
</body>
 
</html>

Qua đây là cách kiểm tra tính hợp lệ của địa chỉ mail bằng javascript mình vừa trình bày. Có thắc mắc vui lòng comment bên dưới, cảm ơn

Ngôn Ngữ lập trình javascript

Bạn thấy bài viết này như thế nào?