Vue Validator - PatternRule

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

View Demo

See Also

• Data Validation

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;