Trong bài viết này, chúng ta sẽ viết mã HTML cho biểu mẫu đăng ký có xác thực bằng JavaScript. Xác thực trong javascript cho mẫu đăng ký được giải thích từng bước với các ví dụ

Các biểu mẫu đăng ký giúp chúng tôi đăng ký thông tin chi tiết của người dùng trên các cổng trực tuyến như đăng ký, đặt vé, đặt chỗ, gửi và nhận dữ liệu từ .

Biểu mẫu đăng ký là một biểu mẫu HTML chứa các trường nhập và nút gửi to submit your details.

Người dùng có thể điền vào biểu mẫu với thông tin chi tiết của họ và gửi nó đến máy chủ. Nhưng trước khi gửi biểu mẫu, chúng ta cần kiểm tra tính hợp lệ của biểu mẫu xem biểu mẫu có được điền chính xác hay không để chúng tôi có thể ngăn chặn người dùng gửi biểu mẫu với dữ liệu không hợp lệ

Bài viết này tạo và thảo luận về một biểu mẫu đăng ký đẹp với HTML, CSS và xác thực nó bằng Javascript một cách chi tiết, đồng thời cung cấp mã đầy đủ cho nó

Mẫu đăng ký HTML

Để bắt đầu, tạo biểu mẫu đăng ký trước tiên bạn cần quyết định loại thông tin bạn muốn từ người dùng. Đối với các mục đích sử dụng khác nhau, các phần của biểu mẫu có thể khác nhau nhưng ý tưởng cơ bản đằng sau thiết kế biểu mẫu là giống nhau

Đối với phần này, chúng tôi đã xem xét các chi tiết sau [bạn có thể thêm hoặc bớt các phần theo lựa chọn của mình]

• Tên
• E-mail
• Mật khẩu
• Số điện thoại
• Giới tính
• Ngôn ngữ
• Mã Bưu Chính
• Về

Đây là những gì mẫu đăng ký của chúng tôi sẽ trông như thế nào

Mã HTML cho mẫu đăng ký

Để tạo biểu mẫu trong HTML thẻ thẻ được sử dụng. có thuộc tính type xác định loại đầu vào là gì .

Mỗi đầu vào trong biểu mẫu có một nhãn xác định mục đích của phần tử đầu vào.

Vì vậy, về cơ bản, một biểu mẫu bao gồm các loại đầu vào khác nhau với nhãn của chúng và nút gửi

Trước tiên hãy xem mã HTML cho biểu mẫu đăng ký và sau đó chúng tôi sẽ giải thích mã

Mẫu đăng ký mã HTML

  
HTML registration form with varification
  
    

      

        
Name:
        

      
      

        
Email:
        

      
      

        
Password:
        

      
      

        
Phone Number:
        

      
      

        
Gender:
        
Male: 
          Female: 
          Other: 
      
      

        
language
        

          
            Select language
            English
            Spanish
            Hindi
            Arabic
            Russian
          
        
      
      

        
Zip Code:
        

      
      

        
About:
        

      
      

        

      
    
  

You can see the HTML code for the registration form above and notice we have used

Bạn có thể trực tiếp sử dụng đầu vào với nhãn của chúng mà không cần gói chúng trong bảng nhưng các thành phần biểu mẫu đó sẽ không được căn chỉnh theo cùng một đường trục

Hãy xem đầu ra của đoạn mã trên để hiểu cách các phần tử của nó được căn chỉnh theo chiều dọc

Như bạn có thể thấy trong hình trên, tất cả các nhãn có kích thước khác nhau nhưng đầu vào của chúng bắt đầu bằng cùng một đường trục giúp cải thiện giao diện của biểu mẫu đăng ký

Mã CSS cho mẫu đăng ký

HTML xác định cấu trúc của biểu mẫu, nhưng CSS của nó làm cho biểu mẫu đăng ký trông đẹp mắt.

Chúng tôi thường làm việc với các lớp CSS khi nói về CSS. Trong mã HTML, bạn có thể thấy chúng tôi đã đặt . register-form vào biểu mẫu để tạo kiểu cho nó.

Hãy xem mã CSS cho biểu mẫu và hiểu cách bạn có thể tạo kiểu cho nó

* {
  margin: 0
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background-color: #6699cc;
}

.container h1 {
  color: white;
  font-family: sans-serif;
  margin: 20px;
}

.registartion-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  color: rgb[255, 255, 255];
  font-size: 18px;
  font-family: sans-serif;
  background-color: #154a68;
  padding: 20px;
}

.registartion-form input,
.registartion-form select,
.registartion-form textarea {
  border: none;
  padding: 5px;
  margin-top: 10px;
  font-family: sans-serif;
}

.registartion-form input:focus,
.registartion-form textarea:focus {
  box-shadow: 3px 3px 10px rgb[228, 228, 228], -3px -3px 10px rgb[224, 224, 224];
}

.registartion-form .submit {
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: rgb[44, 44, 44];
  background-color: #ffffff;
  border-radius: 5px;
}

.registartion-form .submit:hover {
  box-shadow: 3px 3px 6px rgb[255, 214, 176];
}

Như bạn có thể thấy trong đoạn mã trên, các thành phần biểu mẫu được căn chỉnh vào giữa bằng CSS flexbox được áp dụng trên lớp . lớp biểu mẫu đăng ký và các kiểu cần thiết khác được xác định như chiều rộng, màu nền, kiểu phông chữ, màu sắc, v.v.

Nút gửi cung cấp colspan="2" để nó có thể bao phủ toàn bộ chiều rộng của biểu mẫu đăng ký. Nút gửi có lớp . submit có thêm một số kiểu CSS như bán kính đường viền, cỡ chữ, màu nền, v.v.

Bạn có thể xem mã cho . di chuột và . tiêu điểm chúng được sử dụng để thay đổi các kiểu phần tử CSS nhất định trên các hành động khác nhau trên phần tử.

Xác thực trong Javascript cho mẫu đăng ký

Bạn có thể xác minh xem dữ liệu do người dùng cung cấp trong biểu mẫu đăng ký có hợp lệ hay không bằng cách sử dụng javascript

Ngay sau khi nhấp vào nút đăng ký [nút gửi], tất cả dữ liệu được gửi nhưng cần xác thực trong javascript cho biểu mẫu đăng ký trước khi gửi dữ liệu đến máy chủ vì dữ liệu do người dùng cung cấp có thể không hợp lệ

Khi bạn xác thực dữ liệu và thấy nó không hợp lệ, bạn có thể hiển thị thông báo lỗi cho người dùng

Để xác thực, bạn có thể sử dụng regex [biểu thức chính quy] với javascript.

Lưu ý . regex là một mẫu được sử dụng để so khớp các tổ hợp ký tự trong chuỗi.

Trước tiên hãy xem mã xác minh javascript sau đó chúng ta sẽ xem xét mã chi tiết

// Select all input elements for varification
const name = document.getElementById["name"];
const email = document.getElementById["email"];
const password = document.getElementById["password"];
const phoneNumber = document.getElementById["phoneNumber"];
const gender = document.registration;
const language = document.getElementById["language"];
const zipcode = document.getElementById["zipcode"];

// function for form varification
function formValidation[] {
  
  // checking name length
  if [name.value.length < 2 || name.value.length > 20] {
    alert["Name length should be more than 2 and less than 21"];
    name.focus[];
    return false;
  }
  // checking email
  if [email.value.match[/^\w+[[\.-]?\w+]*@\w+[[\.-]?\w+]*[\.\w{2,3}]+$/]] {
    alert["Please enter a valid email!"];
    email.focus[];
    return false;
  }
  // checking password
  if [!password.value.match[/^.{5,15}$/]] {
    alert["Password length must be between 5-15 characters!"];
    password.focus[];
    return false;
  }
  // checking phone number
  if [!phoneNumber.value.match[/^[1-9][0-9]{9}$/]] {
    alert["Phone number must be 10 characters long number and first digit can't be 0!"];
    phoneNumber.focus[];
    return false;
  }
  // checking gender
  if [gender.gender.value === ""] {
    alert["Please select your gender!"];
    return false;
  }
  // checking language
  if [language.value === ""] {
    alert["Please select your language!"]
    return false;
  }
  // checking zip code
  if [!zipcode.value.match[/^[0-9]{6}$/]] {
    alert["Zip code must be 6 characters long number!"];
    zipcode.focus[];
    return false;
  }
  return true;
}

▶ Hãy thử

Từ ví dụ trên, bạn có thể thấy có một hàm javascript formValidation xác thực biểu mẫu của chúng ta.

Hàm này chạy bất cứ khi nào người dùng gửi biểu mẫu nếu có bất kỳ giá trị đầu vào nào không thỏa mãn một số ràng buộc, nó sẽ cảnh báo một thông báo và dừng việc gửi biểu mẫu bằng cách trả về false

Đối với tên, nó kiểm tra xem độ dài của tên do người dùng đặt có nằm trong khoảng từ 3 đến 21 hay không. Nếu không, nó sẽ cảnh báo một thông báo, tập trung vào tên nhập vào và trả về giá trị sai, dừng gửi biểu mẫu

Làm cách nào để tạo biểu mẫu đăng ký và đăng nhập trong HTML?

Làm cách nào để áp dụng CSS vào biểu mẫu đăng ký?

Làm cách nào để tạo biểu mẫu đăng ký đáp ứng trong HTML và CSS?