![\"Vue](\"/assets/vue-logo.png\" "\\"Vue"){kind=logo}
서비스 개발시 Form 유효성 검사는 필수다. 보통 정규표현식을 사용하여 간단하게 구현할수 있고, HTML 에서 기본적으로 지원해 주는 type, required 등을 사용해서 구현할수도 있다. 하지만 서비스별로 요구하는 데이터 포맷이 다를때 커스텀을 해야한다. Vue 에서는 VeeValidate 를 활용하여 일관성 있고 커스텀이 유연한 Form 유효성 검사 기능을 구현 할수 있다.
\n먼저 Vue 를 활용하여 Form Validation 을 구현해 볼것 이다. 아래와 같이 Form 이 주어지고 이메일, 비밀번호 유효성 검사를 해야한다고 가정해 보자
\n<template>\n <div class=\"form-validation\">\n <form @submit=\"formSubmit\" method=\"post\">\n <div>\n <label for=\"email\">email</label>\n <input id=\"email\" type=\"email\" required />\n </div>\n <div>\n <label for=\"password\">password</label>\n <input id=\"password\" type=\"password\" required />\n </div>\n <button type=\"submit\">Login</button>\n </form>\n </div>\n</template>\n\n<script>\n export default {\n name: \"FormValidation\",\n components: {},\n methods: {\n formSubmit() {\n // code..\n },\n },\n }\n</script>\n\n<style scoped></style>input 속성 type, required 만 사용하여 간단하게 form validation 을 구현 했다.
![\"Vue](\"/assets/vee-validation-1.png\" "\\"Vue")
![\"Vue](\"/assets/vee-validation-2.png\" "\\"Vue")
그렇다면 비밀번호에 영문 or 숫자 조건을 넣는다고 가정 하면 HTML 에서 지원해 주는 type, required 만으로는 영문 or 숫자 조합을 체크 할수 없다
\n이때 javascript 정규표현식을 사용하여 영문 or 숫자 로 입력 되었는지를 체크해 볼수 있다.
<template>\n <div class=\"form-validation\">\n <form @submit=\"formSubmit\" method=\"post\">\n <div>\n <label for=\"email\">email</label>\n <input id=\"email\" type=\"text\" v-model=\"email\" />\n </div>\n <div>\n <label for=\"password\">password</label>\n <input id=\"password\" type=\"text\" v-model=\"password\" />\n </div>\n <button type=\"submit\">Login</button>\n </form>\n </div>\n</template>\n\n<script>\n export default {\n name: \"FormValidation\",\n components: {},\n data() {\n return {\n email: \"\",\n password: \"\",\n }\n },\n methods: {\n formSubmit() {\n // code..\n if (\n !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/.test(\n this.email\n )\n ) {\n alert(\"이메일 주소를 입력해 주세요.\")\n }\n\n if (!/^[a-zA-Z0-9]{8,20}$/.test(this.password)) {\n alert(\"비밀번호는 영문 or 숫자 8자 이상 20자 미만으로 입력해 주세요.\")\n }\n\n return true\n },\n },\n }\n</script>\n\n<style scoped></style>이메일 입력후, 비밀번호 입력칸에 숫자만 입력할 경우 아래와 같은 경고 문구가 출력 된다.
\n![\"Vue](\"/assets/vee-validation-3.png\" "\\"Vue")
이처럼 javascript, html input api 를 활용하여 간단하게 Form 유효성 검증을 할수 있다. 하지만 다양한 언어로 서비스 하거나 검증할 경우의 수가 많아 질경우 광리해야할 코드양이 많아지게 된다. 이러한 부분을 보완 할수 있는 라이브러리가 VeeValidate 이다.
\n위에서 작성한 코드를 VeeValidate 를 활용하여 간단하게 구현해 보고 한국어, 영어 2가지 언어를 지원하는 웹 서비스를 만든다고 가정해 보자.
\nVee-Validate 의 핵심적인 기능으로 ValidationProvider, ValidationObserver, extend 그리고 rules 와 flags 가 어떤 기능을 하는지 알면, 쉽게 사용할 수 있다.
npm install vee-validate —save
\nyarn add vee-validate\n`
\nmain.js
\nimport { ValidationProvider, extend } from \"vee-validate\"\nimport { required } from \"vee-validate/dist/rules\"\n\nextend(\"required\", {\n ...required,\n message: \"This field is required\",\n})components
\n<validation-provider rules=\"required\" v-slot=\"{ errors }\">\n <input v-model=\"value\" name=\"myinput\" type=\"text\" />\n <span>{{ errors[0] }}</span>\n</validation-provider>기본적인 설치 ~ 사용법 이다.
\n이전에 만들었던 코드에 적용해 보도록 하자
\n아래와 같이 하면, 전역으로 설정이 가능 하다
\n// main.js\nimport { ValidationProvider, extend, ValidationObserver } from \"vee-validate\" // vee-validate 로 부터 사용할 기능 import\n\nVue.component(\"ValidationProvider\", ValidationProvider)\nVue.component(\"ValidationObserver\", ValidationObserver)Vee-Validate는 기본적으로 제공하고 있는 Rule 들이 있다.
\n종류는 공식 홈페이지 참조\nhttps://logaretm.github.io/vee-validate/guide/rules.html#rules
\n아래는 전체 rule 을 꺼내는 방식이다
\nimport * as rules from \"vee-validate/dist/rules\"\nfor (let rule in rules) {\n // add the rule\n extend(rule, rules[rule])\n}errors 는 기본적으로 배열 내부에 메세지를 설정하는 대로 여러개 추가되거나 덮어쓰기 되는 구조이기 때문에 [0] 을 명시해서 디폴트 메세지를 불러와야한다.
\n여러가지 룰을 적용하고 싶다면, | 연산자를 사용하여 여러개를 추가해 줄수 있다.
extend(\"required\", {\n ...required,\n message: \"필수 입력항목입니다.\",\n})extend(\"min\", {\n validate(value, { min }) {\n if (value.length >= min) {\n return true\n }\n return \"{_field_}는 {min} 글자 이상이어야 합니다.\"\n },\n params: [\"min\"],\n})이처럼 parameter 가 필요한 부분에서는 validationprovider 에서 아래와 같이 parameter 를 내려줄 수 있다.
\n<validation-provider\n name=\"아이디\"\n rules=\"required|alpha_dash|min:5|max:20\"\n v-slot=\"{ errors, classes }\"\n>\n <p class=\"validation-text\">{{ errors[0] }}</p>\n</validation-provider>{_field_} 는 ValidationProvider 가 기본적으로 제공하는 기능이여서 따로 명시해줄 필요가 없고 validation-povider 에 name 으로 넘겨준 값을 그대로 표시해준다.
extend(\"korAlphaNum\", {\n validate: value => {\n let regex = /^[가-힣|aA-zZ|0-9]*$/.test(value)\n if (!regex) {\n return \"올바른 한글, 영문, 숫자만 입력해주세요.\"\n } else {\n return true\n }\n },\n})// main.js\nimport { ValidationProvider, extend, ValidationObserver } from \"vee-validate\" // vee-validate 로 부터 사용할 기능 import\nimport * as rules from \"vee-validate/dist/rules\"\nfor (let rule in rules) {\n // add the rule\n extend(rule, rules[rule])\n}\nVue.component(\"ValidationProvider\", ValidationProvider)\nVue.component(\"ValidationObserver\", ValidationObserver)<template>\n <div class=\"form-validation\">\n <ValidationObserver v-slot=\"{ invalid }\">\n <form @submit=\"formSubmit\" method=\"post\">\n <ValidationProvider rules=\"email\" v-slot=\"{ errors }\">\n <div>\n <label for=\"email\">email</label>\n <input id=\"email\" type=\"text\" v-model=\"email\" />\n {{ errors[0] }}\n </div>\n </ValidationProvider>\n <ValidationProvider rules=\"min:8|max:20|alpha_dash\" v-slot=\"{ errors }\">\n <div>\n <label for=\"password\">password</label>\n <input id=\"password\" type=\"text\" v-model=\"password\" />\n {{ errors[0] }}\n </div>\n </ValidationProvider>\n <button type=\"submit\" :disabled=\"invalid\">Login</button>\n </form>\n </ValidationObserver>\n </div>\n</template>\n\n<script>\n export default {\n name: \"FormValidation\",\n components: {},\n data() {\n return {\n email: \"\",\n password: \"\",\n }\n },\n methods: {\n formSubmit() {\n return true\n },\n },\n }\n</script>\n\n<style scoped></style>VeeValidate를 사용하여 간단하게 form validation 을 구현 했다.
\n![\"Vue](\"/assets/vee-validation-4.png\" "\\"Vue")
![\"Vue](\"/assets/vee-validation-5.png\" "\\"Vue")
만약 Form 유효성 검증 메시지를 alert 으로 표시 하고 싶다면 아래 처럼 하면 된다.
\n<template>\n <div class=\"form-validation\">\n <ValidationObserver>\n <form @submit=\"formSubmit\" method=\"post\">\n <ValidationProvider ref=\"refEmail\" rules=\"email\">\n <div>\n <label for=\"email\">email</label>\n <input id=\"email\" type=\"text\" v-model=\"email\" />\n </div>\n </ValidationProvider>\n <ValidationProvider ref=\"refPassword\" rules=\"min:8|max:20|alpha_dash\">\n <div>\n <label for=\"password\">password</label>\n <input id=\"password\" type=\"text\" v-model=\"password\" />\n </div>\n </ValidationProvider>\n <button type=\"submit\">Login</button>\n </form>\n </ValidationObserver>\n </div>\n</template>\n\n<script>\n export default {\n name: \"FormValidation\",\n components: {},\n data() {\n return {\n email: \"\",\n password: \"\",\n }\n },\n methods: {\n async formSubmit() {\n const refEmail = await this.$refs.refEmail.validate()\n alert(refEmail.valid)\n if (!refEmail.valid) {\n alert(refEmail.errors[0])\n return false\n }\n const refPassword = await this.$refs.refPassword.validate()\n if (!refPassword.valid) {\n alert(refPassword.errors[0])\n return false\n }\n\n return true\n },\n },\n }\n</script>\n\n<style scoped></style>![\"Vue](\"/assets/vee-validation-6.png\" "\\"Vue")
VeeValidate를 i18n 기반하여 다국어를 지원해 준다. 아래 코드를 main.js 에 추가해 주자
// main.js\nimport {\n ValidationProvider,\n extend,\n ValidationObserver,\n localize, // 지역\n} from \"vee-validate\"\nimport * as rules from \"vee-validate/dist/rules\"\nfor (let rule in rules) {\n // add the rule\n extend(rule, rules[rule])\n}\nimport ko from \"vee-validate/dist/locale/ko.json\" // 언어팩 json\nlocalize({\n ko,\n})\nlocalize(\"ko\") // 한국어 사용\nVue.component(\"ValidationProvider\", ValidationProvider)\nVue.component(\"ValidationObserver\", ValidationObserver)잘못된 이메일 입력후 실행해 보면 한국어로 나오는것을 확인할수 있다.
\n![\"Vue](\"/assets/vee-validation-7.png\" "\\"Vue")