tutorials/1015_form_validation/index.md

commit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586e

{% section 'first' %}

表單校驗

Overview

本教程將介紹如何在示例應用程序的上下文中處理基本的表單校驗。在注入狀態教程中，我們已經介紹了處理表單數據；我們將在這些概念的基礎上，在現有表單上添加校驗狀態和錯誤信息。本教程中，我們將構建一個支持動態的客戶端校驗和模擬的服務器端校驗示例。

前提

你可以打開 codesandbox.io 上的教程或者下載示例項目，然後運行 npm install。

本教程假設你已經學習了表單部件教程和狀態管理教程。

{% section %}

創建存儲表單錯誤的對象

{% task '在應用程序上下文中添加表單錯誤。' %}

現在，錯誤對象應該對應存在於 WorkerForm.ts 和 ApplicationContext.ts 文件中的 WorkerFormData。這種錯誤配置有多種處理方式，一種情況是爲單個 input 的多個校驗步驟分別設置錯誤信息。現在我們將從最簡單的情況開始，即爲每個 input 添加布爾類型的 valid 和 invalid 狀態。

{% instruction '爲 WorkerForm.ts 文件中創建一個 WorkerFormErrors 接口' %}

{% include_codefile 'demo/finished/biz-e-corp/src/widgets/WorkerForm.ts' lines:15-19 %}

export interface WorkerFormErrors {
    firstName?: boolean;
    lastName?: boolean;
    email?: boolean;
}

將 WorkerFormErrors 中的屬性定義爲可選，這樣我們就可以爲 form 中的字段創建三種狀態：未校驗的、有效的和無效的。

{% instruction '接下來將 formErrors 方法添加到 ApplicationContext 類中' %}

在練習中，完成以下三步：

在 ApplicationContext 類中創建一個私有字段 _formErrors
在 ApplicationContext 中爲 _formErrors 創建一個 public 訪問器
更新 WorkerFormContainer.ts 文件中的 getProperties 函數，支持傳入新的錯誤對象

提示：查看 ApplicationContext 類中已有的 _formData 私有字段是如何使用的。可按照相同的流程添加 _formErrors 變量。

確保 ApplicationContext.ts 中存在以下代碼：

// modify import to include WorkerFormErrors
import { WorkerFormData, WorkerFormErrors } from './widgets/WorkerForm';

// private field
private _formErrors: WorkerFormErrors = {};

// public getter
get formErrors(): WorkerFormErrors {
    return this._formErrors;
}

WorkerFormContainer.ts 中修改後的 getProperties 函數：

function getProperties(inject: ApplicationContext, properties: any) {
    const {
        formData,
        formErrors,
        formInput: onFormInput,
        submitForm: onFormSave
    } = inject;

    return {
        formData,
        formErrors,
        onFormInput: onFormInput.bind(inject),
        onFormSave: onFormSave.bind(inject)
    };
}

{% instruction '最後，修改 WorkerForm.ts 中的 WorkerFormProperties 來接收應用程序上下文傳入的 formErrors 對象：' %}

export interface WorkerFormProperties {
    formData: WorkerFormData;
    formErrors: WorkerFormErrors;
    onFormInput: (data: Partial<WorkerFormData>) => void;
    onFormSave: () => void;
}

{% section %}

爲 form 表單輸入框綁定校驗

{% task '在 onInput 中執行校驗' %}

現在，我們已經可以在應用程序狀態中存儲表單錯誤，並將這些錯誤傳給 form 表單部件。但 form 表單依然缺少真正的用戶輸入校驗；爲此，我們需要溫習正則表達式並寫一個基本的校驗函數。

{% instruction '在 ApplicationContext.ts 中創建一個私有方法 _validateInput' %}

跟已存在的 formInput 函數相似，應該爲 _validateInput 傳入 Partial 類型的 WorkerFormData 輸入對象。校驗函數應該返回一個 WorkerFormErrors 對象。示例應用程序中只展示了最基本的校驗檢查——示例中郵箱地址的正則表達式模式匹配簡潔但有不夠完備。你可以用更健壯的郵箱測試來代替，或者做其它修改，如檢查第一個名字和最後一個名字的最小字符數。

{% include_codefile 'demo/finished/biz-e-corp/src/ApplicationContext.ts' lines:32-50 %}

private _validateInput(input: Partial<WorkerFormData>): WorkerFormErrors {
    const errors: WorkerFormErrors = {};

    // validate input
    for (let key in input) {
        switch (key) {
            case 'firstName':
                errors.firstName = !input.firstName;
                break;
            case 'lastName':
                errors.lastName = !input.lastName;
                break;
            case 'email':
                errors.email = !input.email || !input.email.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/);
        }
    }

    return errors;
}

現在，我們將在每一個 onInput 事件中直接調用校驗函數來測試它。將下面一行代碼添加到 ApplicationContext.ts 中的 formInput 中：

this._formErrors = deepAssign({}, this._formErrors, this._validateInput(input));

{% instruction '更新 WorkerForm 的渲染方法來顯示校驗狀態' %}

至此，WorkerForm 部件的 formErrors 屬性中存着每個 form 字段的校驗狀態，每次調用 onInput 事件時都會更新校驗狀態。剩下的就是將 valid/invalid 屬性傳給所有輸入部件。幸運的是，Dojo 的 TextInput 部件包含一個 invalid 屬性，可用於在 DOM 節點上設置 aria-invalid 屬性，並切換可視化樣式類。

WorkerForm.ts 中更新後的渲染方法，應該是將每個 form 字段部件的上 invalid 屬性與 formErrors 對應上。我們也爲 form 元素添加了一個 novalidate 屬性來禁用原生瀏覽器校驗。

protected render() {
    const {
        formData: { firstName, lastName, email },
        formErrors
    } = this.properties;

    return v('form', {
        classes: this.theme(css.workerForm),
        novalidate: 'true',
        onsubmit: this._onSubmit
    }, [
        v('fieldset', { classes: this.theme(css.nameField) }, [
            v('legend', { classes: this.theme(css.nameLabel) }, [ 'Name' ]),
            w(TextInput, {
                key: 'firstNameInput',
                label:'First Name',
                labelHidden: true,
                placeholder: 'Given name',
                value: firstName,
                required: true,
                invalid: this.properties.formErrors.firstName,
                onInput: this.onFirstNameInput
            }),
            w(TextInput, {
                key: 'lastNameInput',
                label: 'Last Name',
                labelHidden: true,
                placeholder: 'Surname name',
                value: lastName,
                required: true,
                invalid: this.properties.formErrors.lastName,
                onInput: this.onLastNameInput
            })
        ]),
        w(TextInput, {
            label: 'Email address',
            type: 'email',
            value: email,
            required: true,
            invalid: this.properties.formErrors.email,
            onInput: this.onEmailInput
        }),
        w(Button, {}, [ 'Save' ])
    ]);
}

現在，當你在瀏覽器中查看應用程序時，每個表單字段的邊框顏色會隨着你鍵入的內容而變化。接下來我們將添加錯誤信息，並更新 onInput ，讓檢驗只在第一次失去焦點（blur）事件後發生。

{% section %}

擴展 TextInput

{% task '創建一個錯誤消息' %}

簡單的將 form 字段的邊框顏色設置爲紅色或綠色並不能告知用戶更多信息——我們需要爲無效狀態添加一些錯誤消息文本。最基本要求，我們的錯誤文本必須與 form 中的 input 關聯，可設置樣式和可訪問。一個包含錯誤信息的 form 表單字段看起來應該是這樣的：

v('div', { classes: this.theme(css.inputWrapper) }, [
    w(TextInput, {
        ...
        aria: {
            describedBy: this._errorId
        },
        onInput: this._onInput
    }),
    invalid === true ? v('span', {
        id: this._errorId,
        classes: this.theme(css.error),
        'aria-live': 'polite'
    }, [ 'Please enter valid text for this field' ]) : null
])

通過 aria-describeby 屬性將錯誤消息與文本輸入框關聯，並使用 aria-live 屬性來確保當它添加到 DOM 或發生變化後能被讀取到。將輸入框和錯誤信息包裹在一個 <div> 中，則在需要時可相對輸入框來獲取到錯誤信息的位置。

{% instruction '擴展 TextInput，創建一個包含錯誤信息和 onValidate 方法的 ValidatedTextInput 部件' %}

爲多個文本輸入框重複創建相同的錯誤消息樣板明顯是十分囉嗦的，所以我們將擴展 TextInput。這還將讓我們能夠更好的控制何時校驗，例如，也可以添加給 blur 事件。現在，只是創建一個 ValidatedTextInput 部件，它接收與 TextInput 相同的屬性接口，但多了一個 errorMessage 字符串和 onValidate 方法。它應該返回與上面相同的節點結構。

你也需要創建包含 error 和 inputWrapper 樣式類的 validatedTextInput.m.css 文件，儘管我們會棄用本教程中添加的特定樣式：

.inputWrapper {}

.error {}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { TypedTargetEvent } from '@dojo/framework/widget-core/interfaces';
import { v, w } from '@dojo/framework/widget-core/d';
import uuid from '@dojo/framework/core/uuid';
import { ThemedMixin, theme } from '@dojo/framework/widget-core/mixins/Themed';
import TextInput, { TextInputProperties } from '@dojo/widgets/text-input';
import * as css from '../styles/validatedTextInput.m.css';

export interface ValidatedTextInputProperties extends TextInputProperties {
    errorMessage?: string;
    onValidate?: (value: string) => void;
}

export const ValidatedTextInputBase = ThemedMixin(WidgetBase);

@theme(css)
export default class ValidatedTextInput extends ValidatedTextInputBase<ValidatedTextInputProperties> {
    private _errorId = uuid();

    protected render() {
        const {
            disabled,
            label,
            maxLength,
            minLength,
            name,
            placeholder,
            readOnly,
            required,
            type = 'text',
            value,
            invalid,
            errorMessage,
            onBlur,
            onInput
        } = this.properties;

        return v('div', { classes: this.theme(css.inputWrapper) }, [
            w(TextInput, {
                aria: {
                    describedBy: this._errorId
                },
                disabled,
                invalid,
                label,
                maxLength,
                minLength,
                name,
                placeholder,
                readOnly,
                required,
                type,
                value,
                onBlur,
                onInput
            }),
            invalid === true ? v('span', {
                id: this._errorId,
                classes: this.theme(css.error),
                'aria-live': 'polite'
            }, [ errorMessage ]) : null
        ]);
    }
}

你可能已注意到，我們創建的 ValidatedTextInput 包含一個 onValidate 屬性，但我們還沒有用到它。在接下來的幾步中，這將變得非常重要，因爲我們可以對何時校驗做更多的控制。現在，只是把它當做一個佔位符。

{% instruction '在 WorkerForm 中使用 ValidatedTextInput' %}

現在 ValidatedTextInput 已存在，讓我們在 WorkerForm 中導入它並替換掉 TextInput，並在其中寫一些錯誤消息文本：

Import 語句塊

{% include_codefile 'demo/finished/biz-e-corp/src/widgets/WorkerForm.ts' lines:1-7 %}

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { TypedTargetEvent } from '@dojo/framework/widget-core/interfaces';
import { v, w } from '@dojo/framework/widget-core/d';
import { ThemedMixin, theme } from '@dojo/framework/widget-core/mixins/Themed';
import Button from '@dojo/widgets/button';
import ValidatedTextInput from './ValidatedTextInput';
import * as css from '../styles/workerForm.m.css';

render() 方法內部

{% include_codefile 'demo/finished/biz-e-corp/src/widgets/WorkerForm.ts' lines:72-108 %}

v('fieldset', { classes: this.theme(css.nameField) }, [
    v('legend', { classes: this.theme(css.nameLabel) }, [ 'Name' ]),
    w(ValidatedTextInput, {
        key: 'firstNameInput',
        label: 'First Name',
        labelHidden: true,
        placeholder: 'Given name',
        value: firstName,
        required: true,
        onInput: this.onFirstNameInput,
        onValidate: this.onFirstNameValidate,
        invalid: formErrors.firstName,
        errorMessage: 'First name is required'
    }),
    w(ValidatedTextInput, {
        key: 'lastNameInput',
        label: 'Last Name',
        labelHidden: true,
        placeholder: 'Surname name',
        value: lastName,
        required: true,
        onInput: this.onLastNameInput,
        onValidate: this.onLastNameValidate,
        invalid: formErrors.lastName,
        errorMessage: 'Last name is required'
    })
]),
w(ValidatedTextInput, {
    label: 'Email address',
    type: 'email',
    value: email,
    required: true,
    onInput: this.onEmailInput,
    onValidate: this.onEmailValidate,
    invalid: formErrors.email,
    errorMessage: 'Please enter a valid email address'
}),

{% task '創建從 onFormInput 中提取出來的 onFormValidate 方法' %}

{% instruction '傳入 onFormValidate 方法來更新上下文' %}

現在校驗邏輯毫不客氣的躺在 ApplicationContext.ts 中的 formInput 中。現在我們將它擡到自己的 formValidate 函數中，並參考 onFormInput 模式，將 onFormValidate 傳給 WorkerForm。這裏有三個步驟：

在 ApplicationContext.ts 中添加 formValidate 方法，並將 formInput 中更新 _formErrors 代碼放到 formValidate 中：

public formValidate(input: Partial<WorkerFormData>): void {
    this._formErrors = deepAssign({}, this._formErrors, this._validateInput(input));
    this._invalidator();
}

public formInput(input: Partial<WorkerFormData>): void {
    this._formData = deepAssign({}, this._formData, input);
    this._invalidator();
}

更新 WorkerFormContainer，將 formValidate 傳給 onFormValidate：

function getProperties(inject: ApplicationContext, properties: any) {
    const {
        formData,
        formErrors,
        formInput: onFormInput,
        formValidate: onFormValidate,
        submitForm: onFormSave
    } = inject;

    return {
        formData,
        formErrors,
        onFormInput: onFormInput.bind(inject),
        onFormValidate: onFormValidate.bind(inject),
        onFormSave: onFormSave.bind(inject)
    };
}

在 WorkerForm 中先在 WorkerFormProperties 接口中添加 onFormValidate:

export interface WorkerFormProperties {
    formData: WorkerFormData;
    formErrors: WorkerFormErrors;
    onFormInput: (data: Partial<WorkerFormData>) => void;
    onFormValidate: (data: Partial<WorkerFormData>) => void;
    onFormSave: () => void;
}

然後爲每個 form 字段的校驗創建內部方法，並將這些方法（如 onFirstNameValidate）傳給每個 ValidatedTextInput 部件。這將使用與 onFormInput、onFirstNameInput、onLastNameInput 和 onEmailInput 相同的模式：

protected onFirstNameValidate(firstName: string) {
    this.properties.onFormValidate({ firstName });
}

protected onLastNameValidate(lastName: string) {
    this.properties.onFormValidate({ lastName });
}

protected onEmailValidate(email: string) {
    this.properties.onFormValidate({ email });
}

{% instruction '在 ValidatedTextInput 中調用 onValidate' %}

你可能已注意到，當用戶輸入事件發生後，form 表單不再校驗。這是因爲我們已不在 ApplicationContext.ts 的 formInput 中處理校驗，但我們還沒有將校驗添加到其它地方。要做到這一點，我們在 ValidateTextInput 中添加以下私有方法：

private _onInput(value: string) {
    const { onInput, onValidate } = this.properties;
    onInput && onInput(value);
    onValidate && onValidate(value);
}

現在將它傳給 TextInput，替換掉 this.properties.onInput：

w(TextInput, {
    aria: {
        describedBy: this._errorId
    },
    disabled,
    invalid,
    label,
    maxLength,
    minLength,
    name,
    placeholder,
    readOnly,
    required,
    type,
    value,
    onBlur,
    onInput: this._onInput
})

表單錯誤功能已恢復，併爲無效字段添加了錯誤消息。

{% section %}

使用 blur 事件

{% task '僅在第一次 blur 事件後開始校驗' %}

現在只要用戶開始在字段中輸入就會顯示校驗信息，這是一種不友好的用戶體驗。在用戶開始輸入郵箱地址時就看到 “invalid email address” 是沒有必要的，也容易分散注意力。更好的模式是將校驗推遲到第一次 blur 事件之後，然後在 input 事件中開始更新校驗信息。

{% aside 'Blur 事件' %}
當元素失去焦點後會觸發 blur 事件。
{% endaside %}

現在已在 ValidatedTextInput 部件中調用了 onValidate，這是可以實現的。

{% instruction '創建一個私有的 _onBlur 函數，它會調用 onValidate' %}

在 ValidatedTextInput.ts 文件中:

private _onBlur(value: string) {
    const { onBlur, onValidate } = this.properties;
    onValidate && onValidate(value);
    onBlur && onBlur();
}

我們僅需在第一次 blur 事件之後使用這個函數，因爲隨後的校驗交由 onInput 處理。下面的代碼將根據輸入框之前是否已校驗過，來使用 this._onBlur 或 this.properties.onBlur：

{% include_codefile 'demo/finished/biz-e-corp/src/widgets/ValidatedTextInput.ts' lines:50-67 %}

w(TextInput, {
    aria: {
        describedBy: this._errorId
    },
    disabled,
    invalid,
    label,
    maxLength,
    minLength,
    name,
    placeholder,
    readOnly,
    required,
    type,
    value,
    onBlur: typeof invalid === 'undefined' ? this._onBlur : onBlur,
    onInput: this._onInput
}),

現在只剩下修改 _onInput，如果字段已經有一個校驗狀態，則調用 onValidate:

{% include_codefile 'demo/finished/biz-e-corp/src/widgets/ValidatedTextInput.ts' lines:24-31 %}

private _onInput(value: string) {
    const { invalid, onInput, onValidate } = this.properties;
    onInput && onInput(value);

    if (typeof invalid !== 'undefined') {
        onValidate && onValidate(value);
    }
}

嘗試輸入一個郵箱地址來演示這些變化；它應該只在第一次離開 form 字段之後顯示錯誤信息（或綠色邊框），而在接下來的編輯中將立即觸發校驗。

{% section %}

在提交時校驗

{% task '創建一個模擬的服務器端校驗，以處理提交的 form 表單' %}

到目前爲止，我們的代碼給用戶提供了友好提示，但並不能防止我們將無效數據提交到我們的 worker 數組中。我們需要在 submitForm 操作中添加兩個獨立的檢查：

如果已存在的校驗函數捕獲到任何錯誤，則立即提交失敗。
執行額外檢查（本示例中我們將檢查郵箱唯一性）。這是我們在真正的應用程序中加入服務器端校驗的地方。

{% instruction '在 ApplicationContext.ts 中創建一個私有方法 _validateOnSubmit' %}

新增的 _validateOnSubmit 方法應該從對所有 _formData 運行已存在的輸入校驗開始，然後在存在任一錯誤後返回 false：

private _validateOnSubmit(): boolean {
    const errors = this._validateInput(this._formData);
    this._formErrors = deepAssign({ firstName: true, lastName: true, email: true }, errors);

    if (this._formErrors.firstName || this._formErrors.lastName || this._formErrors.email) {
        console.error('Form contains errors');
        return false;
    }

    return true;
}

接下來我們添加一個檢查：假設每個工人的郵箱必須是唯一的，所以我們將在 _workerData 數組中測試輸入的郵箱地址是否已存在。在現實中安全起見，這個檢查運行在服務器端：

{% include_codefile 'demo/finished/biz-e-corp/src/ApplicationContext.ts' lines:53-70 %}

private _validateOnSubmit(): boolean {
    const errors = this._validateInput(this._formData);
    this._formErrors = deepAssign({ firstName: true, lastName: true, email: true }, errors);

    if (this._formErrors.firstName || this._formErrors.lastName || this._formErrors.email) {
        console.error('Form contains errors');
        return false;
    }

    for (let worker of this._workerData) {
        if (worker.email === this._formData.email) {
            console.error('Email must be unique');
            return false;
        }
    }

    return true;
}

修改完 ApplicationContext.ts 中的 submitForm 函數後，只有有效的工人數據才能提交成功。我們也需要在成功提交後清空 _formErrors 和 _formData：

{% include_codefile 'demo/finished/biz-e-corp/src/ApplicationContext.ts' lines:82-92 %}

public submitForm(): void {
    if (!this._validateOnSubmit()) {
        this._invalidator();
        return;
    }

    this._workerData = [ ...this._workerData, this._formData ];
    this._formData = {};
    this._formErrors = {};
    this._invalidator();
}

{% section %}

總結

本教程不可能涵蓋所有可能用例，但是存儲、注入和顯示校驗狀態的基本模式，爲創建複雜的表單校驗提供了堅實的基礎。接下來將包含以下步驟：

爲傳遞給 WorkerForm 的對象配置錯誤信息
創建一個 toast 來顯示提交時的錯誤
爲一個 form 字段添加多個校驗步驟

你可以在 codesandbox.io 中打開完整示例或下載項目。

{% section 'last' %}

Dojo 表單校驗

表單校驗

Overview

前提

創建存儲表單錯誤的對象

爲 form 表單輸入框綁定校驗

擴展 TextInput

使用 blur 事件

在提交時校驗

總結

如何使用 JS 判斷用戶是否處於活躍狀態

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

Dojo Build 簡介

Dojo 進階

Dojo 簡介

Dojo Store 簡介

Dojo Store 概念詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結