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-打字稿優先架構聲明和驗證。