weixin_34220834
weixin_34220834

Dojo 表单校验

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 类中' %}

在练习中，完成以下三步：

  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) => 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): 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 或发生变化后能被读取到。将输入框和错误信息包裹在一个

中，则在需要时可相对输入框来获取到错误信息的位置。

{% 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 {
    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): void {
    this._formErrors = deepAssign({}, this._formErrors, this._validateInput(input));
    this._invalidator();
}

public formInput(input: Partial): 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) => void;
    onFormValidate: (data: Partial) => 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' %}

你可能感兴趣的:(Dojo 表单校验)

  • 开源项目低代码表单FormCreate中ElementPlus表单使用校验规则示例 低代码研究员 FormCreate开源低代码低代码表单动态表单FormCreate低代码设计器
    在开源项目低代码表单FormCreate中，可以通过validate配置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件，都支持表单校验。本文将详细介绍验证规则的使用方法，并提供一些示例来帮助您更好地理解和应用这些功能。源码地址:Github|Gitee基本验证规则validate配置项允许您为每个表单字段定义多种验证规则。每个规则都是一个对象，您可以通过设置不同的属性来控制验证
  • Flutter框架高阶——Window应用程序设置窗体窗口背景完全透明 木颤简叶 Flutterflutterwindows开发语言后端笔记c++microsoft
    文章目录1.修改main.cpp1）C++与Win32API2）EnableTransparency()3）中文注释2.编写Flutter代码1）bitsdojo_window2）window_manager3）区别对比4）同时使用（1）设置初始化代码（2）处理冲突和集成Flutter的文件结构如下，找到图中的main.cpp的文件1.修改main.cppmain.cpp文件中的代码应该和下面差不
  • 【Antd】Form.List的强大之处，Form.List使用方式细微讲解 hzxOnlineOk listwindows服务器
    设想场景有时候我们会遇到一些复杂的需求，需要用Table嵌套Form.List，逐层嵌套渲染表格表单列表，填写完毕后提交的复杂需求。由于表单项分布在数据的各个层级里，因此，如何回填表单值就成了一个比较棘手的问题，处理不好，很容易引发一些逻辑bug（例如表单重置后，数据回填、表单校验异常等）如何处理数据其实，antd的form实例对象很强，只需要提供给它指定的field和索引i组成的formName
  • Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南 陈马登Morden
    本文还有配套的精品资源，点击获取简介：Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目，专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用，学习者将掌握JavaScript基础语法和Dojo工具集的使用，涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理
  • 登录请求 amanohina
    表单校验通过Element中Form组件的表单验证功能进行验证功能中需要使用的属性需要给绑定的属性：model：绑定表单数据的对象rules：表单验证对象，内部的属性名对应要验证的的prop（属性设置为数组，内部可以同时制定多条规则）required：是否必选message：验证失败的提示信息trigger：触发方式，比如bulr就是焦点时触发校验max：最大长度min：最小长度pattern：验
  • android studio ignore assets pattern,如何解决自动忽略资源文件夹中以“_”（下划线）开头的文件/文件夹... weixin_39848998 androidstudioignoreassetspattern
    我想在eclipse提供的Android模拟器上部署PhoneGap应用程序。我决定使用DojoToolkit，它严重依赖于“_”约定(启动带有“_”的文件/文件夹意味着这是一个私有/内部模块)。基本上问题是，在部署应用程序时，每个以“_”开头的文件/文件夹都会被省略。这完全搞砸了，Dojo工具包作为exptected无法正常工作。有没有办法来解决这个问题？答案首先明星这个issue所以谷歌将最终
  • arcgis for javascript 帮助 萝卜耳朵 ArcGISServerArcgisJavascript
    JSAPI3.4的要求à(1)IE9或以上版本否则dijit1.8.3不匹配1.如何发布ArcgisJavascriptAPI应用0.准备工作：(1).有web应用:(2).有jsapi开发包1.将jsapi目录拷贝到自己的Web应用目录下2.在页面中添加引用(2个css,1个js)3.在页面中添加加载地图的脚本dojo.ready(function(){mapObj=newesri.Map("m
  • el-form表单在循环里如何写rules表单校验,解决办法 Cheng Lucky vue.js前端javascript
    el-form表单在循环里如何写rules表单校验,解决办法在日常开发中我们经常可以遇到在form中循环嵌套多个的情况比如点击加减新增删除并且还需要校验表单如何写呢?实现办法1.html(举例)contractFeesForm为总数据源这里的rules需动态生成这里我们既然是在循环内在每个item上绑定的prop就不能是固定写死的不然没办法进行表单校验就需要写成xxxx[0,1,2......].
  • Vue.js学习笔记（六）element表单校验规则 你看我像是会的样子吗？ Vue.jselementvue.js学习笔记elementui
    文章目录前言一、表单验证的作用是什么？二、如何使用？1.普通字段2.对象3.对象数组4.自定义校验规则总结前言记录不同情况下的表单字段校验情况。一、表单验证的作用是什么？在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。二、如何使用？Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。一个字段可以有多个
  • Vue项目-Table添加Form表单校验 呆呆的小草 Vuevue.jselementuijavascript
    一、HTML新增表格数据{{row.name}}{{row.age}}{{row.sex}}删除任务信息生成二、JS//------------------->-------------------import{ref,reactive,onMounted,nextTick}from"vue";import{ElMessage}from"element-plus";//--------------
  • 微信小程序-npm扩展工具包 勿语& npm微信小程序
    pubsub-js(用于组件间的通信)miniprogram-computed（扩展计算属性）mobx-miniprogram-bindings（扩展统一状态管理仓库）mina-request(网络请求工具包)vantweapp(UI组件库)async-validator(表单校验工具包)
  • 设置ant-design vue表单a-input输入类型为数字 梅秃头 前端开发vue.jsjavascript前端
    新增/更新表单时，要求表单输入框类型数字类型，而后端实体类该属性为字符类型，以下操作可以帮助你实现在v-model后面添加类型限制，即number在表单校验中添加type:'number'rules:{age:[{type:'number',required:true,message:'年龄必须为数字类型',trigger:'change'}],}这时，新增时表单的数据类型校验是没问题了，但是更新
  • angular中的input防抖使用 ~ climber ~ angular踩坑
    一周复盘。学而时习之。。。复习一下节流与防抖，关于二者的概念，网上各种说辞。防抖：在高频触发回调函数时，防抖操作使回调函数在一定时间间隔内，再次触发会清空定时器，并重新计时；计时结束后输出一次结果。核心在于，在短时间内大量触发同一事件时，只会执行一次回调函数。避免把一次事件误认为多次。场景：在表单校验的时候，不加防抖，依次输入name，就会分成n，na，nam,name四次发出请求；而添加防抖，设
  • ArcGIS API for JavaScript 4.X 本地部署(js，字体) 无心使然云中漫步 arcgisarcgisjavascript
    0目录（4.19）/4.19/1修改文件1.1init.js编辑器打开/4.19/init.js搜索文本[HOSTNAME_AND_PATH_TO_JSAPI]，然后将其连同前面的https://替换为http://ip地址/4.19，可以是localhost，只能本机引用替换后：1.2dojo.js编辑器打开/4.19/dojo/dojo.js搜索文本[HOSTNAME_AND_PATH_TO_
  • Java学习--黑马SpringBoot3课程个人总结-2024-02-15 客卿123 Java的学习笔记java学习python
    1.未登录统一处理2.添加文章分类//控制添加分类弹窗constdialogVisible=ref(false)//添加分类数据模型constcategoryModel=ref({categoryName:'',categoryAlias:''})//添加分类表单校验construles={categoryName:[{required:true,message:'请输入分类名称',trigger
  • Spring Boot 笔记 027 添加文章分类 机器人迈克猫 SpringBootspringboot笔记vue.js
    1.1.1添加分类取消确认1.1.2添加数据校验//控制添加分类弹窗constdialogVisible=ref(false)//添加分类数据模型constcategoryModel=ref({categoryName:'',categoryAlias:''})//添加分类表单校验construles={categoryName:[{required:true,message:'请输入分类名称',
  • CSS文本超出希望右对齐 lwj1426282929
    在做form表单校验时，经常会出现但是校验失败的提示文本超出校验项宽度的现象：当超出校验项宽度时，文本换行展示了，希望不换行展示，可以使用.z-form-item__error{white-space:nowrap;}不换行后发现文本直接向右溢出展示，但是因为校验项已经距离右边界很近了，超出右侧直接隐藏了，所以我们需要文本从右向左展示：.z-form-item__error{white-space
  • Web地图呈现原理 _bugMaker
    以下内容转载自木的树的文章《Web地图呈现原理》作者：木的树链接：https://www.cnblogs.com/dojo-lzz/p/9250637.html来源：博客园著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。本篇内容为大家揭开地图呈现原理，大家可通过腾讯位置服务官网了解地图并体验！地图投影对于接触互联网地图的同学来说，最开始接触的恐怕就是坐标转换的过程了。由于地球是
  • elementui自定义form组件校验,解决不触发校验事件 我这里没有啥了
    el-form绑定model并添加rules，el-form-item绑定prop属后，默认的el-input或者el-select值变更时候可以通过表单校验rules:{name:[{required:true,message:"必须填写",trigger:"blur"}]}自定义的组件比如图片上传之类不触发，可以通过值变更时候触发上级El-Form-Item校验,吧value传进去即可,如下：
  • vue3 之 商城项目—登陆 jiojio冲冲冲 vue3javascript前端cssvue3element
    整体认识登陆页面的主要功能就是表单校验和登陆登出业务路由配置模版小兔鲜进入网站首页账户登录我已同意隐私条款和服务条款点击登录关于我们帮助中心售后服务配送与验收商务合作搜索推荐友情链接CopyRight©小兔鲜儿.login-header{background:#fff;border-bottom:1pxsolid#e4e4e4;.container{display:flex;align-
  • iview中动态表单校验和下拉多选校验 jjbnxy
    新增拍照设备参数128G256G512G1T{{item.label}}-1"@click="removePoints(index)"/>取消确定exportdefault{name:"formInModal",data(){return{addDeviceModal:false,formData:{name:"",memory:"",shotScene:[],pointList:[{valueX
  • vue3——实现表单校验 leo vuevue.jsjavascript
    目录前言一、表单校验的意义二、如何对表单进行校验？1.准备2.步骤3.使用三、结果演示总结前言为什么要进行表单校验呢？不进行表单校验会有什么危害？如何进行表单校验呢？带着这些问题，今天一起来看一下vue3中如何实现表单校验吧~一、表单校验的意义当用户在输入框内输入的值或者必选项未进行选择时，就不触发下一步的操作可以让用户的信息都按一定的规则来设置，方便统一管理通过表单校验可以有效地规避不法分子进行
  • JVS低代码表单：轻松应对复杂业务数据的表单校验挑战 huaxinjiayou java
    题解|#单词倒排#importsysimportrearr=[]s=input()output=''foriins:ifre.match('[a-题解|#变种水仙花##includeintmain(){inti=0;intj=0;intk=100;for(i=题解|#网易云音乐推荐(网易校招笔试真题)#selectmusic_namefrom(SELECTdistinctmusic_name,mu
  • 2019-12-04 0b41ccbc0b8e
    当我们使用antd表单校验的时候，你可能想要这样的效果：有时候当我们提交的时候空校验可能出不来，这个时候可能需要添加一个validator:async(rule,value)=>{}校验，这个时候validator中也可以校验，点击提交的时候，如果你没有填入输入框，这时候空校验也会出来。
  • 从0开始手把手教你做极客园项目（一）——登录功能实现 -_-你好-_- 前端typescriptvscodescssreact.js前端框架
    文章目录前言一、项目准备工作1.初始化项目，安装依赖2.目录结构准备3.craco配置二、登录功能1.配置路由2.登录界面静态结构3.添加表单校验4.封装请求5.redux状态管理token6.异步获取token7.组件上触发异步8.token持久化9.axios请求头注入token10.token控制路由权限总结前言最近跟着黑马学习了一个项目，他采用传统的javascript的写法，当然我是理解
  • react函数组件+ts+antd实现基本表单 Hi-Sun react.jsts
    使用React函数组件以及antd实现基本的表单，实现效果如下图所示，具有基本的表单校验功能importReact,{FC,useState}from"react";import{Button,Checkbox,Form,Input}from"antd";constTest:FC=()=>{const[profileNameLength,setProfileNameLength]=useState
  • Vue中使用 Element-ui form和 el-dialog 进行自定义表单校验&清除表单状态 博客zhu虎康 Elementvue.jsuijavascript
    文章目录问题分析问题在使用Element-uiel-form和el-dialog进行自定义表单校验时，出现点击编辑按钮之后再带年纪新增按钮，出现如下情况，新增弹出表单进行了一次表单验证，而这时不应该要表单验证的分析在寻找多种解决方案后，最后用的方法时在打开弹窗第一次取消校验规则，这里我使用的是el-dialog的@open和@close来处理需要注意的是要在清除方法外面用$nextTick处理一下
  • UR5正向动力学控制 kissgoodbye2012 MatlabUR5VrepMatlab动力学仿真运动学控制
    --Thisisathreadedscript,andisjustanexample!jointHandles={-1,-1,-1,-1,-1,-1}fori=1,6,1dojointHandles[i]=simGetObjectHandle('UR5_joint'..i)end--Set-upsomeoftheRMLvectors:vel=180accel=40jerk=80currentVel
  • element表格内多个输入框时如何添加表单校验 Hermione_log javascript前端开发语言
    以下.vue文件Demo可直接复制运行：重点：1：表格数据定义在form里2：prop需要加索引；索引前的变量不要加form，直接取里边的key，索引后的字段需要和表格里字段属性对应。:prop="'tableInfo.list.'+scope.$index+'.name'"提交exportdefault{components:{},data(){return{form:{tableInfo:{l
  • VUE3+elementPlus 之 Form表单校验器 之 数字类型、小数位数校验 赫兹/Herzz vueweb前端elementuivue.js前端javascript
    限制录入数字类型+小数位数限制：封装自定义验证器：/***数字输入项校验*@param{*}ruleelement-ui表单校验规则*@param{*}value输入项的值*@param{*}callback回调函数*@param{*}extraInfo附加校验信息：*allowZeroboolean是否允许为0，true:允许*isRateboolean是否是百分比字段，true：是*numRa
  • jvm调优总结（从基本概念 到 深度优化） oloz javajvmjdk虚拟机应用服务器
    JVM参数详解：http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html   Java虚拟机中，数据类型可以分为两类：基本类型和引用类型。基本类型的变量保存原始值，即：他代表的值就是数值本身；而引用类型的变量保存引用值。“引用值”代表了某个对象的引用，而不是对象本身，对象本身存放在这个引用值所表示的地址的位置。
  • 【Scala十六】Scala核心十：柯里化函数 bit1129 scala
    本篇文章重点说明什么是函数柯里化，这个语法现象的背后动机是什么，有什么样的应用场景，以及与部分应用函数(Partial Applied Function)之间的联系   1. 什么是柯里化函数 A way to write functions with multiple parameter lists. For instance def f(x: Int)(y: Int) is a
  • HashMap dalan_123 java
    HashMap在java中对很多人来说都是熟的；基于hash表的map接口的非同步实现。允许使用null和null键；同时不能保证元素的顺序；也就是从来都不保证其中的元素的顺序恒久不变。 1、数据结构     在java中，最基本的数据结构无外乎：数组 和 引用（指针），所有的数据结构都可以用这两个来构造，HashMap也不例外，归根到底HashMap就是一个链表散列的数据
  • Java Swing如何实时刷新JTextArea，以显示刚才加append的内容 周凡杨 java更新swingJTextArea
    在代码中执行完textArea.append("message")后，如果你想让这个更新立刻显示在界面上而不是等swing的主线程返回后刷新，我们一般会在该语句后调用textArea.invalidate()和textArea.repaint()。 问题是这个方法并不能有任何效果，textArea的内容没有任何变化，这或许是swing的一个bug，有一个笨拙的办法可以实现
  • servlet或struts的Action处理ajax请求 g21121 servlet
    其实处理ajax的请求非常简单，直接看代码就行了： //如果用的是struts //HttpServletResponse response = ServletActionContext.getResponse(); // 设置输出为文字流 response.setContentType("text/plain"); // 设置字符集 res
  • FineReport的公式编辑框的语法简介 老A不折腾 finereport公式总结
    FINEREPORT用到公式的地方非常多，单元格（以=开头的便被解析为公式），条件显示，数据字典，报表填报属性值定义，图表标题，轴定义，页眉页脚，甚至单元格的其他属性中的鼠标悬浮提示内容都可以写公式。 简单的说下自己感觉的公式要注意的几个地方：   1.if语句语法刚接触感觉比较奇怪，if(条件式子,值1,值2)，if可以嵌套，if(条件式子1，值1，if(条件式子2，值2，值3)
  • linux mysql 数据库乱码的解决办法 墙头上一根草 linuxmysql数据库乱码
    linux 上mysql数据库区分大小写的配置 lower_case_table_names=1 1-不区分大小写 0-区分大小写   修改/etc/my.cnf 具体的修改内容如下:   [client] default-character-set=utf8   [mysqld] datadir=/var/lib/mysql socket=/va
  • 我的spring学习笔记6-ApplicationContext实例化的参数兼容思想 aijuans Spring 3
    ApplicationContext能读取多个Bean定义文件，方法是： ApplicationContext appContext = new ClassPathXmlApplicationContext（ new String[]｛“bean-config1.xml”，“bean-config2.xml”，“bean-config3.xml”，“bean-config4.xml
  • mysql 基准测试之sysbench annan211 基准测试mysql基准测试MySQL测试sysbench
    1 执行如下命令，安装sysbench-0.5： tar xzvf sysbench-0.5.tar.gz  cd sysbench-0.5  chmod +x autogen.sh  ./autogen.sh  ./configure --with-mysql --with-mysql-includes=/usr/local/mysql
  • sql的复杂查询使用案列与技巧 百合不是茶 oraclesql函数数据分页合并查询
      本片博客使用的数据库表是oracle中的scott用户表;          -------------------  自然连接查询           查询 smith 的上司(两种方法) &
  • 深入学习Thread类 bijian1013 javathread多线程java多线程
    一．             线程的名字 下面来看一下Thread类的name属性，它的类型是String。它其实就是线程的名字。在Thread类中，有String getName()和void setName(String)两个方法用来设置和获取这个属性的值。 同时，Thr
  • JSON串转换成Map以及如何转换到对应的数据类型 bijian1013 javafastjsonnet.sf.json
            在实际开发中，难免会碰到JSON串转换成Map的情况，下面来看看这方面的实例。另外，由于fastjson只支持JDK1.5及以上版本，因此在JDK1.4的项目中可以采用net.sf.json来处理。 一.fastjson实例 JsonUtil.java package com.study; impor
  • 【RPC框架HttpInvoker一】HttpInvoker：Spring自带RPC框架 bit1129 spring
    HttpInvoker是Spring原生的RPC调用框架，HttpInvoker同Burlap和Hessian一样，提供了一致的服务Exporter以及客户端的服务代理工厂Bean，这篇文章主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成   在 【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中
  • 【Mahout二】基于Mahout CBayes算法的20newsgroup的脚本分析 bit1129 Mahout
    #!/bin/bash # # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreements. See the NOTICE file distributed with # this work for additional information re
  • nginx三种获取用户真实ip的方法 ronin47
    随着nginx的迅速崛起，越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速，但是随之也遇到一个问题：nginx如何获取用户的真实IP地址,如果后端是apache,请跳转到<apache获取用户真实IP地址>，如果是后端真实服务器是nginx，那么继续往下看。 实例环境： 用户IP 120.22.11.11
  • java-判断二叉树是不是平衡 bylijinnan java
    参考了 http://zhedahht.blog.163.com/blog/static/25411174201142733927831/ 但是用java来实现有一个问题。 由于Java无法像C那样“传递参数的地址，函数返回时能得到参数的值”，唯有新建一个辅助类：AuxClass import ljn.help.*; public class BalancedBTree {
  • BeanUtils.copyProperties VS PropertyUtils.copyProperties 诸葛不亮 PropertyUtilsBeanUtils
     BeanUtils.copyProperties VS  PropertyUtils.copyProperties  作为两个bean属性copy的工具类，他们被广泛使用，同时也很容易误用，给人造成困然；比如：昨天发现同事在使用BeanUtils.copyProperties copy有integer类型属性的bean时，没有考虑到会将null转换为0，而后面的业
  • [金融与信息安全]最简单的数据结构最安全 comsci 数据结构
          现在最流行的数据库的数据存储文件都具有复杂的文件头格式，用操作系统的记事本软件是无法正常浏览的，这样的情况会有什么问题呢？        从信息安全的角度来看，如果我们数据库系统仅仅把这种格式的数据文件做异地备份，如果相同版本的所有数据库管理系统都同时被攻击，那么
  • vi区段删除 Cwind linuxvi区段删除
    区段删除是编辑和分析一些冗长的配置文件或日志文件时比较常用的操作。简记下vi区段删除要点备忘。   vi概述    引文中并未将末行模式单独列为一种模式。单不单列并不重要，能区分命令模式与末行模式即可。   vi区段删除步骤： 1. 在末行模式下使用:set nu显示行号 非必须，随光标移动vi右下角也会显示行号，能够正确找到并记录删除开始行
  • 清除tomcat缓存的方法总结 dashuaifu tomcat缓存
    用tomcat容器，大家可能会发现这样的问题，修改jsp文件后，但用IE打开 依然是以前的Jsp的页面。 出现这种现象的原因主要是tomcat缓存的原因。 解决办法如下: 在jsp文件头加上 <meta http-equiv="Expires" content="0"> <meta http-equiv="kiben&qu
  • 不要盲目的在项目中使用LESS CSS dcj3sjt126com Webless
    　如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 　　不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉，就是为了功能而实现功能。 　　比如它的引用功能 ? .rounded_corners{     
  • [入门]更上一层楼 dcj3sjt126com PHPyii2
    更上一层楼 通篇阅读完整个“入门”部分，你就完成了一个完整 Yii 应用的创建。在此过程中你学到了如何实现一些常用功能，例如通过 HTML 表单从用户那获取数据，从数据库中获取数据并以分页形式显示。你还学到了如何通过 Gii 去自动生成代码。使用 Gii 生成代码把 Web 开发中多数繁杂的过程转化为仅仅填写几个表单就行。 本章将介绍一些有助于更好使用 Yii 的资源：
  • Apache HttpClient使用详解 eksliang httpclienthttp协议
    Http协议的重要性相信不用我多说了，HttpClient相比传统JDK自带的URLConnection，增加了易用性和灵活性（具体区别，日后我们再讨论），它不仅是客户端发送Http请求变得容易，而且也方便了开发人员测试接口（基于Http协议的），即提高了开发的效率，也方便提高代码的健壮性。因此熟练掌握HttpClient是很重要的必修内容，掌握HttpClient后，相信对于Http协议的了解会
  • zxing二维码扫描功能 gundumw100 androidzxing
    经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app.Activity; import an
  • 纯HTML+CSS带说明的黄色导航菜单 ini htmlWebhtml5csshovertree
    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航   在线体验效果：http://hovertree.com/texiao/css/1.htm代码如下,保存到HTML文件可以看到效果：   <!DOCTYPE html > <html > <head> <title>HoverTree
  • fastjson初始化对性能的影响 kane_xie fastjson序列化
    之前在项目中序列化是用thrift，性能一般，而且需要用编译器生成新的类，在序列化和反序列化的时候感觉很繁琐，因此想转到json阵营。对比了jackson，gson等框架之后，决定用fastjson，为什么呢，因为看名字感觉很快。。。   网上的说法：   fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器，来自阿里巴巴的工程师开发。
  • 基于Mybatis封装的增删改查实现通用自动化sql mengqingyu DAO
    1.基于map或javaBean的增删改查可实现不写dao接口和实现类以及xml，有效的提高开发速度。 2.支持自定义注解包括主键生成、列重复验证、列名、表名等 3.支持批量插入、批量更新、批量删除 <bean id="dynamicSqlSessionTemplate" class="com.mqy.mybatis.support.Dynamic
  • js控制input输入框的方法封装(数字，中文，字母，浮点数等) qifeifei javascript js
    在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。 /** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/     funct
  • java 计时器应用 tangqi609567707 javatimer
    mport java.util.TimerTask;   import java.util.Calendar;   public class MyTask extends TimerTask {        private static final int
  • erlang输出调用栈信息 wudixiaotie erlang
    在erlang otp的开发中，如果调用第三方的应用，会有有些错误会不打印栈信息，因为有可能第三方应用会catch然后输出自己的错误信息，所以对排查bug有很大的阻碍，这样就要求我们自己打印调用的栈信息。用这个函数：erlang:process_display (self (), backtrace).需要注意这个函数只会输出到标准错误输出。 也可以用这个函数：erlang:get_s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他