@daracl/form
v0.0.17
Published
Daracl form validation
Downloads
34
Maintainers
Readme
DaraForm
JavaScript form creation library
Browser Support
| | | |
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
- Install
yarn install
# OR
npm install
- Run
npm start
- 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.