$v
폼 검증 헬퍼입니다. 규칙은 필드에 h-rules 로 붙이고, 결과는 vuelidate 와 같은 모양으로 읽습니다.
입력을 떠나면 그 필드의 오류가 보이고, 「보내기」를 누르면 모든 필드를 한 번에 봅니다. 규칙 객체를 모델 모양대로 먼저 선언하지 않습니다 — 필드가 화면에 있는 동안만 그 필드의 규칙이 있습니다.
규칙 적기
짧게
규칙 이름을 띄어 적습니다. 매개변수는 : 뒤에, 여러 개는 쉼표로 적습니다. sameAs 의 매개변수만 스코프의 값입니다.
식으로
{ 이름: 규칙 } 객체를 적습니다. 기본 규칙은 $rules 에서 꺼내고, 내 함수도 넣습니다. 함수는 값을 받아 참이면 통과입니다. 글자를 돌려주면 그 글자가 메시지입니다.
필드 이름
h-model 의 식이 이름이 됩니다. form.email 은 $v.form.email 로 읽습니다. 다른 이름을 주려면 h-rules:이름 으로 적습니다. h-model 이 없으면 name 속성을 봅니다.
결과 읽기
필드
| 이름 | 무엇 |
|---|---|
$invalid | 규칙에 걸렸습니다. 건드리지 않았어도 참입니다 |
$dirty | 사용자가 건드렸습니다 |
$error | 건드렸고 걸렸습니다. 화면에 오류를 보일 때 읽습니다 |
$errors | 건드린 뒤의 오류 목록. 하나는 { $validator, $message, $params, $property } |
$silentErrors | 건드렸든 아니든 지금 걸린 것 |
$model | 그 필드의 값 |
$touch() · $reset() | 건드린 것으로 하기 · 되돌리기 |
폼 전체
$v 자신이 같은 이름을 갖습니다. 그 스코프의 모든 필드를 모은 것입니다. $v 는 h-scope 마다 따로입니다.
| 이름 | 무엇 |
|---|---|
$v.$invalid | 하나라도 걸렸습니다 |
$v.$dirty · $v.$anyDirty | 모두 건드렸습니다 · 하나라도 건드렸습니다 |
$v.$error · $v.$errors | 건드린 필드의 오류 |
$v.$validate() | 모두 건드리고, 걸린 것이 없으면 true 를 돌려줍니다 |
$v.$touch() · $v.$reset() | 모든 필드에 |
언제 오류를 보이나
필드는 입력을 떠날 때(blur · change) 건드린 것이 됩니다. 치는 대로 보이려면 h-rules.input 으로 적습니다. 처음부터 보이려면 $silentErrors 를 읽습니다.
필드가 h-if 로 걷히면 그 규칙도 $v 에서 빠집니다. 보이지 않는 필드가 폼을 막지 않습니다.
기본 규칙
| 규칙 | 통과하는 값 |
|---|---|
required | 비어 있지 않음. 빈 글자 · 빈 배열 · false 는 걸립니다 |
email | 이메일 모양 |
numeric · integer | 숫자 · 정수 |
minLength:n · maxLength:n | 글자 수(배열이면 개수) |
minValue:n · maxValue:n · between:a,b | 수의 크기 |
pattern | 정규식. 식으로 적습니다 — $rules.pattern(/^0\d+$/) |
sameAs:이름 | 스코프의 다른 값과 같음 |
빈 값은 required 만 잡습니다. 나머지 규칙은 값이 있을 때만 봅니다.
메시지와 규칙 더하기
기본 메시지는 영어입니다. createValidate 로 메시지를 바꾸고 규칙을 더합니다. 더한 규칙은 짧게 쓰기와 $rules 양쪽에서 씁니다.
vuelidate 와 다른 점
- 규칙을 필드에 붙입니다. vuelidate 는 모델 모양대로 규칙 객체를 먼저 선언합니다. 여기서는 모델을 선언하지 않으므로 규칙도 입력 요소에 적습니다.
$validate()가 값을 바로 돌려줍니다. 프로미스가 아닙니다. 비동기 규칙이 없습니다.- 규칙의 이름을 스코프에 올리지 않습니다.
email같은 이름은 모델의 값과 부딪힙니다. 식에서는$rules.email로 꺼냅니다.
더하기
일반 스크립트 방식은 extensions/validate.iife.js 를 싣습니다. 메시지를 바꾸려면 HyperScope.plugin(HyperScopeValidate.createValidate({ messages })) 를 한 번 더 부릅니다 — 나중에 더한 것이 이깁니다.