Khanh Hoang - Kenn
Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.
Kiểm tra tính hợp lệ của email - Regular Expressions
- 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>Bạn thấy bài viết này như thế nào?:
Advertisement
Quảng Cáo Bài Viết
Bí ẩn trong phím Option của Mac OS X
Bản thân Mac OS X có rất nhiều những bí mật mà bạn phải tự tìm kiếm bởi chúng không nằm trong bất cứ hướng dẫn sử dụng nào.
Máy tính bảng Google Nexus sẽ ra mắt vào tuần tới
Chủ tịch của Google, Eric Schmidt đã lên tiếng thừa nhận hãng đang tiến hành sản xuất chiếc máy tính bảng đầu tiên sau quãng thời gian dài chờ đợi.
Giới thiệu các lệnh command line hữu ích trong Window 8 năm 2015
Ở trên, bạn đã có thể chạy được Microsoft Excel , Microsoft Access, Microsoft Powerpoint, Microsoft Word, Microsoft Frontpage
Monthly archive
- October 2011 (1)
- November 2011 (300)
- December 2011 (242)
- January 2012 (85)
- February 2012 (64)
- March 2012 (55)
- April 2012 (24)
- May 2012 (26)
- June 2012 (53)
- July 2012 (128)
- August 2012 (135)
- September 2012 (27)
- October 2012 (60)
- November 2012 (95)
- December 2012 (161)
Công ty diệt chuột T&C
Database
-
06/01/2014 -
11/12/2012
-
18/07/2012
-
18/12/2012
Bình luận (0)
Add Comment