.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
설명
회원가입, 게시판 등록 시 밸리데이션 체크
설치
npm install simple-vue-validator --save
JavaScript
복사
사용법
•
input v-model 연결
◦
vue Validation을 사용하기 위해서는 input v-model로 바인딩된 값으로 validation을 처리한다.
•
validation 규칙 선언하기
◦
validation에 관련된 규칙을 작성하는 방법이다.
◦
validators 안의 객체 이름을 v-model에 연결된 이름과 동일하게 지정하면
function의 매개변수로 v-model 값이 들어오게 된다.
•
required() : 필수 입력항목일 경우 사용한다.
•
digit() : 숫자만 허용할 경우 사용한다.
import Vue from 'vue'
import SimpleVueValidation from 'simple-vue-validator';
Vue.use(SimpleVueValidation);
validators: {
name: function (value) {
return Validator.value(value).required()
},
phone: function (value) {
return Validator.value(value).required().digit()
},
},
JavaScript
복사
•
return 되는 message를 커스텀
<script>
import SimpleVueValidation from 'simple-vue-validator';
const Validator = SimpleVueValidation.Validator;
SimpleVueValidation.extendTemplates({
required: '필수 입력 항목입니다.',
length: '길이가 {0} 이어야 합니다.',
minLength: '{0} 글자 이상이어야 합니다.',
maxLength: '{0} 글자 이하여야 합니다.',
digit: '숫자만 입력해주세요.'
})
</script>
<div class="error-message" v-if="validation !== undefined">
{{ validation.firstError('name') }}
</div>
JavaScript
복사
