@yokotak0527/kensho
    TypeScript icon, indicating that this package has built-in type declarations

    2.6.1 • Public • Published

    Kensho

    The JavaScript validation package.

    NPM Download TravisCI open issue MIT licence

    What can this do.

    • Simple and easy validation of values.
    • Apply multiple validation rules for one value.
    • Apply filteres to the value before validation.
    • Addition of your custom validation rules.

    Install

    npm

    $ npm i @yokotak0527/kensho

    CDN

    <script src="https://cdn.jsdelivr.net/npm/@yokotak0527/kensho/dist/bundle.iife.min.js"></script>

    Setup

    CommonJS

    const Kensho = require('@yokotak0527/kensho')

    ESModule

    import Kensho from '@yokotak0527/kensho'

    Validation

    If you want to see default validation rules, please see the guide or code.

    A value validation

    // Kensho.validate(RULE NAME, VALUE)
    Kensho.validate('email', 'private@myhost.com')
    // -> true
    
    // Kensho.validate(RULE NAME, VALUE, RULE OPTION)
    Kensho.validate('letters', 'abcdefg', { range : { max : 5 } })
    // false, Because the character count exceeds 5.

    The form inputs validation

    <!-- HTML -->
    
    <form class="form">
      <input type="email" k-name="sample" k-rule="email" k-event="keyup" />
      <p k-name="sample.error"></p>
    </form>
    // JS
    
    const form = new Kensho('.form')

    In the case of the above code, every time a keyup event occurs, it validates that the entered value meets the email validation rule.

    Also, the following code validates the values entered when the keyup and blur events occur.

    <input type="email" k-name="sample" k-rule="email" k-event="keyup, blur" />

    Of course, you can also set multiple validation rules.

    <input type="email" k-name="sample" k-rule="email, required" k-event="keyup, blur" />
    
    <!-- with custom messages -->
    <input
      type="email"
      k-name="sample"
      k-rule="email, required"
      k-event="keyup, blur"
      k-message="{'email': 'invalid email format.', 'required': 'required.'}"
    />

    If the validation rule has options...

    <input
      type="email"
      k-name="sample"
      k-rule="email, ['letters', {range : {max : 2}}]"
      k-event="keyup, blur"
    />

    As you can see, more complex validations, the harder it is to read the code.
    If you need complex validation, you might want to write the validation settings in JS.

    <!-- HTML -->
    
    <form action="" class="myform">
      <input type="text" name="nickname">
      <p></p>
    </form>

    Assuming there is an HTML file like the one above, write JS code as following below.

    // JS
    
    const kensho = new Kensho('.myform', { search : false })
    // By default, The Kensho will look for HTML elements with The Kensho attribute values
    // in the specified form when you create an instance,
    // but the If the option `search : false` is given, the operation will not be performed.
    
    kensho.add({
      inputElement : 'input[name="nickname"]',
      errorElement : 'p',
      event        : ['keyup', 'blur'],
      rule         : ['required', ['letters', { range : { max : 10 } }]],
      errorMessage : {'required': 'required.', 'letters':'max charactor number is 10.'}
    })

    The inputElement and errorElement properties can be either query selectors as strings or HTMLInputElement directly.

    Filtering

    Sometimes you may want to filter the values before validating them. For example, it want to convert full-size string to half-size string and then validate it.
    The Kensho provides such a filtering feature as a plugin.

    If you want to see default plugins, please see code.

    <form>
      <input
        type="text"
        k-name="text"
        k-rule="['regexp', {'regexp' : /^[abc]+$/ }]"
        k-event="keyup"
        k-filter="full2half"
      >
      <p k-name="text.error"></p>
    </form>
    <script>
      window.onload = function(){
        const kensho = new Kensho('form')
      }
    </script>

    The above code only accepts characters "a", "b", and "c" by the regexp validation rule, but it also accepts full size "a", "b", and "c" because the filter full2half filters the values before validation.

    Add the validate rule

    Kensho.rule.add('myrule', (value, option, Kensho)=>{
      return value === 'hello'
    })
    
    Kensho.validate('myrule', 'hello')
    // -> true

    Add the Plugin

    <form>
      <input type="text" k-name="text" k-rule="required" k-event="keyup" k-filter="myPlugin" />
      <p k-name="text.error"></p>
    </form>
    <script>
      window.onload = function(){
        Kensho.plugin.add('myPlugin', function myPlugin(value){
          // `this` is bind to the Kensho class.
          // do something...
          return value
        })
        const kensho = new Kensho('form')
      }
    </script>

    Example

    pre-sending validation

    <!-- HTML -->
    
    <form class="myform">
      <input type="email" k-name="sample" k-rule="email" k-event="keyup" />
      <p k-name="sample.error"></p>
    </form>
    // JS
    const formElm = document.querySelector('.myform')
    
    const kensho  = new Kensho(formElm)
    
    formElm.addEventListener('submit', (evt)=>{
    
      kensho.validateAll()
    
      if (kensho.hasError()) {
        evt.preventDefault()
        alert('input error')
      }
    })

    ignore validations when the value is empty

    <form class="myform">
      <input type="email" k-name="sample" k-rule="email" k-event="keyup" k-allowempty />
      <p k-name="sample.error"></p>
    </form>

    change the prefix of the Kensho attribute names.

    <form action="">
      <input type="email" data-name="sample" data-rule="email" data-event="keyup">
      <p data-name="sample.error"></p>
    </form>
    <script>
      window.onload = function(){
        Kensho.config.customAttrPrefix = 'data-'
        const kensho = new Kensho('form')
      }
    </script>

    For more details..

    https://yokotak0527.gitbook.io/kensho/
    ※ The content is old. Update soon. 😞

    Install

    npm i @yokotak0527/kensho

    DownloadsWeekly Downloads

    0

    Version

    2.6.1

    License

    MIT

    Unpacked Size

    217 kB

    Total Files

    25

    Last publish

    Collaborators

    • yokotak0527