form builder
1.0.0
사용자가 웹 애플리케이션 내에서 양식을 원활하게 작성, 사용자 정의 및 검증 할 수있는 동적 양식 건설 도구입니다. React, Next.js 및 기타 다양한 기술로 제작 된 Form Builder는 개발자와 사용자 모두에게 직관적 인 인터페이스를 제공합니다.
양식 빌더의 라이브 데모를 확인하십시오.
Form Builder를 시작하려면 다음 단계를 따르십시오.
저장소 복제 :
git clone https://github.com/hasanharman/form-builder.git프로젝트 디렉토리로 이동하십시오.
cd form-builder필요한 종속성 설치 :
npm install개발 서버를 시작하려면 실행하십시오.
npm run dev 브라우저를 열고 http://localhost:3000 으로 이동하여 응용 프로그램이 작동하는 것을 확인하십시오.
양식 빌더는 다양한 재사용 가능한 구성 요소로 구성됩니다.
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 호출로 제출물을 처리 할 수 있습니다. 다음은 양식 데이터를 제출하는 방법의 예입니다.
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 ) ;
}
} ; 기부금을 환영합니다! 건축업자 양식에 기여하려면 다음을 수행하십시오.
git checkout -b feature/YourFeatureNamegit commit -m " Add a feature "git push origin feature/YourFeatureName이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다.
