溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
tutorials/1015_form_validation/index.md
commit 3e0f3ff1ed392163bc65e9cd015c4705cb9c586e
{% section 'first' %}
本教程將介紹如何在示例應用程序的上下文中處理基本的表單校驗。在 注入狀態 教程中，我們已經介紹了處理表單數據；我們將在這些概念的基礎上，在現有表單上添加校驗狀態和錯誤信息。本教程中，我們將構建一個支持動態的客戶端校驗和模擬的服務器端校驗示例。
你可以打開 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 類中' %}
在練習中，完成以下三步：
_formErrorsApplicationContext 中為 _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 %}
{% 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 %}
{% 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 %}
{% 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 的對象配置錯誤信息你可以在 codesandbox.io 中打開完整示例或下載項目。
{% section 'last' %}
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
