Kiểm tra tính hợp lệ của email - Regular Expressions

Kiểm tra tính hợp lệ của email - Regular Expressions

Tutorial này cho các bạn biết cách Validate 1 địa chỉ email hợp lệ bằng Javascript kết hợp Regular Expressions. Đầu tiên các bạn tạo 1 Form nhập gồm 1 textField có id là email và 1 nút bấm để bấm check địa chỉ email được nhập vào ở textField đó:

<form name="form1" id="form1" method="post"> 
<input type="text" name="email" id="email" size="40"> 
<input type="button" name="check" value="Check" onclick="checkEmail();"> 
</form>

Sau khi có form rùi thì ta tiến hành viết đoạn Javascript để kiểm tra tính hợp lệ của email như sau:

<script type="text/javascript"> 
function checkEmail() { 
    var email = document.getElementById('email'); 
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
    if (!filter.test(email.value)) { 
             alert('Hay nhap dia chi email hop le.\[email protected]');
             email.focus; 
             return false; 
    }
    else{ 
             alert('OK roi day, Email nay hop le.'); 
    } 
} 
</script>

Chúng ta tạo 1 function checkEmail() rồi ở form nhập chúng ta gọi hàm checkEmail này bằng 1 sự kiện onClick() ở nút bấm Check. Tiếp theo khai báo 1 biến email, giá trị của biến này được lấy từ textField ở form nhập qua id của nó:

var email = document.getElementById('email');

Tiếp đó khai báo 1 cái mẫu hợp lệ của 1 địa chỉ email (cái này chính là Regular Expressions):

if (!filter.test(email.value)) {
        alert('Hay nhap dia chi email hop le.\[email protected]');
        email.focus;
        return false;
    }else{
        alert('OK roi day, Email nay hop le.');
    }

Nếu hợp lệ thì Thông báo là Email hợp lệ, ngược lại thông báo không hợp lệ và yêu cầu nhập lại.

Và đây là đoạn code đầy dủ của cả Tutorial này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Validate Email</title>
 <script type="text/javascript">
    function checkEmail() {
        var email = document.getElementById('email');
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email.value)) {
            alert('Hay nhap dia chi email hop le.\[email protected]');
            email.focus;
            return false;
        }
        else
        {
            alert('OK roi day, Email nay hop le.');
        }
    }
</script>
</head>
<body>
    <form name="form1" id="form1" method="post">
        <input type="text" name="email" id="email" size="40">
        <input type="button" name="check" value="Check" onclick="checkEmail();">
    </form>
</body>
</html>
Tags: 
Bạn thấy bài viết này như thế nào?: 
Average: 6.5 (119 votes)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 

So sánh Drupal vs SharePoint từ Developer's Viewpoint

After working in organizations that adopted both Drupal and SharePoint, I have been asked on several occasions my thoughts on the differences between the two platforms

Giới thiệu markup tốt nhất trong Drupal 8

Giới thiệu markup tốt nhất trong Drupal 8

In previous versions of Drupal, developers had to be very careful not to cause a security issue by printing

PHP – Ruby – Python

Sự khác nhau giữa các ngôn ngữ PHP – Ruby – Python

Cũng giống như Tiếng Việt, Tiếng Anh, Tiếng Nhật… trong lập trình cũng có rất nhiều ngôn ngữ. Mỗi ngôn ngữ đều có những ưu điểm, khuyết điểm, và các thế mạnh cũng như môi trường, mục đích sử dụng khác nhau

Công ty diệt chuột T&C

 

Diet con trung