Thư viện FUI Validate JS

Version v1.2.0

View on Github

Dễ sử dụng

Giảm Mã Lặp

Tùy chỉnh linh hoạt

Xác thực nhiều trường dữ liệu

Thông báo lỗi chi tiết và trực quan

Giảm Thiểu Lỗi

Tích Hợp Dễ Dàng

Tương Thích Trình Duyệt

Hỗ Trợ Async

Tùy Chọn Hành Động

Cài Đặt:

Thêm FUI Validate JS vào trang HTML

- Thêm file JS trước thẻ đóng body

<script src="https://cdn.jsdelivr.net/gh/tuanduong1907/fui-validate@main/fui-validate.js"></script>

Example:

Cấu trúc HTML form:

<form id="form">
  <div class="form-group">
    <input type="text" id="fullname" name="fullname" placeholder="Nhập họ và tên..."/>
    <p class="form-message"></p>
  </div>
  <div class="form-group">
    <input type="email" id="email" name="email" placeholder="Nhập địa chỉ email..."/>
    <p class="form-message"></p>
  </div>
  <div class="form-group">
    <input type="password" id="password" name="password" placeholder="Nhập mật khẩu..."/>
    <p class="form-message"></p>
  </div>
  <button type="submit">Submit</button>
</form>

Cách sử dụng (gọi trong file JS):

Validator({
  form: "#form",
  formGroupSelector: ".form-group",
  errorSelector: ".form-message",
  rules: [
    Validator.isRequired("#fullname", "Vui lòng nhập tên đầy đủ của bạn"),
    Validator.isEmail("#email", "Vui lòng nhập email hợp lệ"),
    Validator.minLength("#password", 6, "Mật khẩu phải có ít nhất 6 ký tự"),
  ],
  onSubmit: function (data) {
    console.log(data);  // Dữ liệu form sau khi xác thực thành công
  },
});

Lưu ý:

- form: Đây là ID của form mà bạn muốn xác thực. Đảm bảo rằng ID này đúng với ID trong HTML của bạn.

- formGroupSelector: Sử dụng để chọn nhóm thẻ chứa các trường input. Điều này giúp dễ dàng quản lý và hiển thị thông báo lỗi tương ứng cho từng trường.

- errorSelector: Xác định vị trí hiển thị thông báo lỗi. Đây là nơi mà thông báo xác thực sẽ xuất hiện khi có lỗi nhập liệu.

Validation Option:

Option	Mặc định	Kiểu	Mô tả
resetOnSubmit	false	boolean	Reset form khi đã submit thành công

Validation Rules:

Rules	Sử dụng	Miêu tả
isRequired	Validator.isRequired("Selector", "Message")	Kiểm tra xem trường có giá trị hay không. Nếu không, thông báo lỗi sẽ được hiển thị
isEmail	Validator.isRequired("Selector", "Message")	Kiểm tra xem giá trị của trường có phải là một địa chỉ email hợp lệ hay không
minLength	Validator.minLength("Selector", minLength(number), "Message")	Kiểm tra xem độ dài của giá trị nhập vào có đạt yêu cầu tối thiểu hay không
maxLength	Validator.maxLength("Selector", maxLength(number), "Message")	Kiểm tra xem độ dài của giá trị nhập vào có vượt quá giới hạn tối đa hay không
isComfirmed	Validator.isComfirmed("Selector", function() { return value; }, "Message")	Kiểm tra xem giá trị nhập vào có khớp với giá trị của một trường khác (ví dụ: xác nhận mật khẩu).
isAlphabet	Validator.isAlphabet("Selector", "Message")	Kiểm tra xem chuỗi nhập vào chỉ chứa chữ cái (A-Z, a-z)
isNumber	Validator.isNumber("Selector", "Message")	Dùng để kiểm tra xem chuỗi nhập vào có phải là số hay không.
isPhoneNumber	Validator.isPhoneNumber("Selector", "Message")	Kiểm tra số điện thoại có hợp lệ hay không (Số điện thoại Việt Nam)
hasSpecialChar	Validator.hasSpecialChar("Selector", "Message")	Kiểm tra xem chuỗi có chứa ký tự đặc biệt hay không.
isUrl	Validator.isUrl("Selector", "Message")	Kiểm tra xem chuỗi nhập vào có phải là URL hợp lệ hay không.
isImageUploaded	Validator.isImageUploaded("Selector", "Message")	Kiểm tra xem có chứa file hay không và đảm bảo file đó là hình ảnh.
isStrongPassword	Validator.isStrongPassword("Selector", "Message")	Kiểm tra xem chuỗi nhập vào có phải là mật khẩu mạnh hay không. Mật khẩu mạnh được xác định là mật khẩu có ít nhất 8 ký tự và bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt

- Tham số Selector: Truyền vào id của thẻ input cần validate

- Tham số Message: Tham số này không bắt buộc. Nếu không cung cấp, hệ thống sẽ dùng thông báo mặc định

- Tham số minLength(number): Chỉ áp dụng cho Validator.minLength, nếu không được cung cấp sẽ bỏ qua kiểm tra độ dài.

- Tham số maxLength(number): Chỉ áp dụng cho Validator.maxLength, nếu không được cung cấp sẽ bỏ qua kiểm tra độ dài.

- Tham số function() { return value; }: Chỉ áp dụng cho Validator.isComfirmed, Hàm này trả về giá trị cần so sánh với trường khác

*Ví dụ:

1. isRequired (Kiểm tra bắt buộc):

Validator.isRequired("#fullname", "Vui lòng nhập tên đầy đủ của bạn")

2. isEmail (Kiểm tra Email Hợp Lệ):

Validator.isEmail("#email", "Vui lòng nhập địa chỉ email hợp lệ")

3. minLength (Kiểm tra độ Dài Tối Thiểu):

Validator.minLength("#password", 6, "Mật khẩu phải có ít nhất 6 ký tự")

4. maxLength (Kiểm tra độ Dài Tối Đa):

Validator.maxLength('#username', 15, 'Tên người dùng không được quá 15 kí tự')

5. isComfirmed (Kiểm tra xác Nhận):

Validator.isComfirmed("#password", function() {
  return document.querySelector("#password-confirm").value;
}, "Mật khẩu xác nhận không khớp")

6. isAlphabet (Kiểm tra chỉ chứa chữ cái):

Validator.isAlphabet('#username', 'Tên người dùng chỉ chứa chữ cái')

7. isNumber (kiểm tra định dạng số):

Validator.isNumber('#age')

8. isPhoneNumber (Kiểm tra số điện thoại):

Validator.isPhoneNumber('#phone')

9. hasSpecialChar (Kiểm tra ký tự đặc biệt):

Validator.hasSpecialChar('#password')

10. isUrl (Kiểm tra định dạng URL):

Validator.isUrl('#website')

11. isImageUploaded (Kiểm tra upload hình ảnh):

Validator.isImageUploaded('#image', 'Vui lòng upload hình ảnh')

12. isStrongPassword (Kiểm tra mật khẩu đủ mạnh chưa):

Validator.isStrongPassword('#password', 'Mật khẩu chưa đủ mạnh'),

Fast UI