DaraForm

JavaScript form creation library

Browser Support

| | | |
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

1. Install

yarn install
# OR
npm install

2. Run

npm start

3. Open http://localhost:8889 in your browser

사용방법

const form = new DaraForm("#loginForm", {
    message: "This value is not valid",
     style: {
      position: 'top-left',
      labelWidth: '3'

    },
    // form load 이후 호출. 
    onMounted: function () {
      console.log(this)
    },
    message: {
      empty: "{name} 필수 입력사항입니다.",
      string: {
        minLength: "{size} 글자 이상 입력해야합니다.",
        maxLength: "{size} 글자 이상 입력할 수 없습니다.",
      },
      number: {
        minimum: "{size} 보다 커야 합니다",
        miximum: "{size} 보다 커야 합니다",
      },
      regexp: {
        email: "이메일이 유효하지 않습니다.",
        url: "URL이 유효하지 않습니다.",
      },
    },
    fields: [
      {
        name: "uid",
        label: "아이디",
        tooltip: "아이디를 넣어주세요.",
        placeholder: "아이디를 넣어주세요.",
        renderType: "text",
      }
      , {
        name: "password",
        label: "패스워드",
        description: "비밀번호는 대문자 소문자 포함입니다.",
        placeholder: "패스워드를 입력하세요",
        renderType: "password",
      }
    ]
  });

Form 옵션

| key | 설명 | 기본값 | 옵션값 | |-----|------|-----|-----| | style | width: form 넓이 labelWidth : label 넓이 valueWidth : value width position : '"[label위치]"-[글자 정렬위치]' -- ex) 'top-left','left-right' | width: "100%" labelWidth: 3 valueWidth: 9 position: "left-right" | position : top,left,right - left,center,right | | autoFocus | 포커스 여부 | true | true , false | | notValidMessage | 폼 유효하지 않을때 메시지 | 'This value is not valid' | | | onMounted | 폼 로드후 이벤트 | | | | fields | 폼필드 설명 | | | | message | 폼 유효성 체크 메시지 설명 | | | useTypeValue | form에 값을 renderer type별로 값을 구 할지 여부. renderType tab 값을 구할때 영향이 있음 | |

Form message

required:  '{name} 필수 입력사항입니다.'
string: {
  minLength: '{size} 글자 이상 입력해야합니다.'
  maxLength: '{size} 글자 이상 입력할 수 없습니다.'
};
number: {
  min: '{size} 보다 커야 합니다'
  max: '{size} 보다 커야 합니다'
};
type: {
  message: '{type} 유효하지 않습니다.'
};

Field Option

| key | 설명 | 기본값 | 옵션값 | |-----|------|-----|-----| | name | field name | | | | label | label | | | | tooltip | 툴팁문구 | | | | disabled | 비활성화 여부 | | | | placeholder | placeholder | | | | orientation | 차식 field 가 있을경우 방향 | vertical | horizontal, vertical | | required | 필수 여부 | | | | regexpType | 정규식 타입 | | email, url, alpha, alpha-num | | template | custom value 템플릿 | | | | listItem | dropdown, radio, checkbox 옵션값 | | | | description | 설명 | labelField: label key valueField: value key list: 옵션 리스트 orientation: 방향 | | | children | 자식 field 리스트 | | | | onChange | 입력값 변경시 호출되는 메소드 | | | | onClick | button 타입 클릭 이벤트 | | | | fileDownload | file 타입일경우 다운로드 메소드 | | | | renderer | custom renderer | | | | conditional | 보이기 여부 조건 | show: 보이기 여부 field: field name eq: 비교 값 custom: custom 체크 메소드 | | | renderType | render type | text | number, text, file, textarea, dropdown, radio, checkbox, date(dara-datetimepicker모듈 사용), group, custom | | customOptions | date 타입등의 추가 module에서 사용하는 추가 옵션 | | | | style | width: field 넓이 labelHide : label 숨김여부 labelWidth : label 넓이 customClass : custom class valueWidth : value width tabAlign : render type이 tab일 경우 정렬 position : '"[label위치]"-[글자 정렬위치]' -- ex) 'top-left','left-right' | width: "100%" labelWidth: 3 valueWidth: 9 position: "left-right" | position : top,left,right - left,center,right tabAlign:left, center, right| | rule | 유효성 규칙 | minLength: 최소 길이 maxLength: 최대길이 minimum: 최소값 exclusiveMinimum: 최소값 포함 여부 maximum: 최대값 exclusiveMaximum: 최대값 포함여부 | | | different | field 값이 다른지 비교 | field: field name message: 메시지 | | | identical | field 값이 같은지 비교 | field: field name message: 메시지 | |

License

Darainfo is under MIT License.