mujaen-validation

Form Validation

Install

npm install mujaen-validation

field

• 'filed'에 지정할 수 있는 엘리먼트는 'input' 요소를 기본으로 합니다.
• 'field'에 지정한 요소가 문서에 없다면 실행되지 않습니다.
• 'input' 요소의 type 특성에 따라 'options'가 달라질 수 있습니다.

message

• 입력값이 지정한 범위를 벗어날 경우 Validation Error를 발생시킵니다.
• 이때, 'message'에 원하는 오류 메시지를 문자열로 추가할 수 있습니다.

focus

• 입력값이 지정한 범위를 벗어날 경우 Validation Error를 발생시킵니다.
• 이때, 'focus'를 설정하면 해당 엘리먼트가 Focus Event를 실행합니다.
• 디폴트값은 false 입니다.

{
    field: '[name=email]',
    options: {
        email: true
    },
    focus: true
}

custom

• 'field'에 지정한 요소에 사용자가 임의 스크립트를 설정하고자 할 때 사용합니다.
• 'options'와 같이 사용할 수 없습니다.
• 'return'값은 반드시 boolean이며 false일 시 Validation Error를 발생시킵니다.
• 디폴트값은 false 입니다.

{
    field: '[name=address]',
    custom: function() {
        return /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/.test(input.value);
    }
}

| 속성 | 설명 | 기본값 | 타입 | |---|---|---|---| | cumstom | 임의 스크립트를 추가하여 결과에 따른 이벤트 발생 | false | boolean |

add

• 유효성 검사 규칙을 추가합니다.

form.add({validate: []});

options

| 속성 | 설명 | 기본값 | 타입 | |---|---|---|---| | required | 입력값 유무 | false | boolean | | checked | 체크 유무 | false | boolean | | email | 이메일 유효성 | false | boolean | | min | 입력 최솟값 | | number | | max | 입력 최댓값 | | number |

Usage

import Validation from "mujaen-validation";

const form = new Validation('.form');

if(form.validate()) {
    form.submit();
}

form.add({
    validate: [
        {
            field: '[name=id]',
            options: {
                required: true
            },
            message: '아이디를 입력해 주세요!'
        },
        {
            field: '[name=email]',
            options: {
                required: true,
                email: true
            },
            message: '이메일을 입력해 주세요!'
        },
        {
            field: '[name=agree]',
            options: {
                checked: true
            },
            message: '약관에 동의해 주세요.'
        }
    ]
});