Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?

Xác thực email là một trong những điều quan trọng nhất khi chúng tôi muốn thu thập địa chỉ email từ người dùng của mình. Cách sử dụng phổ biến nhất của "xác thực email trên javascript" là trong trang liên hệ với chúng tôi của bất kỳ trang web nào. Trong bài đăng này, chúng ta sẽ tìm hiểu cách hoạt động của xác thực email trong HTML

Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?

Xác thực email trong thuộc tính loại HTML

Sử dụng thuộc tính loại HTML, chúng ta có thể dễ dàng xác thực email. Nhưng kỹ thuật này chỉ hoạt động khi chúng tôi gửi biểu mẫu HTML của mình bằng cách nhấp vào nút gửi. Điều đó có nghĩa là nếu bạn gửi biểu mẫu của mình bằng javascript thì kỹ thuật này sẽ không hoạt động
Một vấn đề khác là kỹ thuật này không kiểm tra đúng phần tên miền. Có thể bạn đã biết một email có ba phần local, symbol và domain. Để biết thêm chi tiết, vui lòng tìm hiểu định dạng hợp lệ của địa chỉ email là gì

 



Vì vậy, cách hợp lệ để xác thực email trong HTML là sử dụng thuộc tính mẫu

Xác thực email trong thuộc tính Mẫu HTML

Thuộc tính mẫu HTML là một trong những điều thú vị để xác thực dữ liệu đầu vào. Chúng tôi có thể xác thực văn bản, ngày tháng, tìm kiếm, URL, điện thoại, email và mật khẩu. Bây giờ chúng ta sẽ tìm hiểu cách “xác thực email bằng thuộc tính mẫu HTML”
Thuộc tính Mẫu HTML có một biểu thức chính quy và khớp giá trị đầu vào với biểu thức chính quy
Ghi chú. bạn cần sử dụng dấu ngoặc đơn trong thuộc tính mẫu và không sử dụng dấu gạch chéo lên ở vị trí đầu tiên và cuối cùng

Cụm từ thông dụng để xác thực email

/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
Email Validation in HTML
Ghi chú. nếu bạn muốn hiển thị thông báo lỗi tùy chỉnh, bạn có thể sử dụng xác thực email trên javascript

JavaScript là một ngôn ngữ lập trình mã nguồn mở. Nó được thiết kế để tạo các ứng dụng tập trung vào web. Nó nhẹ và thông dịch, làm cho nó nhanh hơn nhiều so với các ngôn ngữ khác. JavaScript được sử dụng để tạo các ứng dụng web được thiết kế đẹp mắt

Xác thực email trong JavaScript là một phần quan trọng trong trải nghiệm người dùng của ứng dụng web. Xác thực hỗ trợ nhập biểu mẫu và đảm bảo rằng chỉ thông tin hợp lệ mới được chuyển đến máy chủ từ phía máy khách của ứng dụng

Khái niệm cơ bản đến nâng cao - Tìm hiểu tất cả

Phát triển toàn bộ PGP của Caltech Chương trình khám phá

Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?

Xác thực là gì?

Xác thực thường được định nghĩa là quá trình kiểm tra các giá trị do người dùng nhập vào. Nó đóng một vai trò quan trọng trong các ứng dụng web và nâng cao trải nghiệm người dùng tổng thể. Chúng tôi có thể xác thực email, mật khẩu, ngày tháng, số điện thoại di động và nhiều trường khác

JavaScript được sử dụng để xác thực dữ liệu biểu mẫu ở phía máy khách của ứng dụng web và điều này tăng tốc quá trình xác thực do xử lý dữ liệu nhanh hơn khi so sánh với xác thực phía máy chủ

Bây giờ chúng ta đã biết một chút về xác thực, hãy tiếp tục và triển khai xác thực email trong JavaScript

Cách xác thực email bằng JavaScript

Xác thực email là một phần quan trọng trong việc xác thực biểu mẫu HTML. Email là một chuỗi hoặc một tập hợp con các ký tự ASCII được phân tách thành hai phần bằng ký hiệu @. Phần đầu tiên chứa thông tin cá nhân trong khi phần còn lại chứa tên miền mà email được đăng ký

Phần thông tin cá nhân có thể chứa các ký tự ASCII sau

  • Chữ hoa và chữ thường (A-Z và a-z)
  • Ký tự số (0-9)
  • Ký tự đặc biệt -. # $ % & ' * + - / = ? . } ~
  • Dấu chấm, dấu chấm hoặc dấu chấm (. ) với điều kiện không được là chữ đầu hoặc chữ cuối của email và không được lặp lại lần lượt

Trở thành người tạo ra các sản phẩm làm hài lòng người dùng

Hội thảo trên web miễn phí. 8 tháng 2, Thứ Tư. 8 giờ tối IST Đăng ký ngay

Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?

Tên miền chứa

  • Bức thư
  • chữ số
  • dấu gạch nối
  • dấu chấm

Một trong những cách phổ biến nhất để xác thực email trong JavaScript là sử dụng các biểu thức chính quy. JavaScript sử dụng các biểu thức chính quy để mô tả một mẫu ký tự.  

e-mail. js

Tệp này chứa mã JavaScript mà chúng tôi cần để xác thực email. Chúng tôi đang sử dụng cụm từ thông dụng để xác thực email ở phía máy khách của ứng dụng web

chức năng Xác thựcEmail (đầu vào) {

var hợp lệRegex = /^[a-zA-Z0-9. #$%&'*+/=?^_`{. }~-]+@[a-zA-Z0-9-]+(?. \. [a-zA-Z0-9-]+)*$/;

nếu (đầu vào. giá trị. khớp (validRegex)) {

alert("Địa chỉ email hợp lệ. ");

tài liệu. hình thức 1. Văn bản 1. tập trung();

trả về đúng;

} khác {

cảnh báo ("Địa chỉ email không hợp lệ. ");

tài liệu. hình thức 1. Văn bản 1. tập trung();

trả về sai;

}

}

  • Xác định biểu thức chính quy để xác thực địa chỉ email
  • Kiểm tra xem giá trị đầu vào có khớp với biểu thức chính quy không
  • Nếu trùng khớp, hãy gửi thông báo cho biết “địa chỉ email hợp lệ”
  • Nếu không khớp, hãy gửi cảnh báo cho biết "địa chỉ email không hợp lệ"

e-mail. html

Tệp này chứa mã HTML cơ sở có tất cả các thành phần được xác định cho trang web này

<. LOẠI TÀI LIỆU html>

<đầu>

Xác thực email JavaScript

  

Nhập địa chỉ email

  •  
  •             

    gõ = "gửi"

    tên = "xác thực"

    value="Xác thực"

    onclick="ValidateEmail(tài liệu. hình thức 1. Văn bản 1)"

    />

              

  •  
  •         

      

    

  

đọc liên quan. HTML (Ngôn ngữ đánh dấu siêu văn bản) là gì?

Đây là cách để có được công việc nhà phát triển phần mềm hàng đầu

Phát triển ngăn xếp đầy đủ-MEAN Chương trình khám phá

Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?

e-mail. css

Tệp này chứa các kiểu CSS cần thiết để tạo kiểu cho các thành phần HTML trong trang web. Các phong cách đều rõ ràng và bạn có thể tự do thay đổi các phong cách này theo sở thích của mình

li {

kiểu danh sách. không có;

cỡ chữ. 16pt;

}

thư {

lề. tự động;

đệm-top. 10px;

đệm-đáy. 10px;

chiều rộng. 400px;

lý lịch. mòng két;

ranh giới. 1px màu bạc nguyên khối;

}

thư h2 {

lề trái. 38px;

màu sắc. trắng;

}

đầu vào {

cỡ chữ. 20 điểm;

}

đầu vào. tập trung,

vùng văn bản. tập trung {

màu nền. vàng nhạt;

}

xác thực đầu vào {

cỡ chữ. 12pt;

}

rq {

màu sắc. #ff0000;

cỡ chữ. 10 điểm;

}

đầu ra

Cuối cùng, đầu ra sẽ trông như thế này

Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?

Quả sung. Xác thực email trong JavaScript

Chúng tôi hy vọng bạn đã hiểu cách triển khai xác thực email trong JavaScript sau khi xem qua bài viết này. Đây là một chủ đề tương đối đơn giản được sử dụng trong các loại ứng dụng web khác nhau

đọc liên quan. Hướng dẫn CSS cơ bản cho người mới bắt đầu

Nắm vững toàn bộ kiến ​​thức cơ bản về JavaScript, jQuery, Ajax, v.v. với Khóa đào tạo cấp chứng chỉ Javascript. Kiểm tra xem trước khóa học

Đón đầu xu hướng và làm chủ JavaScript ngay hôm nay

Bạn đang tự hỏi làm thế nào bạn có thể đạt được các kỹ năng cần thiết để tận dụng sự phổ biến to lớn của JavaScript khi bạn đã quen với việc xác thực email? . Chúng tôi cung cấp Chương trình đào tạo chứng chỉ Java toàn diện, sẽ giúp bạn sẵn sàng cho sự nghiệp sau khi hoàn thành. Ngoài ra, xác thực email là một trong những chủ đề thường được hỏi trong các câu hỏi phỏng vấn Java. Vì vậy, hãy bắt đầu ngay hôm nay và nắm bắt tương lai của bạn

Nếu bạn là một nhà phát triển web và thiết bị di động đầy tham vọng, khóa đào tạo JavaScript sẽ mở rộng các kỹ năng và chân trời nghề nghiệp của bạn

Bạn có câu hỏi nào cho chúng tôi không?

Tìm Chương trình đào tạo trực tuyến dành cho nhà phát triển Java Full Stack của chúng tôi tại các thành phố hàng đầu

NameDatePlaceFull Stack Nhóm nhà phát triển Java bắt đầu vào ngày 15 tháng 2 năm 2023,
Đợt cuối tuầnChi tiết CityView của bạnNhóm nhà phát triển Java đầy đủ ngăn xếp bắt đầu vào ngày 22 tháng 2 năm 2023,
Đợt cuối tuầnChi tiết CityView của bạnNhóm nhà phát triển Java đầy đủ ngăn xếp bắt đầu vào ngày 15 tháng 3 năm 2023,
Lô hàng cuối tuầnChi tiết CityView của bạn

Giới thiệu về tác giả

Làm cách nào để xác thực email bằng cách sử dụng mẫu trong HTML?
Taha Sufiyan

Taha là một nhà phân tích nghiên cứu tại Simplilearn. Anh ấy đam mê xây dựng giao diện người dùng tuyệt vời và luôn cập nhật về thế giới Trí tuệ nhân tạo. Taha cũng thích chơi game và chụp ảnh

Làm cách nào để xác thực email trong mẫu HTML?

Ví dụ. Một phần tử nhân vật@nhân vật. tên miền (các ký tự theo sau là dấu @, theo sau là các ký tự khác và sau đó là ". "

Mẫu xác thực địa chỉ trong HTML5 là gì?

Câu đúng là ([a-zA-Z0-9]. . /. \\. @. #. \$. %. &)+ hoặc [a-zA-Z0-9 /\\@#$%&]+.

Làm cách nào để xác thực email trong HTML bằng JavaScript?

Cách xác thực email bằng JavaScript .
Chữ hoa và chữ thường (A-Z và a-z)
Ký tự số (0-9)
Ký tự đặc biệt -. # $ % & ' * + - / = ? . } ~
Dấu chấm, dấu chấm hoặc dấu chấm (. ) với điều kiện không được là chữ đầu hoặc chữ cuối của email và không được lặp lại lần lượt

Thuộc tính mẫu cho đầu vào email là gì?

Thuộc tính mẫu Email đầu vào trong HTML DOM được dùng để đặt hoặc trả về thuộc tính mẫu của trường email . Nó được sử dụng để chỉ định biểu thức chính quy mà giá trị phần tử đầu vào được kiểm tra dựa trên. Sử dụng thuộc tính Global title để mô tả mẫu giúp người dùng.