完善表单验证规则

6 years ago · f042710293
11 changed files with 168 additions and 47 deletions
--- a/vueJs/src/components/InputTagEx/index.vue
+++ b/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() {
--- a/vueJs/src/lang/zh.ts
+++ b/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: '正确的手机号码'
  }
 }
--- a/vueJs/src/settings.ts
+++ b/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'],
--- a/vueJs/src/views/admin/apigateway/components/AggregateRouteConfigEditForm.vue
+++ b/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
-    frmIdentityProperty.validate((valid: boolean) => {
+    const frmAggregateRouteConfig = this.$refs.formAggregateRouteConfig as any
+    frmAggregateRouteConfig.validate((valid: boolean) => {
      if (valid) {
        this.routeConfig.routeId = this.aggregateRoute.reRouteId
        ApiGatewayService.createAggregateRouteConfig(this.routeConfig).then(routeConfig => {
--- a/vueJs/src/views/admin/apigateway/components/AggregateRouteCreateOrEditForm.vue
+++ b/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 updateAggregateRoute = AggregateReRouteUpdate.create(this.aggregateRoute)
-      ApiGatewayService.updateAggregateReRoute(updateAggregateRoute).then(route => {
-        this.aggregateRoute = route
-        this.reset()
-        this.$emit('closed', true)
-      })
-    } else {
-      const createAggregateRoute = AggregateReRouteCreate.create(this.aggregateRoute)
-      ApiGatewayService.createAggregateReRoute(createAggregateRoute).then(route => {
-        this.aggregateRoute = route
+    const frmAggregateRoute = this.$refs.formAggregateRoute as any
+    frmAggregateRoute.validate((valid: boolean) => {
+      if (valid) {
+        if (this.isEditRoute) {
+          const updateAggregateRoute = AggregateReRouteUpdate.create(this.aggregateRoute)
+          ApiGatewayService.updateAggregateReRoute(updateAggregateRoute).then(route => {
+            this.aggregateRoute = route
+          })
+        } else {
+          const createAggregateRoute = AggregateReRouteCreate.create(this.aggregateRoute)
+          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>
--- a/vueJs/src/views/admin/apigateway/components/GlobalCreateOrEditForm.vue
+++ b/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>

--- a/vueJs/src/views/admin/apigateway/components/RouteCreateOrEditForm.vue
+++ b/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>

--- a/vueJs/src/views/admin/apigateway/components/RouteGroupCreateOrEditForm.vue
+++ b/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>

--- a/vueJs/src/views/admin/tenants/components/TenantCreateOrEditForm.vue
+++ b/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 }) {
--- a/vueJs/src/views/admin/tenants/index.vue
+++ b/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}">
--- a/vueJs/src/views/admin/users/components/UserProfile.vue
+++ b/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' },
-      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+      { required: true, message: this.l('userProfile.pleaseInputUserName'), trigger: 'blur' },
+      { min: 3, max: 20, message: this.l('global.charLengthRange', { min: 3, max: 20 }), trigger: 'blur' }
    ],
    name: [
-      { required: true, message: '请输入用户名称', trigger: 'blur' },
-      { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
+      { required: true, message: this.l('userProfile.pleaseInputName'), trigger: 'blur' },
+      { min: 3, max: 50, message: this.l('global.charLengthRange', { min: 3, max: 50 }), trigger: 'blur' }
    ],
    email: [
-      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+      { required: true, message: this.l('userProfile.pleaseInputEmail'), trigger: 'blur' },
+      { type: 'email', message: this.l('global.pleaseInputBy', { key: this.l('global.correctEmailAddress') }), trigger: ['blur', 'change'] }
    ],
    password: [
-      { required: true, message: '请输入用户密码', trigger: 'blur' },
-      { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
+      { required: true, message: this.l('userProfile.pleaseInputPassword'), trigger: 'blur' },
+      { min: 6, max: 15, message: this.l('global.charLengthRange', { min: 6, max: 15 }), trigger: 'blur' }
    ],
    phoneNumber: [
-      { required: true, message: '请输入联系方式', trigger: 'blur' },
-      { type: 'phone', message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
+      { required: true, validator: this.validatePhoneNumberValue, trigger: 'blur' }
    ]
  }

@ -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>