form builder
1.0.0
أداة بناء النماذج الديناميكية التي تتيح للمستخدمين إنشاء وتخصيص النماذج والتحقق منها بسلاسة داخل تطبيقات الويب. تم تصميم Form Builder مع React و Next.js ، والعديد من التقنيات الأخرى ، واجهة بديهية للمطورين والمستخدمين على حد سواء.
تحقق من العرض التوضيحي المباشر لباني النموذج هنا.
للبدء في نموذج منشئ النماذج ، اتبع هذه الخطوات:
استنساخ المستودع:
git clone https://github.com/hasanharman/form-builder.gitانتقل إلى دليل المشروع:
cd form-builderتثبيت التبعيات اللازمة:
npm installلبدء خادم التطوير ، قم بتشغيل:
npm run dev افتح متصفحك وانتقل إلى http://localhost:3000 لرؤية التطبيق قيد التنفيذ.
يتكون منشئ النماذج من مكونات مختلفة قابلة لإعادة الاستخدام:
يستخدم منشئ النماذج 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هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
