Angular Validator - PatternRule
Type:
To specify the regular expression that the validated field must match, set the rule's pattern configuration option.
See Also
message
Type:
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.htmlapp.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.jsimport 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.htmlapp.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.jsimport 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.htmlapp.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.jsimport 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;
type
Type:
Accepted Values: 'required' | 'numeric' | 'range' | 'stringLength' | 'custom' | 'compare' | 'pattern' | 'email' | 'async'
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.