[ADD] 인덱스 입력값 유효성 검사 추가

docs-front/layouts/default.vue

@@ -197,7 +197,7 @@
                   <v-spacer></v-spacer>
                   <v-icon size="16" @click="formData = null, editFormMethod = ''">mdi-close</v-icon>
                 </v-subheader>
-                <v-form>
+                <v-form v-model="isValidFormData">
                   <v-container class="pt-6 text-center">
                     <v-select
                       :items="['ko','en']"
@@ -213,30 +213,34 @@
                     <v-text-field
                       v-model="formData.order"
                       label="Order"
+                      :rules="rules.order"
+                      min="0"
                       type="number"
                     />
                     <v-text-field
                       v-model="formData.path"
                       label="Path (ex: 'propect/dashboard/')"
                       @input="setDepthValue"
+                      :rules="rules.path"
                       type="text"
                     />
                     <v-text-field
                       v-model="formData.depth"
-                      :disabled="editFormMethod !== '수정'"
+                      disabled
                       label="Depth"
                       type="number"
                     />
                     <v-btn
                       @click="editFormMethod === '추가' ? createIndex() : updateIndex()"
+                      :disabled="!isValidFormData"
                       elevation="0"
                       color="primary"
                     >저장</v-btn>
                     <v-btn
                       @click="removeIndex"
+                      :disabled="editFormMethod !== '수정'"
                       elevation="0"
                       color="primary"
-                      :disabled="editFormMethod !== '수정'"
                     >삭제</v-btn>
                   </v-container>
                 </v-form>
@@ -293,6 +297,18 @@ export default{
     editModeRemainList: [],
     editFormMethod: '',
     formData: null,
+    isValidFormData: null,
+    rules: {
+      order: [
+        v => /^[0-9]+$/.test(v) || '숫자만 입력 가능합니다.',
+      ],
+      path: [
+        v => v[0] !== '/' || '슬래시(/)로 시작할 수 없습니다.',
+        v => v.indexOf('//') === -1 || '슬래시(/)를 연속으로 사용할 수 없습니다.',
+        v => /^[a-zA-Z0-9\_\/]+$/.test(v) || '영문,숫자,언더바(_),슬래시(/)만 입력 가능합니다.',
+        v => v[v.length-1] === '/' || '마지막 문자는 슬래시(/)로 작성해주세요.',
+      ]
+    },
   }),
   computed: {
     searchedList() {