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

ignoreEmptyValue

If set to true, empty values are valid.

Selector: ignore-empty-value
Type:

Boolean

Default Value: false

max

Specifies the maximum length allowed for the validated value.

Type:

Number

message

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

Type:

String

Default Value: 'The length of the value is not correct'

An error message can be specified as follows:

  • Hard-code the message

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

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

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

min

Specifies the minimum length allowed for the validated value.

Type:

Number

trim

Indicates whether or not to remove the Space characters from the validated value.

Type:

Boolean

Default Value: true

To keep the Space characters within the validated value, set this field to false.

type

Specifies the rule type. Set it to "stringLength" to use the StringLengthRule.