Vue Validator - PatternRule

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

Type:

Object

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

View Demo

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'

An error message can be specified as follows:

  • Hard-code the message

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

import { DxValidatorModule,
         DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        DxTextBoxModule,
        BrowserModule,
        DxValidatorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxPatternRule
                message="My custom message"
            />
        </DxValidator>
    </DxTextBox>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxPatternRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxPatternRule
    }
}
</script>
    React
    App.js
    import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    PatternRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator>
                    <PatternRule
                        message="My custom message" />
                </Validator>
            </TextBox>
        );
    }
}
export default App;

  • Hide the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            type: "pattern",
            message: ""
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <dx-validator>
        <dxi-validation-rule 
            type="pattern" 
            message="">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

 import { DxValidatorModule,
          DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxValidatorModule,
        DxTextBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <DxValidator>
            <DxPatternRule
                message=""
            />
        </DxValidator>
    </DxTextBox>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxPatternRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxPatternRule
    }
}
</script>
    React
    App.js
    import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    PatternRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                <Validator>
                    <PatternRule
                        message="" />
                </Validator>
            </TextBox>
        );
    }
}
export default App;

  • Display the editor's name in the message

    jQuery
    index.js
    $(function() {
    $("#textBox").dxTextBox({ ... })
        .dxValidator({
            name: "Phone number", // The error message will be "Phone number does not match pattern"
            validationRules: [{
                type: "pattern"
            }]
        });
});
    Angular
    app.component.html
    app.module.ts
    <dx-text-box>
    <!-- The error message will be "Phone number does not match pattern" -->
    <dx-validator name="Phone number">
        <dxi-validation-rule 
            type="pattern">
        </dxi-validation-rule>
    </dx-validator>
</dx-text-box>
    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxValidatorModule,
         DxTextBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxValidatorModule,
        DxTextBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
    Vue
    App.vue
    <template>
    <DxTextBox>
        <!-- The error message will be "Phone number does not match pattern" -->
        <DxValidator name="Phone number">
            <DxPatternRule />
        </DxValidator>
    </DxTextBox>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTextBox } from 'devextreme-vue/text-box';
import {
    DxValidator,
    DxPatternRule
} from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator,
        DxPatternRule
    }
}
</script>
    React
    App.js
    import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TextBox } from 'devextreme-react/text-box';
import {
    Validator,
    PatternRule
} from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <TextBox>
                {/* The error message will be "Phone number does not match pattern" */}
                <Validator name="Phone number">
                    <PatternRule} />
                </Validator>
            </TextBox>
        );
    }
}

export default App;

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:

pattern: '\\S'

type

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

Type:

String

Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'