@vnkr-labs/forms

VNKR Design System — Form validation schema + error display + multi-step stepper. Zero dependencies.

Installation

npm install @vnkr-labs/forms

Usage

Single field validation

import { validate, Rules } from '@vnkr-labs/forms';

const error = validate('[email protected]', [
  Rules.required,
  Rules.email,
]);
// error → null (pass) hoặc 'Email không hợp lệ' (fail)

Full form validation

import { validateForm, showError, clearErrors } from '@vnkr-labs/forms';

const errors = validateForm({
  email:    { value: '[email protected]', rules: [Rules.required, Rules.email] },
  password: { value: '123',           rules: [Rules.required, Rules.minLength(8)] },
  phone:    { value: '0987654321',    rules: [Rules.phone] },
});

if (errors) {
  Object.entries(errors).forEach(([field, msg]) => {
    showError(`#${field}`, msg);
  });
} else {
  clearErrors('#my-form');
  // submit...
}

Multi-step stepper

import { Stepper } from '@vnkr-labs/forms';

const stepper = Stepper('#wizard', {
  steps: ['Thông tin', 'Xác thực', 'Hoàn tất'],
  onStep: (index, total) => console.log(`Step ${index + 1}/${total}`),
  onComplete: () => console.log('Done!'),
});

stepper.next();
stepper.prev();
stepper.goTo(2);

Built-in Rules

| Rule | Mô tả | |---|---| | Rules.required | Bắt buộc không được rỗng | | Rules.email | Kiểm tra định dạng email | | Rules.phone | Số điện thoại Việt Nam (10 số, bắt đầu 0) | | Rules.url | Kiểm tra URL hợp lệ | | Rules.minLength(n) | Độ dài tối thiểu | | Rules.maxLength(n) | Độ dài tối đa | | Rules.min(n) | Giá trị số tối thiểu | | Rules.max(n) | Giá trị số tối đa | | Rules.pattern(regex) | Regex tùy chỉnh | | Rules.match(fieldValue) | Khớp với giá trị khác (confirm password) | | Rules.numeric | Chỉ cho phép số | | Rules.alpha | Chỉ cho phép chữ cái |

Custom Rule

const vnkrIdRule = value =>
  /^\d{9,12}$/.test(value) ? null : 'CMND/CCCD không hợp lệ';

validate('123456789', [Rules.required, vnkrIdRule]);

License

MIT · VNKR Labs