开源项目 `validated-fields` 使用教程

开源项目 validated-fields 使用教程

validated-fieldsSet of Rails helpers for unobtrusive frontend validations using HTML5 attributes, Rails 3 validators and JavaScript.项目地址:https://gitcode.com/gh_mirrors/va/validated-fields

1. 项目介绍

validated-fields 是一个用于表单字段验证的开源项目，旨在简化前端开发中的表单验证过程。该项目提供了丰富的验证规则和易于扩展的接口，适用于各种前端框架和库。

2. 项目快速启动

安装

首先，通过 npm 或 yarn 安装 validated-fields：

npm install validated-fields

或

yarn add validated-fields

基本使用

以下是一个简单的示例，展示如何在 React 项目中使用 validated-fields：

import React from 'react';
import { ValidatedForm, ValidatedField } from 'validated-fields';

const App = () => {
  const handleSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <ValidatedForm onSubmit={handleSubmit}>
      <ValidatedField
        name="email"
        label="Email"
        rules={{ required: true, email: true }}
      />
      <ValidatedField
        name="password"
        label="Password"
        rules={{ required: true, minLength: 6 }}
      />
      <button type="submit">Submit</button>
    </ValidatedForm>
  );
};

export default App;

3. 应用案例和最佳实践

自定义验证规则

validated-fields 允许你轻松添加自定义验证规则。以下是一个自定义规则的示例：

import { ValidatedForm, ValidatedField } from 'validated-fields';

const App = () => {
  const handleSubmit = (values) => {
    console.log('Form values:', values);
  };

  const customRule = (value) => {
    return value === 'custom' ? true : 'Must be "custom"';
  };

  return (
    <ValidatedForm onSubmit={handleSubmit}>
      <ValidatedField
        name="customField"
        label="Custom Field"
        rules={{ required: true, customRule }}
      />
      <button type="submit">Submit</button>
    </ValidatedForm>
  );
};

export default App;

表单状态管理

validated-fields 提供了丰富的表单状态管理功能，包括字段验证状态、表单提交状态等。以下是一个示例：

import { useForm } from 'validated-fields';

const App = () => {
  const { form, handleSubmit, errors } = useForm();

  const onSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ValidatedField
        form={form}
        name="email"
        label="Email"
        rules={{ required: true, email: true }}
      />
      {errors.email && <p>{errors.email}</p>}
      <ValidatedField
        form={form}
        name="password"
        label="Password"
        rules={{ required: true, minLength: 6 }}
      />
      {errors.password && <p>{errors.password}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;

4. 典型生态项目

validated-fields 可以与多个前端框架和库无缝集成，以下是一些典型的生态项目：

• React: 如上所示，validated-fields 提供了 React 组件，方便在 React 项目中使用。
• Vue: validated-fields 也提供了 Vue 插件，可以在 Vue 项目中轻松集成。
• Angular: 通过 Angular 的表单模块，可以与 validated-fields 结合使用，实现强大的表单验证功能。

通过这些生态项目的支持，validated-fields 可以满足不同前端开发者的需求，提供一致且强大的表单验证解决方案。

validated-fieldsSet of Rails helpers for unobtrusive frontend validations using HTML5 attributes, Rails 3 validators and JavaScript.项目地址:https://gitcode.com/gh_mirrors/va/validated-fields