Xác thực số điện thoại di động trong html

Phạm vi

• Trong bài viết này, chúng ta sẽ xem cách thực hiện xác thực số điện thoại di động trong javascript theo nhiều cách khác nhau
• Một trong những cách xác thực số điện thoại là sử dụng biểu thức chính quy javascript
• Một cách khác được thảo luận trong bài viết này là sử dụng biểu thức chính quy javascript và HTML
• Tuy nhiên, một trong số chúng đang xác thực số điện thoại bằng đầu vào số điện thoại HTML5
• Hơn nữa, chúng ta cũng sẽ thảo luận về các định dạng số khu vực, số điện thoại di động và mã quay số quốc tế
• Hơn nữa trong bài viết này, chúng ta cũng sẽ xem tại sao chúng ta nên xác thực đầu vào số điện thoại
• Cuối cùng, chúng ta cũng sẽ xem cách xác thực số điện thoại bằng API

Giới thiệu

Việc xác thực số điện thoại di động là rất quan trọng trong trang web để đảm bảo rằng chúng tôi đang giao dịch với người dùng thực cũng như liên hệ lại với người dùng cho các mục đích khác. Có nhiều cách khác nhau để chúng tôi có thể thực hiện xác thực số điện thoại di động trong javascript

Tuy nhiên, lỗi chính mà bất kỳ người dùng nào cũng có thể mắc phải là họ để trống trường, nhập các ký tự không hợp lệ vào trường hoặc nhập một số có độ dài lớn hơn hoặc nhỏ hơn 10. Để kiểm tra tất cả các điều kiện này, chúng tôi sử dụng if. điều kiện khác trong javascript

Tuy nhiên, chúng ta cũng có thể sử dụng biểu thức chính quy để xác thực số điện thoại. Chúng ta sẽ viết một biểu thức chính quy và kiểm tra nó bằng hàm test() để xác thực nó trong javascript

"Javascript Regex" đề cập đến các biểu thức chính quy trong Javascript. Biểu thức chính quy là một chuỗi các ký tự được sử dụng để chỉ định mẫu tìm kiếm trong văn bản. Văn bản được tìm kiếm với mẫu được chỉ định thông qua các biểu thức chính quy

Các biểu thức chính quy này được sử dụng để thực hiện các thao tác "tìm" hoặc "tìm và thay thế" nhất định trên một chuỗi hoặc để xác thực đầu vào

Để xác thực số điện thoại trong Javascript, chúng tôi sẽ sử dụng biểu thức chính quy sau

;/^(\d{3})[- ]?(\d{3})[- ]?(\d{4})$/
Bây giờ, chúng ta hãy chia nhỏ regex để hiểu rõ hơn về nó
^
Nó biểu thị sự bắt đầu của biểu thức
đ{3}
Nó biểu thị một trận đấu bắt buộc của ba chữ số trong văn bản
[- ]?
Nó được sử dụng để biểu thị một kết hợp tùy chọn của dấu gạch nối và khoảng trắng sau ba ký tự đầu tiên của văn bản
(\d{3})[- ]
Nó giống như biểu thức trước, do đó, nó sẽ hoạt động giống như biểu thức trước biểu thị tổng cộng 6 chữ số bây giờ
đ{4}
Nó được dùng để biểu thị bắt buộc phải có 4 chữ số sau 6 chữ số trong văn bản
$
Nó biểu thị sự kết thúc của biểu thức
Biểu thức chính quy ở trên sẽ khớp với tất cả các số di động như 123789456712378945671237894567, 123456789123 456 789123456789, 123−456−789123-456-789123−456−789 và 123−4566726−789123-456-789123−456−789 và 123−4566726−789123-456-789123−456−789 và 123−4566726−789123−789123−456−789
Bây giờ, hãy xem cách sử dụng biểu thức chính quy này trong Javascript
function validateNumber(input) {
  var re = /^(\d{3})[- ]?(\d{3})[- ]?(\d{4})$/

  console.log(re.test(input))
}

validateNumber('123 456 7890')
đầu ra
Trong ví dụ mã trên, chúng ta đã tạo một hàm validateNumber() chứa biểu thức chính quy trong một biến re. Mẫu biểu thức chính quy này sau đó được tìm kiếm trong chuỗi đầu vào bằng hàm test() và do đó đầu ra được in. Tuy nhiên, hàm test() được sử dụng để kiểm tra xem có khớp trong một chuỗi không. Nếu mẫu khớp với chuỗi thì hàm test() trả về true nếu không thì trả về false

Xác thực số điện thoại bằng JavaScript Regex và HTML

Bây giờ chúng ta sẽ xem cách xác thực số điện thoại bằng biểu thức chính quy javascript và HTML

Trước hết, hãy tạo một biểu mẫu có trường số điện thoại sẽ được xác thực. Sau đó, ngay khi biểu mẫu được gửi, một chức năng được gọi để xác thực biểu mẫu

Đoạn mã dưới đây chứa mã HTML để tạo biểu mẫu

  

  Phone Number:
  
  

  

  Submit
  

  

  

Bây giờ, ngay khi biểu mẫu được gửi, một chức năng được gọi để xác thực trường Số điện thoại. Trước tiên, hàm trích xuất giá trị đầu vào từ biểu mẫu bằng cách sử dụng tài liệu. getElementById() và lưu trữ nó trong một biến nói số. Bây giờ, giá trị được lưu trữ trong biến này được kiểm tra xem nó có hợp lệ hay không bằng cách sử dụng biểu thức regex trong Javascript đã được thảo luận trong chủ đề phụ trước đó
function validateNumber(input) {
  var re = /^(\d{3})[- ]?(\d{3})[- ]?(\d{4})$/

  return re.test(input)
}
Tuy nhiên, nếu hàm regex trả về true thì thông báo "Xác thực thành công" sẽ xuất hiện trên trang web, nếu không, một cảnh báo sẽ xuất hiện để "Nhập số hợp lệ", sau đó thông báo "Xác thực không thành công" xuất hiện trên màn hình
function validateForm(event) {
  var number = document.getElementById('phoneNo').value
  if (!validateNumber(number)) {
    alert('Please enter a valid number')
    const ele = document.getElementById('result')
    ele.innerHTML = 'Validation Failed'
    ele.style.color = 'red'
  } else {
    const ele = document.getElementById('result')
    ele.innerHTML = 'Validation Successful'
    ele.style.color = 'green'
  }
  event.preventDefault()
}
Tuy nhiên, có một số CSS cũng đã được thêm vào các thông báo xuất hiện trên màn hình để chúng có màu xanh lục và đỏ
Dưới đây là mã làm việc đầy đủ kết hợp tất cả các đoạn được thảo luận ở trên để xác thực số điện thoại trong HTML bằng cách sử dụng biểu thức chính quy Javascript


  
    
      

      Phone Number:
      
      

      

      Submit
      

      

      
    

    
  

đầu ra

Xác thực số điện thoại với đầu vào HTML5 “tel”

Chúng tôi cũng có thể xác thực số điện thoại bằng đầu vào "tel" HTML5. Đó là cách tốt hơn nhiều để xác thực số điện thoại vì nó cũng tạo trường nhập cho các số quốc tế. Ngoài ra, bằng cách sử dụng đầu vào "tel" HTML5, việc xác thực có thể được thực hiện bằng cách sử dụng mã ngắn hơn nhiều

Trường đầu vào "tel" HTML5 có thể được biểu thị như sau

Như bạn có thể thấy, nó sử dụng thuộc tính type="tel" và thuộc tính mẫu cũng được sử dụng trong khi xác thực số điện thoại. Hơn nữa, nó cho phép trình duyệt điện thoại thông minh tối ưu hóa trường nhập liệu và hiển thị bàn phím trên màn hình, điều này sẽ thuận tiện cho việc chỉ nhập số điện thoại vào trường nhập liệu
Mã hoàn chỉnh để xác thực số điện thoại bằng cách sử dụng đầu vào "tel" HTML5 như sau


  
    
      

      Phone Number:
      
      

      

      Submit
    

    
  

đầu ra

Định dạng số điện thoại khu vực

Điều rất quan trọng là sử dụng đúng định dạng cho số điện thoại khu vực vì sử dụng sai định dạng có thể khiến dữ liệu số điện thoại của bạn rất khó xử lý theo cách thủ công bằng cách tạo các bản ghi trùng lặp, v.v.

Do đó, dưới đây là một số định dạng số khu vực được sử dụng phổ biến nhất

Số điện thoại di động

Các số điện thoại di động ở Hoa Kỳ bao gồm một số điện thoại gồm 11 chữ số. Số điện thoại 11 chữ số này được chia nhỏ như sau mã quốc gia gồm 1 chữ số, mã vùng gồm 3 chữ số và 7 chữ số còn lại đại diện cho số điện thoại

Biến thể Bắc Mỹ

Định dạng số điện thoại ở Bắc Mỹ khá khác so với các số khác. Nó bao gồm một mã vùng gồm 3 chữ số kèm theo dấu ngoặc đơn. Hơn nữa, bạn cần cung cấp khoảng trắng và sau đó là mã trao đổi gồm ba chữ số, sau đó là dấu gạch nối và số có bốn chữ số

Biến thể Vương quốc Anh

Định dạng số điện thoại khu vực của Vương quốc Anh bắt đầu bằng ký hiệu dấu cộng ('+') theo sau là mã quốc gia. Sau đó, bạn cần thêm mã vùng có khoảng trắng và sau đó là số điện thoại gồm tám chữ số

Mã quay số quốc tế

Trong khi xử lý các số điện thoại quốc tế, bạn cần chú ý đến các quy ước được tuân theo ở một quốc gia cụ thể, chẳng hạn như mã thoát, tiền tố quốc tế, tiền tố trung kế, v.v.

Tiền tố trung kế là một trong những lỗi phổ biến mà người dùng mắc phải khi xử lý các số quốc tế. Đó là mã một chữ số thường bắt đầu bằng 0 và được thêm vào trước số thuê bao quốc gia

Một lỗi phổ biến khác khi xử lý số điện thoại quốc tế là mã vùng. Hầu hết các quốc gia không sử dụng mã vùng trong số điện thoại di động của họ thay vào đó họ tuân theo định dạng quay số quốc gia thống nhất

Những sự cố như vậy có thể xảy ra khi xử lý các số điện thoại di động quốc tế, do đó, chúng tôi phải xử lý chúng. Tuy nhiên, các tiêu chuẩn quốc tế về số điện thoại di động của các quốc gia khác nhau đã được liệt kê trong bài viết về Tiền tố cuộc gọi này. Bạn có thể tham khảo để biết thêm thông tin

Việc xác thực số điện thoại là rất quan trọng vì lý do bảo mật. Nó ngăn bạn khỏi nhiều trò gian lận đăng ký và đăng ký khách hàng giả mạo

Hơn nữa, bạn có thể áp dụng phương tiện xác minh mật khẩu một lần để ngăn mình khỏi bất kỳ người dùng giả mạo nào. Hệ thống OTP sẽ gửi mật khẩu dùng một lần cho người dùng để kiểm tra khả năng truy cập của họ và đảm bảo người dùng chính hãng vào trang web của bạn

Xác thực số điện thoại bằng API

Chúng tôi cũng có thể xác thực số điện thoại bằng API. Đó là một cách dễ dàng hơn nhiều để xác thực số điện thoại vì chúng tôi không bắt buộc phải viết bất kỳ mã nào từ đầu để xác thực

Tuy nhiên, chúng tôi chỉ cần một khóa API để xác thực số điện thoại. Bạn có thể thử sử dụng API NumVerify để xác thực số điện thoại. Đây là API REST thời gian thực hỗ trợ gần 232 quốc gia

Bạn chỉ cần khóa API sẽ được gán cho bạn ngay khi bạn đăng ký trang web của Numverify. Để thực hiện một yêu cầu API, bạn cần viết câu lệnh dưới đây

Tuy nhiên, trường YOUR_ACCESS_KEY chính là khóa API. Nếu yêu cầu xác thực số điện thoại thành công thì kết quả sẽ như thế này

{
  "valid": true,
  "number": "14158586273",
  "local_format": "4158586273",
  "international_format": "+14158586273",
  "country_prefix": "+1",
  "country_code": "US",
  "country_name": "United States of America",
  "location": "Novato",
  "carrier": "AT&T Mobility LLC",
  "line_type": "mobile"
}
Như bạn có thể thấy trong đầu ra ở trên, trường hợp lệ được đặt thành true, điều này mô tả rằng số được xác thực nếu không nó sẽ được đặt thành false
 

			
Làm cách nào tôi có thể thêm xác thực số điện thoại di động?
			
Tiêu chí xác thực Số điện thoại di động.  . 
 
Chữ số đầu tiên phải chứa các số từ 6 đến 9
 
9 chữ số còn lại có thể chứa bất kỳ số nào trong khoảng từ 0 đến 9
 
Số điện thoại di động cũng có thể có 11 chữ số bằng cách bao gồm 0 ở đầu
 
Số điện thoại di động cũng có thể có 12 chữ số bằng cách bao gồm 91 ở đầu
 
		
			
Làm cách nào để đặt số điện thoại di động trong HTML?
			
The    xác định trường để nhập số điện thoại. 
		
			
Làm cách nào để xác thực số điện thoại trong HTML bằng JavaScript?
			
Xác thực số điện thoại bằng JavaScript Regex và HTML
 . kiểm tra (đầu vào_str); . getElementById('myform_phone'). giá trị; 
		
			
Làm cách nào để kiểm tra xem số điện thoại di động có hợp lệ không?
			
Truy cập www. văn bản. com hoặc tải xuống ứng dụng di động TextMagic trên cửa hàng Google Play.  Nhập số điện thoại và quốc gia của bạn rồi nhấp vào Xác thực số . Ứng dụng này sẽ hiển thị cho bạn trạng thái của số nếu nó đang hoạt động hay không. Một ứng dụng khác bạn có thể sử dụng là Giám sát số điện thoại.