React Validator - EmailRule

A validation rule that demands that the validated field match the Email pattern.

Type:

Object

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: 'Email is invalid'

An error message can be specified as follows:

  • Hard-code the message

    App.vue
    • <template>
    • <DxTextBox>
    • <DxValidator>
    • <DxEmailRule
    • 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,
    • DxEmailRule
    • } from 'devextreme-vue/validator';
    •  
    • export default {
    • components: {
    • DxTextBox,
    • DxValidator,
    • DxEmailRule
    • }
    • }
    • </script>
  • Hide the message

    App.vue
    • <template>
    • <DxTextBox>
    • <DxValidator>
    • <DxEmailRule
    • 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,
    • DxEmailRule
    • } from 'devextreme-vue/validator';
    •  
    • export default {
    • components: {
    • DxTextBox,
    • DxValidator,
    • DxEmailRule
    • }
    • }
    • </script>
  • Display the editor's name in the message

    App.vue
    • <template>
    • <DxTextBox>
    • <!-- The error message will be "Mail address is invalid" -->
    • <DxValidator name="Mail address">
    • <DxEmailRule />
    • </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,
    • DxEmailRule
    • } from 'devextreme-vue/validator';
    •  
    • export default {
    • components: {
    • DxValidator,
    • DxEmailRule
    • }
    • }
    • </script>

type

Specifies the rule type. Set it to "email" to use the EmailRule.

Type:

String

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