How to use vuelidate - 10 common examples

required,
            integer
        },
        coolFactor: {
            required,
            decimal
        },
        flatA: { required },
        flatB: { required },
        forGroup: {
            nested: { required }
        },
        validationGroup: ['age', 'coolFactor', 'flatA', 'flatB', 'forGroup.nested'],
        people: {
            required,
            minLength: minLength(3),
            $each: {
                name: {
                    required,
                    minLength: minLength(2)
                }
            }
        },
        username: {
            required,
            isUnique(value: string) {
                // standalone validator ideally should not assume a field is required
                if (value === '') return true

                // simulate async call, fail for all logins with even length
                return new Promise((resolve, reject) => {
                    setTimeout(() => {

// excerpt from vue-class-component/src/declarations.ts
type VueClass = { new(...args: any[]): V & Vue } & typeof Vue
// excerpt from vue-class-component/src/index.ts
function Component(options: ComponentOptions | VueClass): any {
    return null; // mocked
}

const mustBeCool: CustomRule = (value: string) => value.indexOf('cool') >= 0

const mustBeCool2: CustomRule = (value: string) => !helpers.req(value) || value.indexOf('cool') >= 0

const contains = (param: string): CustomRule =>
    (value: string) => !helpers.req(value) || value.indexOf(param) >= 0

const mustBeCool3 = helpers.withParams(
    { type: 'mustBeCool3' },
    (value: any) => !helpers.req(value) || value.indexOf('cool') >= 0
)

const mustBeCool3Result: boolean = mustBeCool3(50)

const mustBeCool4 = helpers.regex('mustBeCool4', /^.*cool.*$/)

const mustBeSame = (reference: string) => helpers.withParams(
    { type: 'mustBeSame' },
    (value: any, parentVm?: Vue) =>
        value === helpers.ref(reference, self, parentVm)
)

const mustHaveLength = (minLen: number) => helpers.withParams(
    { type: 'mustHaveLength' },

this.toggleForm();
          this.$v.$reset();
          set(this, 'team', {
            name: '',
          });

          this.$bus.$emit('teamCreated', team);
          this.$alert.$show(`Team '${team.name}' was created successfully`);
        }).catch(handleHttpResponseError);
      },
    },

    validations: {
      team: {
        owner_id: {
          required: requiredIf(function () {
            return window.isAdmin;
          }),
        },

        name: {
          required,
          available(value) {
            clearTimeout(this.timeout.name);

            // required already taking care of this
            if (value === '') {
              return true;
            }

            return new Promise((resolve) => {
              const searchTeam = () => {

}
const noStartEndHyphen = (value) => {
  return !startEndHyphenPattern.test(value)
}
const numberOrPercentage = (value) => {
  return numberOrPercentagePattern.test(value)
}

const unique = key => withParams({ type: 'unique', key },
  function (value, parentVm) {
    const keys = ref(key, this, parentVm)
    return !includes(keys, value)
  }
)

const uniqueWorkerName = withParams({ type: 'uniqueWorkerName' },
  function unique (value) {
    return this.workers.filter(item => item.name === value).length === 1
  }
)

const serviceAccountKey = withParams({ type: 'serviceAccountKey' },
  function (value) {
    try {
      const key = JSON.parse(value)
      if (key.project_id && alphaNumUnderscoreHyphen(key.project_id)) {
        return true
      }
    } catch (err) { /* ignore error */ }
    return false
  }
)

return {
        worker: {
          name: {
            required,
            maxLength: maxLength(15),
            noStartEndHyphen, // Order is important for UI hints
            resourceName,
            uniqueWorkerName
          },
          volume: {
            size: {
              minVolumeSize: minVolumeSize(this.minimumVolumeSize)
            }
          },
          minimum: {
            minValue: minValue(0)
          },
          maximum: {
            minValue: minValue(0)
          },
          maxSurge: {
            numberOrPercentage
          },
          zones: {
            required
          }
        }
      }
    },
    machineTypes () {

validations() {
    return {
      gasPrice: {
        required: requiredIf(
          () => this.step === feeStep && this.session.experimentalMode
        ),
        // we don't use SMALLEST as min gas price because it can be a fraction of uatom
        // min is 0 because we support sending 0 fees
        between: between(0, atoms(this.balance))
      }
    }
  }
}

computed: {
    ...mapGetters('modal', [
      'modalDataID',
      'modalData',
      'modalActive'
    ])
  },
  validations: {
    formData: {
      name: {
        required,
        minLength: minLength(3)
      },
      percent: {
        required,
        between: between(0.10, 100)
      },
      description: {
        maxLength: maxLength(255)
      }
    }
  },
  // watch: {
  //   'modalDataID' (val) {
  //     if (val) {
  //       this.isEdit = true
  //       this.setData()
  //     } else {
  //       this.isEdit = false
  //     }
  //   },
  //   'modalActive' (val) {

module.exports = function oneOfValidator(propertySchema, schemas, getPropertyValidationRules) {
  return vuelidate.withParams({
    type: 'schemaOneOf',
    schemas: schemas,
    schema: propertySchema
  }, function(val) {
    if (!noParamsRequired(val)) {
      return true
    }

    // ignore type errors, the type validator handles that
    if (!typeValidator(propertySchema, propertySchema.type)(val)) {
      return true
    }

    return schemas.reduce(function(matching, schema) {
      if (matching > 1) return 2
      if (validate(getPropertyValidationRules(schema), val)) return matching + 1

module.exports = function allOfValidator(propertySchema, schemas, getPropertyValidationRules) {
  return vuelidate.withParams({
    type: 'schemaAllOf',
    schemas: schemas,
    schema: propertySchema
  }, function(val) {
    if (!noParamsRequired(val)) {
      return true
    }

    // ignore type errors, the type validator handles that
    if (!typeValidator(propertySchema, propertySchema.type)(val)) {
      return true
    }

    return schemas.every(function(itemSchema) {
      return validate(getPropertyValidationRules(itemSchema), val)
    })

module.exports = function notValidator(propertySchema, notSchema, getPropertyValidationRules) {
  return vuelidate.withParams({
    type: 'schemaNot',
    not: notSchema,
    schema: propertySchema
  }, function(val) {
    if (!noParamsRequired(val)) {
      return true
    }

    // ignore type errors, the type validator handles that
    if (!typeValidator(propertySchema, propertySchema.type)(val)) {
      return true
    }

    return !validate(getPropertyValidationRules(notSchema), val)
  })
}