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

ignoreEmptyValue

If set to true, empty values are valid.

Type:

Boolean

Default Value: true

message

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

Type:

String

Default Value: 'Value does not match pattern'

You can configure an error message in the following ways:

  • Specify a hard-coded message:

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    type: "pattern",
    message: "My custom message"
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <dx-validator>
        <dxi-validator-validation-rule
            type="pattern"
            message="My custom message">
        </dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    import { DxValidatorModule, DxTextBoxModule } from 'devextreme-angular';
// ...

@NgModule({
    imports: [
        DxTextBoxModule,
        DxValidatorModule,
    ],
})
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxPatternRule
                message="My custom message"
            />
        </DxValidator>
    </DxTextBox>
</template>

<script setup lang="ts">
import { DxTextBox } from 'devextreme-vue/text-box';
import { DxValidator, DxPatternRule } from 'devextreme-vue/validator';

</script>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, PatternRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator>
                <PatternRule
                    message="My custom message"
                />
            </Validator>
        </TextBox>
    );
}

  • Hide the message:

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    type: "pattern",
    message: ""
});
    Angular
    app.component.html
    <dx-text-box>
    <dx-validator>
        <dxi-validator-validation-rule
            type="pattern"
            message="">
        </dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxPatternRule
                message=""
            />
        </DxValidator>
    </DxTextBox>
</template>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, PatternRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator>
                <PatternRule
                    message=""
                />
            </Validator>
        </TextBox>
    );
}

  • Display the editor's name in the default message (for instance, "Phone number does not match pattern"):

    jQuery
    index.js
    $("#textBox").dxTextBox({
    // ...
}).dxValidator({
    name: "Phone number",
    validationRules: [{
        type: "pattern",
    }],
});
    Angular
    app.component.html
    <dx-text-box>
    <dx-validator name="Phone number">
        <dxi-validator-validation-rule
            type="pattern"
        ></dxi-validator-validation-rule>
    </dx-validator>
</dx-text-box>
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator name="Phone number">
            <DxPatternRule />
        </DxValidator>
    </DxTextBox>
</template>
    React
    App.tsx
    import { TextBox } from 'devextreme-react/text-box';
import { Validator, PatternRule } from 'devextreme-react/validator';

function App() {
    return (
        <TextBox>
            <Validator name="Phone number">
                <PatternRule />
            </Validator>
        </TextBox>
    );
}

pattern

Specifies the regular expression that the validated value must match.

Type:

RegExp

|

String

NOTE

If your pattern is a string, escape the backslash. For example, the following pattern matches a character other than white space:

Code
pattern: '\\S'

type

Specifies the rule type. Set it to "pattern" to use the PatternRule.

Type:

ValidationRuleType