Sử dụng thư viện validation javacript form

Thứ hai - 27/06/2022 21:45
Khi bạn ghé thăm một trang website nào đó, bạn có thể thường xuyên bắt gặp các form (biểu mẫu) ví dụ như form đăng kí, đăng nhập tài khoản, form lấy ý kiến khách hàng,.... Các thông tin mà người dùng nhập vào form cần phải được xác thực để đảm bảo sự hợp lý.
Các tính năng chính của form: 
  • Kiểm tra đảm bảo dữ liệu nhập vào không được để trống 
  • Kiểm tra định dạng email
  • Yêu cầu khi đặt mật khẩu (độ dài),...

Hướng dẫn sử dụng validation cho form trên website 

Tải thư viện validation: https://github.com/hades-1997/F8-js-validate
Form ví dụ:  
<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="main">

        <form action="" method="POST" class="form" id="form-1">
          <h3 class="heading">Thành viên đăng ký</h3>
          <p class="desc">Cùng nhau học lập trình miễn phí tại VNCODE ❤️</p>
          <div class="spacer"></div>
          <div class="form-group">
            <label for="fullname" class="form-label">Tên đầy đủ</label>
            <input id="fullname" name="fullname" type="text" placeholder="VD: Đắc Lợi" class="form-control">
            <span class="form-message"></span>
          </div>
          <div class="form-group">
            <label for="email" class="form-label">Email</label>
            <input id="email" name="email" type="text" placeholder="VD: [email protected]" class="form-control">
            <span class="form-message"></span>
          </div>
          <div class="form-group">
            <label for="password" class="form-label">Mật khẩu</label>
            <input id="password" name="password" type="password" placeholder="Nhập mật khẩu" class="form-control">
            <span class="form-message"></span>
          </div>
          <div class="form-group">
            <label for="password_confirmation" class="form-label">Nhập lại mật khẩu</label>
            <input id="password_confirmation" name="password_confirmation" placeholder="Nhập lại mật khẩu" type="password" class="form-control">
            <span class="form-message"></span>
          </div>

          <!-- <div class="form-group">
            <label for="gender" class="form-label">Giới tính</label>

            <input  name="gender"  type="radio" value="Nam" class="form-control">
            <input  name="gender"  type="radio" value="Nữ" class="form-control">
            <span class="form-message"></span>
          </div> -->
          <button class="form-submit">Đăng ký</button>
        </form>
      </div>
    <script src="./validator.js"></script>
    <script >

        Validator({
            form: '#form-1',
            formGroupSelector: '.form-group',
            errorSelector: '.form-message',
            rules: [
                 Validator.isRequired('#fullname'),
                 Validator.isRequired('#email'),
                 Validator.isEmail('#email'),
                 Validator.minLength('#password',6),
                 Validator.isRequired('#password_confirmation'),
                 Validator.isConfirmed('#password_confirmation', function(){
                    return document.querySelector('#form-1 #password').value;
                 }, 'Mật khẩu nhập lại không trùng khớp')
            ],
            // onsubmit: function(data){

            // }
        });
    </script>
</body>
</html>
Thêm 1 chút css  
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  html {
    color: #333;
    font-size: 62.5%;
    font-family: "Open Sans", sans-serif;
  }
  .main {
    background: #f1f1f1;
    min-height: 100vh;
    display: flex;
    justify-content: center;
  }
  .form {
    width: 360px;
    min-height: 100px;
    padding: 32px 24px;
    text-align: center;
    background: #fff;
    border-radius: 2px;
    margin: 24px;
    align-self: center;
    box-shadow: 0 2px 5px 0 rgba(51, 62, 73, 0.1);
  }
  .form .heading {
    font-size: 2rem;
  }
  .form .desc {
    text-align: center;
    color: #636d77;
    font-size: 1.6rem;
    font-weight: lighter;
    line-height: 2.4rem;
    margin-top: 16px;
    font-weight: 300;
  }
  .form-group {
    display: flex;
    margin-bottom: 16px;
    flex-direction: column;
  }
  .form-label,
  .form-message {
    text-align: left;
  }
  .form-label {
    font-weight: 700;
    padding-bottom: 6px;
    line-height: 1.8rem;
    font-size: 1.4rem;
  }
  .form-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #b3b3b3;
    border-radius: 3px;
    outline: none;
    font-size: 1.4rem;
  }
  .form-control:hover {
    border-color: #1dbfaf;
  }
  .form-group.invalid .form-control {
    border-color: #f33a58;
  }
  .form-group.invalid .form-message {
    color: #f33a58;
  }
  .form-message {
    font-size: 1.2rem;
    line-height: 1.6rem;
    padding: 4px 0 0;
  }
  .form-submit {
    outline: none;
    background-color: #1dbfaf;
    margin-top: 12px;
    padding: 12px 16px;
    font-weight: 600;
    color: #fff;
    border: none;
    width: 100%;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
  }
  .form-submit:hover {
    background-color: #1ac7b6;
  }
  .spacer {
    margin-top: 36px;
  }
copy file: validator.js
Ở giao diện form cần xuất validation chúng ta thêm đoạn script 
 Validator({
            form: '#form-1',
            formGroupSelector: '.form-group',
            errorSelector: '.form-message',
            rules: [
                 Validator.isRequired('#fullname'),
                 Validator.isRequired('#email'),
                 Validator.isEmail('#email'),
                 Validator.minLength('#password',6),
                 Validator.isRequired('#password_confirmation'),
                 Validator.isConfirmed('#password_confirmation', function(){
                    return document.querySelector('#form-1 #password').value;
                 }, 'Mật khẩu nhập lại không trùng khớp')
            ],
        });
form: '' (Nhập id của form),
formGroupSelector: '.form-group' (class bọc input),
errorSelector: '.form-message' (class của khối báo lỗi),
rules: [] (Các ô input cần check điều kiện validate)
Không cho phép để trống chúng ta dùng: isRequired
Không đúng chuẩn email: isEmail
Độ dài kí tự bắt buộc: minLength
Check dữ liệu nhập lại có trùng khớp: isConfirmed
Ví dụ: chúng ta không cho phép người dùng để trống ô input full name  
 Validator({
            form: '#form-1',
            formGroupSelector: '.form-group',
            errorSelector: '.form-message',
            rules: [
                 Validator.isRequired('#fullname'),
        });
Tương tự với ô email 
 Validator({
            form: '#form-1',
            formGroupSelector: '.form-group',
            errorSelector: '.form-message',
            rules: [
                 Validator.isRequired('#email'),
                 Validator.isEmail('#email')
            ],
        });
Đối với ô password 
+ Check mật khẩu không được để trống
+ Check độ dài kí tự
+ Check mật khẩu nhập lại 
 Validator({
            form: '#form-1',
            formGroupSelector: '.form-group',
            errorSelector: '.form-message',
            rules: [
                 Validator.minLength('#password',6),
                 Validator.isRequired('#password_confirmation'),
                 Validator.isConfirmed('#password_confirmation', function(){
                    return document.querySelector('#form-1 #password').value;
                 }, 'Mật khẩu nhập lại không trùng khớp')
            ],
        });

Mong bài viết giúp ích được các bạn phần nào trong thiết kế Website. Hãy nhấn nút like và share  để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm VNCODE.

Tác giả: admin

 Tags: javacript

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Những tin mới hơn

Những tin cũ hơn

Hỏi đáp với tôi

close
  • smart_toy Hi there 👋 How can I help you today?
send
© Bản quyền thuộc về DACLOI.,JSC.  Thiết kế bởi DACLOI.,JSC.   |  Điều khoản sử dụng
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây