form builder

形式构建器

动态形式构建工具，允许用户在Web应用程序中无缝创建，自定义和验证表单。由React，Next.js和其他各种技术建造，Form Builder为开发人员和用户提供了直观的界面。

目录

• 形式构建器
  • 目录
  • 特征
  • 现场演示
  • YouTube演示
  • 安装
  • 用法
    • 创建表单
  • 成分
  • 验证
  • API
    • 表格提交
  • 贡献
  • 执照
  • 致谢

特征

• 动态表单创建：轻松创建具有各种输入类型的表单，包括文本，复选框，无线电按钮等。
• 实时验证：使用ZOD库验证用户输入，以确保数据完整性和用户友好的反馈。
• 响应式设计：使用尾风CSS构建，确保表格在所有设备上看起来都很好。
• 可自定义的组件：利用ShadCN组件，以获得一致且现代的UI体验。
• 服务器端渲染：利用Next.js进行优化的性能和SEO。

现场演示

在此处查看表单构建器的现场演示。

YouTube演示

安装

要开始使用Form Builder，请按照以下步骤：

1. 克隆存储库：

   git clone https://github.com/hasanharman/form-builder.git

2. 导航到项目目录：

    cd form-builder

3. 安装必要的依赖项：

   npm install

用法

要启动开发服务器，请运行：

npm run dev

打开浏览器并导航到http://localhost:3000以查看应用程序中的应用程序。

创建表单

1. 访问构建器：应用程序运行后，导航到表单构建器接口。
2. 添加输入：使用工具栏添加不同类型的输入。
3. 自定义输入：单击任何输入字段以配置属性，例如标签，占位符，所需验证等。
4. 保存和预览：建立表单后，保存并预览输出。

成分

形式构建器由各种可重复使用的组件组成：

• FormContainer ：形式元素的主要容器。
• InputField ：可自定义的输入组件。
• SelectField ：下拉选择组件。
• CheckboxField ：复选框输入组件。
• 按钮：用于表单提交的样式按钮组件。

验证

Form Builder使用ZOD进行输入验证。您可以按以下方式定义表格的模式：

 import { z } from 'zod' ;

const formSchema = z . object ( {
  name : z . string ( ) . min ( 1 , "Name is required" ) ,
  email : z . string ( ) . email ( "Invalid email address" ) ,
  age : z . number ( ) . min ( 18 , "You must be at least 18 years old" ) ,
} ) ;

该模式可以应用于您的表格以执行验证规则。

API

表格提交

准备好表单后，您可以使用简单的API调用来处理提交。这是如何提交表单数据的示例：

 const handleSubmit = async ( data ) => {
  try {
    const response = await fetch ( '/api/form-submit' , {
      method : 'POST' ,
      body : JSON . stringify ( data ) ,
      headers : {
        'Content-Type' : 'application/json' ,
      } ,
    } ) ;
    const result = await response . json ( ) ;
    console . log ( 'Form submitted successfully:' , result ) ;
  } catch ( error ) {
    console . error ( 'Error submitting form:' , error ) ;
  }
} ; 

贡献

欢迎捐款！如果您想为形成构建器做出贡献，请按照以下步骤操作：

1. 叉子存储库：单击存储库页面右上角的“叉”按钮。
2. 创建一个分支：

   git checkout -b feature/YourFeatureName

3. 进行更改：实现您的功能或修复。
4. 提交更改：

   git commit -m " Add a feature "

5. 推动更改：

   git push origin feature/YourFeatureName

6. 创建拉动请求：转到原始存储库并创建一个拉请请求。

执照

该项目已根据MIT许可获得许可。

致谢

• React-用于构建用户界面的JavaScript库。
• Next.js-生产的反应框架。
• Tailwind CSS-用于创建自定义设计的公用事业第一CSS框架。
• ZOD-打字稿优先架构声明和验证。