完善表单验证规则

vueJs/src/components/InputTagEx/index.vue

@@ -76,6 +76,7 @@ export default class extends Vue {
   @Watch('value', { immediate: true })
   private onValueChanged() {
     this.data = this.value
+    this.$parent.$emit('validate', this.data)
   }
 
   private foucusTagInput() {

vueJs/src/lang/zh.ts

@@ -572,6 +572,7 @@ export default {
     pleaseInputBy: '请输入{key}',
     pleaseSelectBy: '请选择{key}',
     none: '未定义',
+    charLengthRange: '长度在 {min} 到 {max} 个字符!',
     questingDeleteByMessage: '是否要删除{message}?',
     delNotRecoverData: '请注意,删除后不可恢复!',
     whetherDeleteData: '是否删除选择的记录 {name} ?',
@@ -584,6 +585,7 @@ export default {
     otherOpera: '更多操作',
     cancel: '取 消',
     confirm: '确 定',
-    correctEmailAddress: '正确的邮件地址'
+    correctEmailAddress: '正确的邮件地址',
+    correctPhoneNumber: '正确的手机号码'
   }
 }

vueJs/src/settings.ts

@@ -12,9 +12,9 @@ interface ISettings {
 
 // You can customize below settings :)
 const settings: ISettings = {
-  title: 'Vue Typescript Admin',
+  title: '后台管理平台',
   showSettings: true,
-  showTagsView: true,
+  showTagsView: false,
   fixedHeader: false,
   showSidebarLogo: false,
   errorLog: ['production'],

vueJs/src/views/admin/apigateway/components/AggregateRouteConfigEditForm.vue

@@ -166,8 +166,8 @@ export default class extends Vue {
   }
 
   private onSaveAggregateRouteConfig() {
-    const frmIdentityProperty = this.$refs.formIdentityProperty as any
+    const frmAggregateRouteConfig = this.$refs.formAggregateRouteConfig as any
-    frmIdentityProperty.validate((valid: boolean) => {
+    frmAggregateRouteConfig.validate((valid: boolean) => {
       if (valid) {
         this.routeConfig.routeId = this.aggregateRoute.reRouteId
         ApiGatewayService.createAggregateRouteConfig(this.routeConfig).then(routeConfig => {

vueJs/src/views/admin/apigateway/components/AggregateRouteCreateOrEditForm.vue

@@ -1,8 +1,9 @@
 <template>
   <el-form
     ref="formAggregateRoute"
-    label-width="100px"
+    label-width="120px"
     :model="aggregateRoute"
+    :rules="aggregateRouteRules"
   >
     <el-row>
       <el-col :span="24">
@@ -58,7 +59,6 @@
         >
           <el-input
             v-model="aggregateRoute.upstreamHost"
-            :placeholder="$t('pleaseInputBy', {key: $t('apiGateWay.upstreamHost')})"
           />
         </el-form-item>
       </el-col>
@@ -89,7 +89,6 @@
     >
       <el-input-tag
         v-model="aggregateRoute.upstreamHttpMethod"
-        :placeholder="$t('pleaseInputBy', {key: $t('apiGateWay.upstreamHttpMethod')})"
       />
     </el-form-item>
     <el-form-item
@@ -98,7 +97,6 @@
     >
       <el-input-tag
         v-model="aggregateRoute.reRouteKeys"
-        :placeholder="$t('pleaseInputBy', {key: $t('apiGateWay.reRouteKeys')})"
       />
     </el-form-item>
 
@@ -149,6 +147,29 @@ export default class extends Vue {
     return false
   }
 
+  private validateReRouteKeys = (rule: any, value: string[], callback: any) => {
+    if (!value || value.length === 0) {
+      callback(new Error(this.l('pleaseInputBy', { key: this.l('apiGateWay.reRouteKeys') })))
+    } else {
+      callback()
+    }
+  }
+
+  private aggregateRouteRules = {
+    appId: [
+      { required: true, message: this.l('pleaseSelectBy', { key: this.l('apiGateWay.appId') }), trigger: 'blur' }
+    ],
+    name: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.aggregateRouteName') }), trigger: 'blur' }
+    ],
+    upstreamPathTemplate: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.upstreamPathTemplate') }), trigger: 'blur' }
+    ],
+    reRouteKeys: [
+      { required: true, validator: this.validateReRouteKeys, trigger: 'blur' }
+    ]
+  }
+
   constructor() {
     super()
     this.aggregateRoute = AggregateReRoute.empty()
@@ -166,21 +187,24 @@ export default class extends Vue {
   }
 
   private onSaveAggregateRoute() {
-    if (this.isEditRoute) {
+    const frmAggregateRoute = this.$refs.formAggregateRoute as any
-      const updateAggregateRoute = AggregateReRouteUpdate.create(this.aggregateRoute)
+    frmAggregateRoute.validate((valid: boolean) => {
-      ApiGatewayService.updateAggregateReRoute(updateAggregateRoute).then(route => {
+      if (valid) {
-        this.aggregateRoute = route
+        if (this.isEditRoute) {
-        this.reset()
+          const updateAggregateRoute = AggregateReRouteUpdate.create(this.aggregateRoute)
-        this.$emit('closed', true)
+          ApiGatewayService.updateAggregateReRoute(updateAggregateRoute).then(route => {
-      })
+            this.aggregateRoute = route
-    } else {
+          })
-      const createAggregateRoute = AggregateReRouteCreate.create(this.aggregateRoute)
+        } else {
-      ApiGatewayService.createAggregateReRoute(createAggregateRoute).then(route => {
+          const createAggregateRoute = AggregateReRouteCreate.create(this.aggregateRoute)
-        this.aggregateRoute = route
+          ApiGatewayService.createAggregateReRoute(createAggregateRoute).then(route => {
+            this.aggregateRoute = route
+          })
+        }
         this.reset()
         this.$emit('closed', true)
-      })
+      }
-    }
+    })
   }
 
   private onCancel() {
@@ -193,5 +217,9 @@ export default class extends Vue {
     const formAggregateRoute = this.$refs.formAggregateRoute as any
     formAggregateRoute.resetFields()
   }
+
+  private l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
 }
 </script>

vueJs/src/views/admin/apigateway/components/GlobalCreateOrEditForm.vue

@@ -3,6 +3,7 @@
     ref="formGlobal"
     label-width="100px"
     :model="globalConfiguration"
+    :rules="globalConfigurationRules"
   >
     <el-tabs>
       <el-tab-pane :label="$t('apiGateWay.basicOptions')">
@@ -391,6 +392,15 @@ export default class extends Vue {
     return false
   }
 
+  private globalConfigurationRules = {
+    appId: [
+      { required: true, message: this.l('pleaseSelectBy', { key: this.l('apiGateWay.appId') }), trigger: 'blur' }
+    ],
+    baseUrl: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.baseUrl') }), trigger: 'blur' }
+    ]
+  }
+
   mounted() {
     ApiGatewayService.getRouteGroupAppIds().then(appKeys => {
       this.routeGroupAppIdOptions = appKeys.items
@@ -437,6 +447,10 @@ export default class extends Vue {
     formGlobal.resetFields()
     this.$emit('closed', false)
   }
+
+  private l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
 }
 </script>
 

vueJs/src/views/admin/apigateway/components/RouteCreateOrEditForm.vue

@@ -3,6 +3,7 @@
     ref="formRoute"
     label-width="100px"
     :model="apiGateWayRoute"
+    :rules="apiGateWayRouteRules"
   >
     <el-tabs v-model="activeTablePane">
       <el-tab-pane
@@ -50,7 +51,6 @@
             >
               <el-input
                 v-model="apiGateWayRoute.requestIdKey"
-                :placeholder="$t('pleaseInputBy', {key: $t('apiGateWay.requestIdKey')})"
               />
             </el-form-item>
           </el-col>
@@ -129,6 +129,7 @@
             <el-form-item
               prop="downstreamScheme"
               :label="$t('apiGateWay.downstreamScheme')"
+              label-width="120px"
             >
               <el-input
                 v-model="apiGateWayRoute.downstreamScheme"
@@ -139,6 +140,7 @@
             <el-form-item
               prop="downstreamHttpVersion"
               :label="$t('apiGateWay.downstreamHttpVersion')"
+              label-width="120px"
             >
               <el-input
                 v-model="apiGateWayRoute.downstreamHttpVersion"
@@ -149,6 +151,7 @@
         <el-form-item
           prop="upstreamPathTemplate"
           :label="$t('apiGateWay.upstreamPathTemplate')"
+          label-width="120px"
         >
           <el-input
             v-model="apiGateWayRoute.upstreamPathTemplate"
@@ -158,6 +161,7 @@
         <el-form-item
           prop="downstreamPathTemplate"
           :label="$t('apiGateWay.downstreamPathTemplate')"
+          label-width="120px"
         >
           <el-input
             v-model="apiGateWayRoute.downstreamPathTemplate"
@@ -169,6 +173,7 @@
             <el-form-item
               prop="downstreamHttpMethod"
               :label="$t('apiGateWay.downstreamHttpMethod')"
+              label-width="120px"
             >
               <el-input
                 v-model="apiGateWayRoute.downstreamHttpMethod"
@@ -189,6 +194,7 @@
         <el-form-item
           prop="upstreamHttpMethod"
           :label="$t('apiGateWay.upstreamHttpMethod')"
+          label-width="120px"
         >
           <el-input-tag
             v-model="apiGateWayRoute.upstreamHttpMethod"
@@ -198,6 +204,7 @@
         <el-form-item
           prop="downstreamHostAndPorts"
           :label="$t('apiGateWay.downstreamHostAndPorts')"
+          label-width="120px"
         >
           <host-and-port-input-tag
             v-model="apiGateWayRoute.downstreamHostAndPorts"
@@ -563,6 +570,45 @@ export default class extends Vue {
     return false
   }
 
+  private validateRequiredArrayValue = (rule: any, value: string[], callback: any, errorMessage: string) => {
+    if (!value || value.length === 0) {
+      callback(new Error(errorMessage))
+    } else {
+      callback()
+    }
+  }
+
+  private apiGateWayRouteRules = {
+    appId: [
+      { required: true, message: this.l('pleaseSelectBy', { key: this.l('apiGateWay.appId') }), trigger: 'blur' }
+    ],
+    reRouteName: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.reRouteName') }), trigger: 'blur' }
+    ],
+    downstreamPathTemplate: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.downstreamPathTemplate') }), trigger: 'blur' }
+    ],
+    upstreamPathTemplate: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.upstreamPathTemplate') }), trigger: 'blur' }
+    ],
+    upstreamHttpMethod: [
+      {
+        required: true,
+        validator: (rule: any, value: string[], callback: any) =>
+          this.validateRequiredArrayValue(rule, value, callback, this.l('pleaseInputBy', { key: this.l('apiGateWay.upstreamHttpMethod') })),
+        trigger: 'blur'
+      }
+    ],
+    downstreamHostAndPorts: [
+      {
+        required: true,
+        validator: (rule: any, value: string[], callback: any) =>
+          this.validateRequiredArrayValue(rule, value, callback, this.l('pleaseInputBy', { key: this.l('apiGateWay.downstreamHostAndPorts') })),
+        trigger: 'blur'
+      }
+    ]
+  }
+
   constructor() {
     super()
     this.activeTablePane = 'basicOptions'
@@ -610,6 +656,10 @@ export default class extends Vue {
     this.activeTablePane = 'basicOptions'
     this.$emit('closed')
   }
+
+  private l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
 }
 </script>
 

vueJs/src/views/admin/apigateway/components/RouteGroupCreateOrEditForm.vue

@@ -3,6 +3,7 @@
     ref="formRouteGroup"
     label-width="80px"
     :model="apiGateWayRouteGroup"
+    :rules="apiGateWayRouteGroupRules"
   >
     <el-form-item
       prop="name"
@@ -87,6 +88,18 @@ export default class extends Vue {
 
   private apiGateWayRouteGroup: RouteGroupDto
 
+  private apiGateWayRouteGroupRules = {
+    appId: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.appId') }), trigger: 'blur' }
+    ],
+    name: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.groupName') }), trigger: 'blur' }
+    ],
+    appName: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('apiGateWay.appName') }), trigger: 'blur' }
+    ]
+  }
+
   constructor() {
     super()
     this.apiGateWayRouteGroup = new RouteGroupDto()
@@ -134,6 +147,10 @@ export default class extends Vue {
     routerEditForm.resetFields()
     this.$emit('closed', false)
   }
+
+  private l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
 }
 </script>
 

vueJs/src/views/admin/tenants/components/TenantCreateOrEditForm.vue

@@ -23,6 +23,7 @@
         >
           <el-input
             v-model="tenant.adminEmailAddress"
+            :placeholder="$t('pleaseInputBy', {key: $t('tenant.adminEmailAddress')})"
           />
         </el-form-item>
         <el-form-item
@@ -32,6 +33,7 @@
         >
           <el-input
             v-model="tenant.adminPassword"
+            :placeholder="$t('pleaseInputBy', {key: $t('tenant.adminPassword')})"
           />
         </el-form-item>
 
@@ -84,6 +86,9 @@ export default class extends Vue {
     adminEmailAddress: [
       { required: true, message: this.l('pleaseInputBy', { key: this.l('tenant.adminEmailAddress') }), trigger: 'blur' },
       { type: 'email', message: this.l('pleaseInputBy', { key: this.l('global.correctEmailAddress') }), trigger: 'blur' }
+    ],
+    adminPassword: [
+      { required: true, message: this.l('pleaseInputBy', { key: this.l('tenant.adminPassword') }), trigger: 'blur' }
     ]
   }
 
@@ -133,6 +138,8 @@ export default class extends Vue {
 
   private reset() {
     this.tenant = TenantCreateOrEdit.empty()
+    const frmTenant = this.$refs.formTenant as any
+    frmTenant.resetFields()
   }
 
   private l(name: string, values?: any[] | { [key: string]: any }) {

vueJs/src/views/admin/tenants/index.vue

@@ -43,7 +43,7 @@
         :label="$t('tenant.id')"
         prop="id"
         sortable
-        width="150px"
+        width="310px"
         align="center"
       >
         <template slot-scope="{row}">

vueJs/src/views/admin/users/components/UserProfile.vue

@@ -1,8 +1,9 @@
 <template>
   <el-form
     ref="profile"
-    label-width="80px"
+    label-width="110px"
     :model="userProfile"
+    :rules="userProfileRules"
   >
     <el-tabs v-model="activedTabPane">
       <el-tab-pane
@@ -71,17 +72,6 @@
             :placeholder="$t('userProfile.pleaseInputPassword')"
           />
         </el-form-item>
-        <el-form-item
-          v-if="!hasEditUser"
-          prop="password"
-          label-width="100px"
-          :label="$t('userProfile.confirmPassword')"
-        >
-          <el-input
-            type="password"
-            :placeholder="$t('userProfile.pleaseConfirmPassword')"
-          />
-        </el-form-item>
         <el-form-item
           prop="twoFactorEnabled"
           label-width="100px"
@@ -210,26 +200,34 @@ export default class extends Vue {
     }
   }
 
-  private rules = {
+  private validatePhoneNumberValue = (rule: any, value: string, callback: any) => {
+    const phoneReg = /^1[34578]\d{9}$/
+    if (!value || !phoneReg.test(value)) {
+      callback(new Error(this.l('global.pleaseInputBy', { key: this.l('global.correctPhoneNumber') })))
+    } else {
+      callback()
+    }
+  }
+
+  private userProfileRules = {
     userName: [
-      { required: true, message: '请输入用户账户', trigger: 'blur' },
+      { required: true, message: this.l('userProfile.pleaseInputUserName'), trigger: 'blur' },
-      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+      { min: 3, max: 20, message: this.l('global.charLengthRange', { min: 3, max: 20 }), trigger: 'blur' }
     ],
     name: [
-      { required: true, message: '请输入用户名称', trigger: 'blur' },
+      { required: true, message: this.l('userProfile.pleaseInputName'), trigger: 'blur' },
-      { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
+      { min: 3, max: 50, message: this.l('global.charLengthRange', { min: 3, max: 50 }), trigger: 'blur' }
     ],
     email: [
-      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+      { required: true, message: this.l('userProfile.pleaseInputEmail'), trigger: 'blur' },
-      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+      { type: 'email', message: this.l('global.pleaseInputBy', { key: this.l('global.correctEmailAddress') }), trigger: ['blur', 'change'] }
     ],
     password: [
-      { required: true, message: '请输入用户密码', trigger: 'blur' },
+      { required: true, message: this.l('userProfile.pleaseInputPassword'), trigger: 'blur' },
-      { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
+      { min: 6, max: 15, message: this.l('global.charLengthRange', { min: 6, max: 15 }), trigger: 'blur' }
     ],
     phoneNumber: [
-      { required: true, message: '请输入联系方式', trigger: 'blur' },
+      { required: true, validator: this.validatePhoneNumberValue, trigger: 'blur' }
-      { type: 'phone', message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
     ]
   }
 
@@ -367,6 +365,10 @@ export default class extends Vue {
     updateUserInput.concurrencyStamp = this.userProfile.concurrencyStamp
     return updateUserInput
   }
+
+  private l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
 }
 </script>