vuelidate 플러그인 사용 예외처리 추가

package-lock.json

@@ -10956,6 +10956,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vuelidate": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.4.tgz",
+      "integrity": "sha512-QHZWYOL325Zo+2K7VBNEJTZ496Kd8Z31p85aQJFldKudUUGBmgw4zu4ghl4CyqPwjRCmqZ9lDdx4FSdMnu4fGg=="
+    },
     "vuex": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
@@ -11049,13 +11054,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -11068,18 +11071,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11182,8 +11182,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11193,7 +11192,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11206,15 +11204,13 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.3.5",
@@ -11235,7 +11231,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11308,8 +11303,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -11424,7 +11418,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",

package.json

@@ -15,7 +15,8 @@
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/proxy": "^1.3.3",
     "nuxt": "^2.0.0",
-    "vue-material": "^1.0.0-beta-11"
+    "vue-material": "^1.0.0-beta-11",
+    "vuelidate": "^0.7.4"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^1.0.1",

pages/register/index.vue

@@ -7,9 +7,9 @@
         </div>
       </md-card-header>
 
-      <form @submit.prevent="resisterUser">
+      <form @submit.prevent="validateForm">
         <md-card-content>
-          <md-field md-clearable>
+          <md-field :class="getValidationClass('email')" md-clearable>
             <label for="email">Email</label>
             <md-input
               id="email"
@@ -19,8 +19,10 @@
               name="email"
               autocomplete="email"
             />
+            <span v-if="!$v.form.email.required" class="md-error">The email is required</span>
+            <span v-else-if="!$v.form.email.email" class="md-error">Invalid required</span>
           </md-field>
-          <md-field>
+          <md-field :class="getValidationClass('password')">
             <label for="password">password</label>
             <md-input
               id="password"
@@ -30,6 +32,9 @@
               name="password"
               autocomplete="password"
             />
+            <span v-if="!$v.form.password.required" class="md-error">The email is required</span>
+            <span v-else-if="!$v.form.password.minLength" class="md-error">password too short</span>
+            <span v-else-if="!$v.form.password.maxLength" class="md-error">password too Long</span>
           </md-field>
         </md-card-content>
 
@@ -51,8 +56,25 @@
 </template>
 
 <script>
+import { validationMixin } from 'vuelidate'
+import { required, email, minLength, maxLength } from 'vuelidate/lib/validators'
+
 export default {
   middleware: 'auth',
+  mixins: [validationMixin],
+  validations: {
+    form: {
+      email: {
+        required,
+        email
+      },
+      password: {
+        required,
+        minLength: minLength(6),
+        maxLength: maxLength(20)
+      }
+    }
+  },
   data: () => ({
     form: {
       email: '',
@@ -75,12 +97,26 @@ export default {
     }
   },
   methods: {
+    validateForm () {
+      this.$v.$touch()
+      if (!this.$v.$invalid) {
+        this.resisterUser()
+      }
+    },
     async resisterUser () {
       await this.$store.dispatch('authenticateUser', {
         email: this.form.email,
         password: this.form.password,
         resturnSecureToken: true
       })
+    },
+    getValidationClass (fieldName) {
+      const field = this.$v.form[fieldName]
+      if (field) {
+        return {
+          'md-invalid': field.$invalid && field.$dirty
+        }
+      }
     }
   }
 }