Computer >> Máy Tính >  >> Lập trình >> Javascript

Hành động biểu mẫu HTML và gửi xác thực bằng JavaScript?

Hãy xem một ví dụ trong đó chúng tôi đang xác thực việc gửi văn bản đầu vào -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form onsubmit="return validateTheForm()" method="GET" action="https://mail.google.com/mail/">
<br/>
<input type="text" id="txtInput" value=""/>
<input type="submit" value="search"/>
</form>
<script>
   function validateTheForm(){
      var validation = (document.getElementById('txtInput').value == 'gmail');
      if(!validation){
         alert('Something went wrong...Plese write gmail intext box and click');
         return false;
      }
      return true;
   }
</script>
</body>
</html>

Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Hành động biểu mẫu HTML và gửi xác thực bằng JavaScript?

Bước 1

Nhập GMAIL vào hộp văn bản -

Hành động biểu mẫu HTML và gửi xác thực bằng JavaScript?

Sau khi nhấp vào nút tìm kiếm, kết quả như sau -

Hành động biểu mẫu HTML và gửi xác thực bằng JavaScript?

Bước 2

Khi nhập giá trị khác, ngoại trừ GMAIL, bạn sẽ nhận được thông báo cảnh báo.

Đầu tiên chúng ta hãy nhập giá trị và nhấn enter -

Hành động biểu mẫu HTML và gửi xác thực bằng JavaScript?

Sau khi nhấp vào nút tìm kiếm, bạn sẽ nhận được thông báo cảnh báo như trong đầu ra bên dưới -

Hành động biểu mẫu HTML và gửi xác thực bằng JavaScript?