form 表單添加校驗規則

1、在表單的每一項上單獨加

  <el-form-item
    label="配置屬性: "
    :prop="'paramPairs.' + index + '.name'"
    :rules="[{required: true, message: '屬性名不能為空', trigger: 'blur'}, {max: 100, message: '不能超過 100 個字符', trigger: 'blur' }]"
 >
   <el-input v-model="param.name" placeholder="屬性名" />
 </el-form-item>

2、在表單頭上總體加校驗

	<el-form ref="serviceTemplate" :rules="formRules" :model="serviceTemplate" :disabled="operationType === 'view'"
               label-width="80px">
        <el-form-item prop="id" />
        <el-form-item label="名稱: " prop="name">
          <el-input v-model="serviceTemplate.name" placeholder="模版名稱" :disabled="operationType !== 'add'" style="width: 25%" />
        </el-form-item>

        <el-form-item label="探測: " prop="indicatorType">
          <el-select v-model="serviceTemplate.indicatorType" placeholder="請選擇" style="width: 25%">
            <el-option
              v-for="item in indicatorTypes"
              :key="item.value"
              :label="item.name"
              :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="類型: " prop="type">
          <el-select v-model="serviceTemplate.type" placeholder="請選擇" style="width: 25%">
            <el-option
              v-for="item in serviceTemplateTypes"
              :key="item.name"
              :label="item.name"
              :value="item.name" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-row gutter="20">
            <el-col span="6" style="margin-left: 15px">
              屬性名
            </el-col>
            <el-col span="4">
              類型
            </el-col>
            <el-col span="6">
              默認值
            </el-col>
            <el-col span="3">
              是否必填
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="paramPairs" style="margin-bottom: 0" />

        <el-row
          gutter="24"
          v-for="(param,index) in serviceTemplate.paramPairs"
          :key="index"
        >
          <el-col span="6">
            <el-form-item
              label="配置屬性: "
              :prop="'paramPairs.' + index + '.name'"
              :rules="[{required: true, message: '屬性名不能為空', trigger: 'blur'}, {max: 100, message: '不能超過 100 個字符', trigger: 'blur' }]"
            >
              <el-input v-model="param.name" placeholder="屬性名" />
            </el-form-item>
          </el-col>
          <el-col span="4">
            <el-form-item label-width="20px">
              <el-select v-model="param.type" placeholder="請選擇" style="width: auto">
                <el-option :label="'String'" :value="'string'" />
                <el-option :label="'Int'" :value="'int'" />
                <el-option :label="'Float'" :value="'float'" />
                <el-option :label="'Double'" :value="'double'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="6">
            <el-form-item
              label-width="0px"
              :prop="'paramPairs.' + index + '.value'"
              :rules="[{max: 500, message: '不能超過 500 個字符', trigger: 'blur' }]"
            >
              <el-input v-model="param.value" placeholder="默認值" />
            </el-form-item>
          </el-col>
          <el-col span="4">
            <el-form-item label-width="40px">
              <el-switch v-model="param.required" :active-value="1" :inactive-value="0" active-color="#13ce66"
                         inactive-color="#889aa4" />
            </el-form-item>
          </el-col>
          <el-button v-if="operationType !== 'view'" type="danger" size="mini" icon="el-icon-delete"
                     @click.prevent="removeConfigOption(param)">
            刪除
          </el-button>
        </el-row>
        <el-form-item v-if="operationType !== 'view'">
          <el-row gutter="24">
            <el-col :span="22">
              <div style="height: 40px; text-align: center; border-style: dashed; cursor: pointer"
                   @click="addConfigOption">
                <i class="el-icon-plus" style="font-size: 16px; line-height: 30px;">新增配置項</i>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

    formRules = {
      name: FormRules.name('模板名稱'),
      indicatorType: [
        { required: true, message: '請選擇探測方式', trigger: 'change' },
      ],
      type: [{
        required: true, message: '請選擇模板類型', trigger: 'change'
      }]
    };

import { FormValidators } from '@/utils/formValidators';

class Rules {
  public name(label: string) {
    return [
      { required: true, message: `請輸入${label}`, trigger: 'blur' },
      { max: 100, message: '不能超過 100 個字符', trigger: 'blur' },
      { min: 2, message: '不能少於 2 個字符', trigger: 'blur' },
      { pattern: '^([a-z])([a-z0-9_-]){1,99}$', message: `${label}需要以小寫字母開頭, 可包含小寫字母, 數組, _和-, 並且長度在2-100之間.`, trigger: 'blur' },
    ];
  }

  public getNoChinese() {
    return { pattern: '^([^\u4e00-\u9fa5]){6,20}$', message: '不能輸入中文,長度6-20' };
  }

  public getNoEmpty(name) {
    return { required: true, message: `請輸入${name}` };
  }

  public uri(indicator) {
    return [
      { required: true, message: `請輸入URI`, trigger: 'blur' },
      { max: 2083, message: '不能超過 2083 個字符', trigger: 'blur' },
      { validator: FormValidators.uri(indicator), trigger: 'blur' },
    ];
  }
}

export const FormRules = new Rules();