feat($Validation): add field validation

Author: johnnymillergh

src/requests/vuetify-demo/index.ts

@@ -3,5 +3,6 @@ import * as Axios from '@/plugins/axios'
 import { GetDemoPayload } from '@/requests/vuetify-demo/payload/get-demo-payload'
 
 export const vuetifyDemoApi = {
-  getDemo: (getDemoPayload: GetDemoPayload) => Axios.get('/api/get', getDemoPayload)
+  getDemo: (getDemoPayload: GetDemoPayload) => Axios.get('/api/getDemo', getDemoPayload),
+  delay: (delayTime: number) => Axios.get('/api/delay', delayTime)
 }

src/shims-tsx.d.ts

@@ -16,3 +16,9 @@ declare global {
     }
   }
 }
+
+/**
+ * A better solution would be to create a type with the intersection so that it can be reused across multiple components.
+ * @see <a href='https://stackoverflow.com/questions/52109471/typescript-in-vue-property-validate-does-not-exist-on-type-vue-element'>Stack Overflow</a>
+ */
+export type VForm = Vue & { validate: () => boolean }

src/views/VuetifyDemo.vue

@@ -118,11 +118,12 @@
       </v-container>
       <v-form ref="form" v-model="formValidation">
         <v-text-field label="Title" v-model="getDemoPayload.title" :rules="titleRules" clearable/>
-        <v-text-field label="Text" v-model="getDemoPayload.text" clearable/>
-        <v-text-field label="Rating" v-model="getDemoPayload.rating"/>
-        <v-text-field label="Email" v-model="getDemoPayload.email"/>
-        <v-text-field label="Domain Name" v-model="getDemoPayload.site"/>
-        <v-btn v-throttled-click="handleThrottledClickRendRequest" small>Send request</v-btn>
+        <v-text-field label="Text" v-model="getDemoPayload.text" :rules="textRules" clearable/>
+        <v-text-field label="Rating" v-model="getDemoPayload.rating" :rules="ratingRules"/>
+        <v-text-field label="Email" v-model="getDemoPayload.email" :rules="emailRules"/>
+        <v-text-field label="Domain Name" v-model="getDemoPayload.site" :rules="siteRules"/>
+        <v-btn v-debounced-click:300="handleDebouncedClickRendRequest" :loading="sendRequestLoading" small>Send request
+        </v-btn>
       </v-form>
     </v-container>
   </div>
@@ -133,9 +134,17 @@ import Vue from 'vue'
 import { vuetifyDemoApi } from '@/requests/vuetify-demo'
 // eslint-disable-next-line no-unused-vars
 import { GetDemoPayload } from '@/requests/vuetify-demo/payload/get-demo-payload'
+import validator from 'validator'
+// eslint-disable-next-line no-unused-vars
+import { VForm } from '@/shims-tsx'
 
 export default Vue.extend({
   name: 'VuetifyDemo',
+  computed: {
+    form (): VForm {
+      return this.$refs.form as VForm
+    }
+  },
   data: () => ({
     colors: ['indigo', 'warning', 'pink darken-2', 'red lighten-1', 'deep-purple accent-4'],
     slides: ['First', 'Second', 'Third', 'Fourth', 'Fifth'],
@@ -150,9 +159,50 @@ export default Vue.extend({
     formValidation: false,
     getDemoPayload: new GetDemoPayload(),
     titleRules: [
-      (v: string) => !!v || 'Title is required',
-      (v: string) => (v && (10 <= v.length || v.length <= 20)) || 'Name mustn\'t less than 10 characters and more than 20 characters!'
-    ]
+      (v: string) => !!v || 'Title is required.',
+      (v: string) => {
+        if (v && !validator.isLength(v, 10, 20)) {
+          return 'The length of title must not be less than 10 characters and not be more than 20 characters!'
+        }
+        return true
+      }
+    ],
+    textRules: [
+      (v: string) => !!v || 'Test is required.',
+      (v: string) => {
+        if (v && !validator.contains('hello', v)) {
+          return 'The text need to contain `hello`!'
+        }
+        return true
+      }
+    ],
+    ratingRules: [
+      (v: number) => !!v || 'Rating is required.',
+      (v: number) => {
+        if (v && (v < 0 || v > 10)) {
+          return 'The value range of rating should be [0, 10]!'
+        }
+        return true
+      }
+    ],
+    emailRules: [
+      (v: string) => !!v || 'Email is required.',
+      (v: string) => {
+        if (v && !validator.isEmail(v)) {
+          return 'Invalid email!'
+        }
+        return true
+      }
+    ],
+    siteRules: [
+      (v: string) => {
+        if (v && !validator.isFQDN(v)) {
+          return 'Invalid domain name!'
+        }
+        return true
+      }
+    ],
+    sendRequestLoading: false
   }),
   mounted () {
     this.onResize()
@@ -182,9 +232,19 @@ export default Vue.extend({
     handleDebouncedClickButton (event: Event) {
       console.info('handleDebouncedClickButton', event)
     },
-    async handleThrottledClickRendRequest () {
+    async handleDebouncedClickRendRequest (event: Event) {
+      console.info('handleDebouncedClickRendRequest', event)
+      this.form.validate()
+      if (!this.formValidation) {
+        this.$toast.warning('The form is incorrect!')
+        return
+      }
+      this.sendRequestLoading = true
       const response = await vuetifyDemoApi.getDemo(this.getDemoPayload)
-      console.info('Response', response)
+      this.$toast.success(response.message)
+      setTimeout(() => {
+        this.sendRequestLoading = false
+      }, 2000)
     },
     onResize () {
       this.windowSize = { x: window.innerWidth, y: window.innerHeight }