Added explicit rules validation example

vipin733 · Jul 4, 2017 · 162de8c · 162de8c
1 parent 9dbb243
commit 162de8c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 42 deletions.
diff --git a/examples/text-fields/11.vue b/examples/text-fields/11.vue
@@ -1,60 +1,34 @@
 <template>
   <v-container fluid>
-    <v-layout row wrap>
+    <v-layout row wrap justify-center>
       <v-flex xs12 sm6>
         <v-card>
           <v-toolbar class="teal">
-            <v-icon class="white--text">arrow_back</v-icon>
+            <v-btn icon>
+              <v-icon class="white--text">arrow_back</v-icon>
+            </v-btn>
             <v-spacer></v-spacer>
-            <v-icon class="white--text">more_vert</v-icon>
+            <v-btn icon>
+              <v-icon class="white--text">more_vert</v-icon>
+            </v-btn>
           </v-toolbar>
           <v-card-text>
             <v-container fluid>
               <v-layout row wrap>
-                <v-flex xs12>
-                  <v-text-field
-                    label="Title"
-                    value="Preliminary report"
-                  ></v-text-field>
-                </v-flex>
                 <v-flex xs12>
                   <v-text-field
                     label="Title"
                     v-model="title"
                     counter
-                    multi-line
-                    max="120"
-                  ></v-text-field>
-                </v-flex>
-              </v-layout>
-            </v-container>
-          </v-card-text>
-        </v-card>
-      </v-flex>
-      <v-flex xs12 sm6>
-        <v-card>
-          <v-toolbar class="teal">
-            <v-icon class="white--text">arrow_back</v-icon>
-            <v-spacer></v-spacer>
-            <v-icon class="white--text">more_vert</v-icon>
-          </v-toolbar>
-          <v-card-text>
-            <v-container fluid>
-
-              <v-layout row wrap>
-                <v-flex xs12>
-                  <v-text-field
-                    label="Title"
-                    value="Preliminary report"
+                    max="15"
+                    :rules="[rules.required]"
                   ></v-text-field>
                 </v-flex>
                 <v-flex xs12>
                   <v-text-field
-                    label="Title"
-                    v-model="title2"
-                    counter
-                    multi-line
-                    max="120"
+                    label="E-mail"
+                    v-model="email"
+                    :rules="[rules.required, rules.email]"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
@@ -70,8 +44,15 @@
   export default {
     data () {
       return {
-        title: 'Let me only say that it fared with him as with the storm-tossed ship, that miserably drives along the leeward land.',
-        title2: 'Let me only say that it fared with him as with the storm-tossed ship, that miserably drives along the leeward land. The port'
+        title: 'Preliminary report',
+        email: '',
+        rules: {
+          required: (value) => !!value || 'Required.',
+          email: (value) => {
+            const pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+            return pattern.test(value) || 'Invalid e-mail.'
+          }
+        }
       }
     }
   }

diff --git a/pages/TextFieldsView.vue b/pages/TextFieldsView.vue
@@ -22,7 +22,7 @@
             { header: 'Dark theme multi-line', file: 'text-fields/8', desc: 'Multi-line text-fields can be set to autogrow allowing the field to scale with the input.' },
             { header: 'Character counter', file: 'text-fields/9', desc: 'Use a counter to inform a user of the maximum or minium character limit.' },
             { header: 'Password input', file: 'text-fields/10', desc: 'A password input can be used with an appended icon and callback to control the visibility.' },
-            { header: 'Multi-line with character counter', file: 'text-fields/11', desc: `The rules prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either <code>true</code> or a <code>String</code>, the error message.` },
+            { header: 'Validation', file: 'text-fields/11', desc: `Vuetify includes simple validation through the <code>rules</code> prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either <code>true</code> or a <code>String</code>, the error message.` },
             { header: 'Full-width text field with character counter', file: 'text-fields/12', desc: 'Light theme' },
             { header: 'Required fields', file: 'text-fields/13', desc: 'Light theme' },
             { header: 'Hint text', file: 'text-fields/14', desc: 'Light theme' },
@@ -163,7 +163,7 @@
 <style lang="stylus">
   #text-fields-view
     main
-      
+
     .container
       min-height: 0
 </style>