form 表单添加校验规则

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();