Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/ below:

Vue Validator Validation Rules | Vue Documentation

This section lists validation rules that can be used within the dxValidator.

View Demo

A custom validation rule that is checked asynchronously. Use async rules for server-side validation.

import { AsyncRule } from "devextreme/

"

A validation rule that requires validated values to match a specified expression.

import { CompareRule } from "devextreme/

"

To specify a comparison expression, define the comparisonTarget function. Validator compares values to this function's return value. To configure which comparison operator Validator compares values to, specify the comparisonType property.

$(function() {
    $('#password').dxTextBox({ ... });
    $('#confirm-password').dxTextBox({ ... })
        .dxValidator({
            type: 'compare',
            comparisonTarget() {
                const passwordTextBox = $('#password').dxTextBox('instance');
                if (passwordTextBox) {
                    return passwordTextBox.option('value');
                }
                return null;
            },
            message: 'Passwords do not match.',
        });
});

<dx-text-box
    [(value)]="password"
></dx-text-box>
<dx-text-box> 
    <dx-validator>
        <dxi-validation-rule 
            type="compare"
            [comparisonTarget]="passwordComparison"
            message="Passwords do not match."
        ></dxi-validation-rule>
    </dx-validator>
</dx-text-box>

export class AppComponent {
    password = '';
    passwordComparison = () => this.password;
}

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 { }

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

const password = ref('');

function passwordComparison() {
    return password.value;
}

</script>

<template>
    <DxTextBox
        v-model:value="password"
    />
    <DxTextBox>
        <DxValidator>
            <DxCompareRule
                :comparison-target="passwordComparison"
                message="Passwords do not match."
            />
        </DxValidator>
    </DxTextBox>
</template>

import React, { useCallback, useMemo, useRef, useState } from 'react';
import { TextBox, type TextBoxTypes } from 'devextreme-react/text-box';
import { Validator, CompareRule } from 'devextreme-react/validator';

const [password, setPassword] = useState('');
const passwordComparison = useCallback(() => password, [password]);

const onPasswordChanged = useCallback((e: TextBoxTypes.ValueChangeEvent) => {
    setPassword(e.value);
}, [setPassword])

function App() {
    return (
        <React.Fragment>
            <TextBox
                value={password}
                onValueChanged={onPasswordChanged}
            />
            <TextBox>
                <Validator>
                    <CompareRule
                        message="Passwords do not match."
                        comparisonTarget={passwordComparison}
                    />
                </Validator>
            </TextBox>
        </React.Fragment>
    );
}

View Demo

• Data Validation

A rule with custom validation logic.

import { CustomRule } from "devextreme/

"

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

import { EmailRule } from "devextreme/

"

View Demo

DevExtreme components use the following Email pattern:

pattern: /^[\d\w._-]+@[\d\w._-]+\.[\w]+$/i

• Data Validation

A validation rule that demands that the validated field has a numeric value.

import { NumericRule } from "devextreme/

"

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

import { PatternRule } from "devextreme/

"

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

View Demo

If you apply a pattern rule to a DateBox component, specify

so that the format of the validated value is a string.

• Data Validation

A validation rule that demands the target value be within the specified value range (including the range's end points).

import { RangeRule } from "devextreme/

"

To specify the range that the validated value must match, set the rule's min and max configuration properties. Note that the specified range can be on a date-time or numeric scale. To validate a value against a string length, use the stringLength rule.

View Demo

• Data Validation

A validation rule that demands that a validated field has a value.

import { RequiredRule } from "devextreme/

"

Use this rule type to ensure the target editor value is specified. The rule will be broken in the following cases.

• If the validated value is null, false, or undefined.
• If the specified value has a type that is not expected for the target field (e.g., a string for the DateBox UI component).

View Demo

• Data Validation

A validation rule that demands the target value length be within the specified value range (including the range's end points).

import { StringLengthRule } from "devextreme/

"

To specify the range that the validated value length must match, set the rule's min and max configuration properties.

This rule validates string values or the values that can be cast to a string.

View Demo

• Data Validation

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4