0.0.17 • Published 10 months ago

@daracl/form v0.0.17

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

DaraForm

JavaScript form creation library

License: MIT npm version npm minzipped size

Browser Support

ChromeFirefoxSafariOperaEdge
Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔
  1. Install
yarn install
# OR
npm install
  1. Run
npm start
  1. 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설명기본값옵션값
stylewidth: 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포커스 여부truetrue , false
notValidMessage폼 유효하지 않을때 메시지'This value is not valid'
onMounted폼 로드후 이벤트
fields폼필드 설명
message폼 유효성 체크 메시지 설명
useTypeValueform에 값을 renderer type별로 값을 구 할지 여부. renderType tab 값을 구할때 영향이 있음

Form message

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

Field Option

key설명기본값옵션값
namefield name
labellabel
tooltip툴팁문구
disabled비활성화 여부
placeholderplaceholder
orientation차식 field 가 있을경우 방향verticalhorizontal, vertical
required필수 여부
regexpType정규식 타입email, url, alpha, alpha-num
templatecustom value 템플릿
listItemdropdown, radio, checkbox 옵션값
description설명labelField: label key valueField: value key list: 옵션 리스트
orientation: 방향
children자식 field 리스트
onChange입력값 변경시 호출되는 메소드
onClickbutton 타입 클릭 이벤트
fileDownloadfile 타입일경우 다운로드 메소드
renderercustom renderer
conditional보이기 여부 조건show: 보이기 여부 field: field name eq: 비교 값 custom: custom 체크 메소드
renderTyperender typetextnumber, text, file, textarea, dropdown, radio, checkbox, date(dara-datetimepicker모듈 사용), group, custom
customOptionsdate 타입등의 추가 module에서 사용하는 추가 옵션
stylewidth: 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: 최대값 포함여부
differentfield 값이 다른지 비교field: field name message: 메시지
identicalfield 값이 같은지 비교field: field name message: 메시지

License

Darainfo is under MIT License.

0.0.14

10 months ago

0.0.15

10 months ago

0.0.16

10 months ago

0.0.17

10 months ago

0.0.11

10 months ago

0.0.12

10 months ago

0.0.13

10 months ago

0.0.10

10 months ago

0.0.8

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago