availity-reactstrap-validation 校验总结

Custom error messages 自定义错误信息

validate={{
    required: {value: true, errorMessage: 'Please enter a name'},
    pattern: {value: '^[A-Za-z0-9]+$', errorMessage: 'Your name must be composed only with letter and numbers'},
    minLength: {value: 6, errorMessage: 'Your name must be between 6 and 16 characters'},
    maxLength: {value: 16, errorMessage: 'Your name must be between 6 and 16 characters'}
      }}

errorMessage 可以在props 属性中可以在 validate= {{ }}中针对每一个校验设置

import { AvForm, AvField } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';
<AvForm>
        <AvField name="name" label="Name (default error message)" type="text" errorMessage="Invalid name" validate={{
            required: {value: true},
            pattern: {value: '^[A-Za-z0-9]+$'},
            minLength: {value: 6},
            maxLength: {value: 16}
          }} />
        <AvField name="nameCustomMessage" label="Name (custom error message)" type="text" validate={{
            required: {value: true, errorMessage: 'Please enter a name'},
            pattern: {value: '^[A-Za-z0-9]+$', errorMessage: 'Your name must be composed only with letter and numbers'},
            minLength: {value: 6, errorMessage: 'Your name must be between 6 and 16 characters'},
            maxLength: {value: 16, errorMessage: 'Your name must be between 6 and 16 characters'}
          }} />
        <Button color="primary">Submit</Button>
      </AvForm>

Date

<AvForm>
        <AvField name="date" label="Date" type="date" />
        <AvField name="dateProp" label="Date (validate prop)" type="text" validate={{date: {format: 'MM/DD/YYYY'}}} title="Use MM/DD/YYYY" />
        <Button color="primary">Submit</Button>
      </AvForm>

 <AvForm>
        <AvField name="datetime" label="DateTime" type="datetime" />
        <AvField name="datetimeProp" label="DateTime (validate prop)" type="text" validate={{datetime: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>

Email

<AvForm>
        <AvField name="email" label="Email" type="email" />
        <AvField name="emailProp" label="Email (validate prop)" type="text" validate={{email: true}} />
        <Button color="primary">Submit</Button>
      </AvForm> 
判断原邮箱与新邮箱
<AvForm>
        <AvField name="originalEmail" label="Email" type="email" />
        <AvField name="confirmationEmail" label="Email" type="email" validate={{match:{value:'originalEmail'}}} />
        <Button color="primary">Submit</Button>
      </AvForm>

  <AvInput id="points-id" type="text" className="form-control" name="id" required readOnly />

Max

 <AvForm>
        <AvField name="maxPropString" label="Max" type="number" max="10" />
        <AvField name="maxPropNumber" label="Max (w/ prop as a number)" type="number" max={10} />
        <AvField name="maxPropNumberProp" label="Max (validate prop)" type="text" validate={{max: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>

MaxLength

<AvForm>
        <AvField name="maxLengthPropString" label="Max Length" type="text" maxLength="10" />
        <AvField name="maxLengthPropNumber" label="Max Length (w/ prop as a number)" type="text" maxLength={10} />
        <AvField name="maxLengthPropNumberProp" label="Max Length (validate prop)" type="text" validate={{maxLength: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>

MaxChecked

<AvForm>
        <AvCheckboxGroup inline name="maxCheckedCheckboxList" label="Select No More Than Two Checkboxes" validate={{max: {value: 2}}}>
          <AvCheckbox label="Bulbasaur" value="Bulbasaur" />
          <AvCheckbox label="Squirtle" value="Squirtle" />
          <AvCheckbox label="Charmander" value="Charmander" />
          <AvCheckbox label="Pikachu" value="Pikachu" disabled />
        </AvCheckboxGroup>

        <Button color="primary">Submit</Button>
      </AvForm>

Min

<AvForm>
        <AvField name="minPropString" label="Min" type="number" min="10" />
        <AvField name="minPropNumber" label="Min (w/ prop as a number)" type="number" min={10} />
        <AvField name="minPropNumberProp" label="Min (validate prop)" type="text" validate={{min: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>

MinLength

<AvForm>
        <AvField name="minLengthPropString" label="Min Length" type="text" minLength="10" />
        <AvField name="minLengthPropNumber" label="Min Length (w/ prop as a number)" type="text" minLength={10} />
        <AvField name="minLengthPropNumberProp" label="Min Length (validate prop)" type="text" validate={{minLength: {value: 10}}} />
        <Button color="primary">Submit</Button>
      </AvForm>

MinChecked

<AvForm>
        <AvCheckboxGroup inline name="minCheckedCheckboxList" label="Select At Least Two Checkboxes" validate={{min: {value: 2}}}>
          <AvCheckbox label="Bulbasaur" value="Bulbasaur" />
          <AvCheckbox label="Squirtle" value="Squirtle" />
          <AvCheckbox label="Charmander" value="Charmander" />
          <AvCheckbox label="Pikachu" value="Pikachu" disabled />
        </AvCheckboxGroup>

        <Button color="primary">Submit</Button>
      </AvForm>

Number

 <AvForm>
        <AvField name="number" label="Number" type="number" />
        <AvField name="numberProp" label="Number (validate prop)" type="text" validate={{number: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>

Pattern

<AvForm>
        <AvField name="pattern" label="Pattern" type="text" pattern="^[A-Z]*$" placeholder="^[A-Z]*$" title="Only Uppercase letters are allowed for this example" />
        <AvField name="patternPropRegex" label="Pattern (validate prop with regex)" type="text" validate={{pattern: {value: /^[A-Z]*$/}}} placeholder="^[A-Z]*$" title="Only Uppercase letters are allowed for this example" />
        <AvField name="patternPropString" label="Pattern (validate prop with string)" type="text" validate={{pattern: {value: '^[A-Z]*$'}}} placeholder="^[A-Z]*$" title="Only Uppercase letters are allowed for this example" />
        <Button color="primary">Submit</Button>
      </AvForm>

Required

<AvForm>
        <AvField name="required" label="Required" type="text" required />
        <AvField name="requiredProp" label="Required (validate prop)" type="text" validate={{required: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>

Phone

<AvForm>
        <AvField name="telephone" label="Phone" type="tel" />
        <AvField name="telephoneProp" label="Phone (validate prop)" type="text" validate={{tel: true}} />
        <Button color="primary">Submit</Button>
      </AvForm>

Step Note: Only works only with input type of numbers

 <AvForm>
        <AvField name="step5" label="Step" type="number" step="5" />
        <AvField name="step5Prop" label="Step (validate prop)" type="number" validate={{step: {value: 5}}} />
        <Button color="primary">Submit</Button>
      </AvForm>

Custom / Async

 // debounce to not pound the 'server'
  validate = _debounce((value, ctx, input, cb) => {

    // cancel pending 'network call'
    clearTimeout(this.timeout);

    // simulate network call
    this.timeout = setTimeout(() => {
      cb(value === 'valid' || value === '');
    }, 500);

  }, 300);


 <AvForm onSubmit={console.log.bind(console)}>
        <AvField name="async" label="Async Validation (enter 'valid')" type="text" validate={{async: this.validate}} />
        <Button color="primary">Submit</Button>
      </AvForm>

onsole.log.bind(console)}>
<AvField name=“async” label=“Async Validation (enter ‘valid’)” type=“text” validate={{async: this.validate}} />
Submit