Vue Validator - 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

ignoreEmptyValue

If set to true, empty values are valid.

Selector: ignore-empty-value
Type:

Boolean

Default Value: true

max

Specifies the maximum value allowed for the validated value.

Type:

Date

|

Number

|

String

message

Specifies the message that is shown if the rule is broken.

Type:

String

Default Value: 'Value is out of range'

An error message can be specified as follows:

  • Hard-code the message

    App.vue
    • <template>
    • <DxTextBox>
    • <DxValidator>
    • <DxRangeRule
    • message="My custom message"
    • />
    • </DxValidator>
    • </DxTextBox>
    • </template>
    •  
    • <script>
    • import 'devextreme/dist/css/dx.light.css';
    •  
    • import { DxTextBox } from 'devextreme-vue/text-box';
    • import {
    • DxValidator,
    • DxRangeRule
    • } from 'devextreme-vue/validator';
    •  
    • export default {
    • components: {
    • DxTextBox,
    • DxValidator,
    • DxRangeRule
    • }
    • }
    • </script>
  • Hide the message

    App.vue
    • <template>
    • <DxTextBox>
    • <DxValidator>
    • <DxRangeRule
    • message=""
    • />
    • </DxValidator>
    • </DxTextBox>
    • </template>
    •  
    • <script>
    • import 'devextreme/dist/css/dx.light.css';
    •  
    • import { DxTextBox } from 'devextreme-vue/text-box';
    • import {
    • DxValidator,
    • DxRangeRule
    • } from 'devextreme-vue/validator';
    •  
    • export default {
    • components: {
    • DxTextBox,
    • DxValidator,
    • DxRangeRule
    • }
    • }
    • </script>
  • Display the editor's name in the message

    App.vue
    • <template>
    • <DxTextBox>
    • <!-- The error message will be "Age is out of range" -->
    • <DxValidator name="Age">
    • <DxRangeRule />
    • </DxValidator>
    • </DxTextBox>
    • </template>
    •  
    • <script>
    • import 'devextreme/dist/css/dx.light.css';
    •  
    • import { DxTextBox } from 'devextreme-vue/text-box';
    • import {
    • DxValidator,
    • DxRangeRule
    • } from 'devextreme-vue/validator';
    •  
    • export default {
    • components: {
    • DxValidator,
    • DxRangeRule
    • }
    • }
    • </script>

min

Specifies the minimum value allowed for the validated value.

Type:

Date

|

Number

|

String

reevaluate

Indicates whether the rule should be always checked for the target value or only when the target value changes.

Type:

Boolean

Default Value: false

type

Specifies the rule type. Set it to "range" to use the RangeRule.