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 (117 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

 
Mac IOS

Apple công bố iOS 5.0.1 beta hỗ trợ sửa lỗi ngốn pin

Sau khi phát hiện lỗi ngốn pin có nguồn gốc chính là iOS 5, Apple ngay lập tức cho phát hành phiên bản iOS 5.0.1 beta với hứa hẹn cho phép sửa lỗi pin của hệ điều hành này.

Năm 2011 - Tiền đổ và SEO nhiều hơn

Năm 2011 - Tiền đổ và SEO nhiều hơn

Như một kết quả tất yếu về xu hướng và nhận thức kinh tế xã hội, giá trị mà các công ty Web đổ vào SEO

Download sách Drupal: Master Drupal in 7 hours

Download sách Drupal: Master Drupal in 7 hours

Một quyển sách hay, dành cho người mới bắt đầu, dài chưa đến 100 trang. Sách có cách diễn giải sống động, dễ hiểu, và không đề cập đến một dòng lệnh nào. Theo lời tác giả thì "Tôi không phải là nhà phát triển Drupal, tôi không biết code." Tuy nhiên, trong 7 tiếng, bạn sẽ học được cách xây dựng và tối ưu một website Drupal hoàn chỉnh.

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

 

Diet con trung