Dojo表单校验

　　

教程/1015 _form_validation/index.md

　　

提交3 e0f3ff1ed392163bc65e9cd015c4705cb9c586e 　　 　　

{%节“第一”%}

　　

表单校验

　　

概述 　　

本教程将介绍如何在示例应用程序的上下文中处理基本的表单校验。在注入状态教程中,我们已经介绍了处理表单数据,我们将在这些概念的基础上,在现有表单上添加校验状态和错误信息。本教程中,我们将构建一个支持动态的客户端校验和模拟的服务器端校验示例。

　　

前提

　　

你可以打开codesandbox。io上的教程或者下载示例项目,然后运行<代码> npm安装。

　　

本教程假设你已经学习了表单部件教程和状态管理教程。

　　

{%部分%}

　　

创建存储表单错误的对象

　　

{%任务'在应用程序上下文中添加表单错误。%}

　　

现在,错误对象应该对应存在于<代码> WorkerForm。ts 和<代码> ApplicationContext。ts 文件中的<代码> WorkerFormData> 　　

{%指令'为<代码> WorkerForm。ts 文件中创建一个<代码> WorkerFormErrors 接口' %}

　　

{% include_codefile '演示/完成/biz-e-corp/src/widget/WorkerForm。ts的行:15 - 19 %}

　　

 <代码类=" language-ts ">出口接口WorkerFormErrors {
　　firstName吗?:布尔;
　　姓呢?:布尔;
　　电子邮件?:布尔;
　　} 

　　

将<代码> WorkerFormErrors> 　　

{%指令'接下来将<代码> formErrors 方法添加到<代码> ApplicationContext> 　　

在练习中,完成以下三步:

　　

　　<李>在ApplicationContext类中创建一个私有字段<代码> _formErrors 　　<李>在<代码> ApplicationContext> _formErrors 创建一个公共访问器李 　　<李>更新<代码> WorkerFormContainer。ts 文件中的<代码> getproperty 函数,支持传入新的错误对象李 　　

　　

提示:查看<代码> ApplicationContext> _formData 私有字段是如何使用的。可按照相同的流程添加<代码> _formErrors> 　　

确保<代码> ApplicationContext。ts> 　　

 <代码类=" language-ts ">//修改导入包括WorkerFormErrors
　　进口{WorkerFormData, WorkerFormErrors}”。/widget/WorkerForm ';//私有字段
　　私人_formErrors: WorkerFormErrors={};//公共getter
　　得到formErrors (): WorkerFormErrors {
　　返回this._formErrors;
　　} 

　　

<代码> WorkerFormContainer。ts> getproperty 函数:

　　

 <代码类=" language-ts ">函数getproperty(注入:ApplicationContext,属性:任何){
　　const {
　　formData,
　　formErrors,
　　formInput:>出口界面WorkerFormProperties {
　　formData: WorkerFormData;
　　formErrors: WorkerFormErrors;>私人_validateInput(输入:Partial 

　　

现在,我们将在每一个<代码> onInput 事件中直接调用校验函数来测试它。将下面一行代码添加到<代码> ApplicationContext。ts> formInput> 　　

 <代码类=" language-ts ">。_formErrors=deepAssign ({}。_formErrors this._validateInput(输入)); 

　　

{%指令'更新<代码> WorkerForm> 　　

至此,<代码> WorkerForm> formErrors 属性中存着每个形式字段的校验状态,每次调用<代码> onInput 事件时都会更新校验状态,剩下的就是将有效/无效属性传给所有输入部件。幸运的是,Dojo的<代码> TextInput> 无效代码>

Dojo表单校验