Skip to content

Home

Jump to bottom
Jong Won Kim edited this page Nov 12, 2025 · 6 revisions

@nuka9510/simple-validation - Wiki

  • simple validation util for web front-end

Install

npm i @nuka9510/simple-validation
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/js/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation@latest/dist/js/index.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation@<specific-version>/dist/js/index.min.js"> </script>
<script type="importmap">
  {
    "imports": { "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/esm/index.min.mjs" }
  }
</script>
<script type="importmap">
  {
    "imports": { "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation@latest/dist/esm/index.min.mjs" }
  }
</script>
<script type="importmap">
  {
    "imports": { "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation@<specific-version>/dist/esm/index.min.mjs" }
  }
</script>

Usage

  • js
simpleValidation.Validation;
  • mjs
import { Validation } from "@nuka9510/simple-validation";
  • cjs
const simpleValidation = require('@nuka9510/simple-validation');

simpleValidation.Validation;

Interfaces

  • result
    • 결과 값 객체
  • regex
    • validation에 사용할 정규식을 담은 객체
  • config
    • validation 초기화를 위한 객체

Classes

Example

┌── js
│  └── index.mjs
└── view
   └── index.html
  • js/index.mjs
import { Validation } from "@nuka9510/simple-validation";

class Index {
  constructor() {
    this.onValidationCheckClick = this.onValidationCheckClick.bind(this);

    this.init();
  }

  init() {
    document.querySelectorAll('[data-action="validation-check-click"]')
            .forEach((...arg) => { arg[0].addEventListener('click', this.onValidationCheckClick); });
  }

  onValidationCheckClick(ev) {
    const validation = new Validation({ regex: { test: /^test/ } }),
    result = document.querySelector('[data-name="result"]');

    validation.run(form);

    console.log(validation.result);

    result.innerHTML = JSON.stringify(validation.result);
  }

}

new Index();
  • view/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form name="form">
    <input type="text" name="test" data-sv-pattern="test" required="test">
    <button type="button" data-action="validation-check-click">validation-check</button>
  </form>
  <div data-name="result"></div>
</body>
<script type="importmap">
  {
    "imports": { "@nuka9510/simple-validation": "https://cdn.jsdelivr.net/npm/@nuka9510/simple-validation/dist/esm/index.min.mjs" }
  }
</script>
<script type="module" src="../js/index.mjs"></script>
</html>

Clone this wiki locally