Vue Validator Validation Rules

This section lists validation rules that can be used within the dxValidator.

View Demo

AsyncRule

A custom validation rule that is checked asynchronously. Use async rules for server-side validation.

import { AsyncRule } from "devextreme/common"
Type:

Object

To specify the async rule, set the type to "async" and declare the validationCallback function.

You can also set a custom message, specify whether empty values are valid, and whether the rule should be re-evaluated, even if the target value is the same.

Validation rules are checked in the following order: All the synchronous rules are checked in the same order as in the validationRules array. Then, all the async rules are checked simultaneously.

View Demo

See Also

CompareRule

A validation rule that demands that a validated editor has a value that is equal to a specified expression.

import { CompareRule } from "devextreme/common"
Type:

Object

To specify the expression that the validated field must match, set the rule's comparisonTarget configuration property. Assign a function to this property. The validated value will be compared to the function's return value. The comparison will be performed by using the operator that is set for the comparisonType property.

View Demo

See Also

CustomRule

A rule with custom validation logic.

import { CustomRule } from "devextreme/common"
Type:

Object

To specify the custom rule, set the type to "custom" and declare the validationCallback function.

You can also set a custom message, specify whether empty values are valid, and whether the rule should be re-evaluated, even if the target value is the same.

See Also

EmailRule

A validation rule that requires that the validated field match the Email pattern.

import { EmailRule } from "devextreme/common"
Type:

Object

View Demo

DevExtreme components use the following Email pattern:

pattern: /^[\d\w._-]+@[\d\w._-]+\.[\w]+$/i
See Also

NumericRule

A validation rule that demands that the validated field has a numeric value.

import { NumericRule } from "devextreme/common"
Type:

Object

View Demo

See Also

PatternRule

A validation rule that requires that the validated field match a specified pattern.

import { PatternRule } from "devextreme/common"
Type:

Object

To specify the regular expression that the validated field must match, set the rule's pattern configuration property.

View Demo

NOTE
If you apply a pattern rule to a DateBox component, specify dateSerializationFormat so that the format of the validated value is a string.
See Also

RangeRule

A validation rule that demands the target value be within the specified value range (including the range's end points).

import { RangeRule } from "devextreme/common"
Type:

Object

To specify the range that the validated value must match, set the rule's min and max configuration properties. Note that the specified range can be on a date-time or numeric scale. To validate a value against a string length, use the stringLength rule.

View Demo

See Also

RequiredRule

A validation rule that demands that a validated field has a value.

import { RequiredRule } from "devextreme/common"
Type:

Object

Use this rule type to ensure the target editor value is specified. The rule will be broken in the following cases.

  • If the validated value is null, false, or undefined.
  • If the specified value has a type that is not expected for the target field (e.g., a string for the DateBox UI component).

View Demo

See Also

StringLengthRule

A validation rule that demands the target value length be within the specified value range (including the range's end points).

import { StringLengthRule } from "devextreme/common"
Type:

Object

To specify the range that the validated value length must match, set the rule's min and max configuration properties.

NOTE
This rule validates string values or the values that can be cast to a string.

View Demo

See Also