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

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Khanh Hoang
Wed, 6/03/2013, 7:09 (GMT+7)
0 Bình luận

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:

ACTA

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