Dojo 表單校驗

時間  2019-11-09
標籤 dojo 表單 校驗 欄目 Dojo 简体版
原文   原文鏈接
tutorials/1015_form_validation/index.md

commit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586ecss

{% section 'first' %}git

表單校驗

Overview

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

前提

你能夠打開 codesandbox.io 上的教程 或者 下載 示例項目，而後運行 npm install。正則表達式

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

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

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

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

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

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

  1. 在 ApplicationContext 類中建立一個私有字段 _formErrors
  2. 在 ApplicationContext 中爲 _formErrors 建立一個 public 訪問器
  3. 更新 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。這裏有三個步驟：

  1. 在 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();
}

  2. 更新 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)
    };
}

  3. 在 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 操做中添加兩個獨立的檢查：

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程