0968.68.34.39

Validate số điện thoại bằng Javascript đơn giản

Validate số điện thoại bằng Javascript đơn giản bằng phương pháp Regex với các đầu số điện thoại 10 số mới nhất

Validate số điện thoại bằng Javascript đơn giản
5 (100%) 3 votes

Gần đây một người bạn nhờ mình sửa Form cần xác thực số điện thoại có đúng định dạng hay không, đây không phải chủ đề mới gì, trên mạng cũng có khá nhiều bài hướng dẫn về chủ đề này, tuy nhiên mình thấy hầu hết các đoạn script được chia sẻ khá phức tạp và các đầu số nhà mạng điện thoại cũng đang thay đổi từ 11 số về 10 số, nên mình quyết định viết một bài hướng dẫn nhỏ cho các bạn nào đang có nhu cầu tìm hiểu.

Ví dụ mình có một form cơ bản như sau:

Validate số điện thoại bằng Javascript đơn giản
Validate số điện thoại bằng Javascript đơn giản

<form>
	<div class="input-group">
		<input id="mobile" type="text" class="form-control" placeholder="Số điện thoại">
		<div class="input-group-btn">
			<button class="btn btn-default checkmobile" type="button">
			Kiểm tra
			</button>
		</div>
	</div>
</form> 

Ở đây mình có liệt kê trước đầu số mới nhất các nhà mạng điện thoại:
Viettel: 09, 03
MobiFone: 09, 07
VinaPhone: 09, 08
VietnamobileGmobile: 09, 05

Bây giờ chúng ta viết đoạn mã javascript sau để Validate số điện thoại theo đầu số mới nhất:

<script type="text/javascript">
$(document).ready(function() {
	$('body').on('click','.checkmobile', function() {
	var vnf_regex = /((09|03|07|08|05)+([0-9]{8})\b)/g;
	var mobile = $('#mobile').val();
	if(mobile !==''){
		if (numcc.test(mobile) == false) 
		{
			alert('Số điện thoại của bạn không đúng định dạng!');
		}else{
			alert('Số điện thoại của bạn hợp lệ!');
		}
	}else{
		alert('Bạn chưa điền số điện thoại!');
	}
	});
});
</script>

Giải thích
Ở đây các bạn có thể thấy mình dùng phương pháp Regex trong Javascirpt để kiểm tra:
var vnf_regex = /((09|03|07|08|05)+([0-9]{8})\b)/g; Tạo một biểu thức Regex chính quy thuần (regular expression literal).
var mobile = $('#mobile').val(); Lấy giá trị được nhập vào ô số điện thoại.
numcc.test(mobile) == false Nếu Số nhập vào khác với biểu thức đã tạo phía trên thì thông báo sai định dạng và ngược lại.

Bây giờ ta cùng thử một vài ví dụ:
Nhập số điện thoại đúng đầu số và đủ 10 số

Xác thực số điện thoại đúng
Xác thực số điện thoại đúng

Nhập số điện thoại thừa số (11 số)

Xác thực số điện thoại sai
Xác thực số điện thoại sai

Nhập số điện thoại đủ số nhưng sai đầu số

Xác thực số điện thoại sai
Xác thực số điện thoại sai

Chúc các bạn thành công,
Nếu có bất kỳ câu hỏi nào, bạn vui lòng gửi câu hỏi vào phần bình luận bên dưới, Vnfaster sẽ cố gắng hỗ trợ trong khả năng của mình!.

Bài liên quan

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bình luận của bạn sẽ được hiển thị sau khi kiểm duyệt. Cảm ơn bạn đã để lại bình luận!.