ການສ້າງແບບຟອມແບບເຄື່ອນໄຫວໃນປະຕິກິລິຍາແລະ Next.js

{step === 1 && ( <> ) > 10% 15%

{step === 2 && ( <> <ເລືອກ {...register("hasAccount")}> ແມ່ນ ບໍ່

{hasAccount === "ແມ່ນ" && ( <> <ປ້ອນ {...register("username")} placeholder="Username" /> )}

{ຄວາມພໍໃຈ >= 4 && ( )}</p><p>{ຄວາມພໍໃຈ <= 2 && ( <textarea {...register("inprovementFeedback")} /> )} </> )}</p><p>{ຂັ້ນຕອນ === 3 && ທັງໝົດ >= 100 && <div>ທົບທວນ ແລະສົ່ງ</div>}</p><p><div> {step> 0 && <button type=button onClick={() => setStep(step - 1)}>Back</button>} {showSubmit ? ( <button type=submit disabled={mutation.isPending}> {mutation.isPending ? "Submitting…" : "Submit"} </button> ) : ຂັ້ນຕອນ < STEPS.length - 1 ? ( <button type=button onClick={() => setStep(step + 1)}>Next</button> ): null} </div> {mutation.isError && <div>Error: {mutation.error.message}</div>} </form> );}</p><p>ເບິ່ງ Pen SurveyJS-03-RHF [forked] ໂດຍ sixthextinction. ມີຫຼາຍຢ່າງທີ່ເກີດຂື້ນຢູ່ທີ່ນີ້, ແລະມັນສົມຄວນທີ່ຈະຊ້າລົງເພື່ອສັງເກດເຫັນວ່າສິ່ງທີ່ສິ້ນສຸດລົງ.</p><p>ມູນຄ່າທີ່ມາຈາກ - ຈໍານວນຍ່ອຍ, ພາສີ, ຈໍານວນທັງຫມົດ - ແມ່ນຄໍານວນໃນອົງປະກອບຜ່ານ useWatch ແລະ useMemo ເພາະວ່າພວກມັນຂຶ້ນກັບຄ່າພາກສະຫນາມສົດແລະບໍ່ມີສະຖານທີ່ທໍາມະຊາດອື່ນສໍາລັບພວກມັນ. ກົດລະບຽບການເບິ່ງເຫັນສໍາລັບຊື່ຜູ້ໃຊ້, ລະຫັດຜ່ານ, positiveFeedback, ແລະການປັບປຸງ Feedback ດໍາລົງຊີວິດຢູ່ໃນ JSX ເປັນເງື່ອນໄຂໃນແຖວ. ເຫດຜົນຂອງການຂ້າມຂັ້ນຕອນ — ຫນ້າທີ່ທົບທວນພຽງແຕ່ປາກົດເມື່ອຈໍານວນທັງຫມົດ >= 100 — ໄດ້ຖືກຝັງເຂົ້າໄປໃນຕົວແປສະແດງໃຫ້ເຫັນການຍື່ນສະເຫນີແລະເງື່ອນໄຂການສະແດງຢູ່ໃນຂັ້ນຕອນທີ 3. Navigation ຕົວຂອງມັນເອງແມ່ນພຽງແຕ່ຕົວนับ useState ທີ່ພວກເຮົາກໍາລັງເພີ່ມຂຶ້ນດ້ວຍຕົນເອງ. React Query ຈັດການການລອງຄືນໃຫມ່, caching, ແລະ invalidation. ແບບຟອມພຽງແຕ່ໂທຫາ mutation.mutate ດ້ວຍຂໍ້ມູນທີ່ຖືກຕ້ອງ.</p><p>ບໍ່​ມີ​ອັນ​ໃດ​ອັນ​ນີ້​ແມ່ນ​ຜິດ​ພາດ, perse. ນີ້ຍັງເປັນ React idiomatic, ແລະອົງປະກອບແມ່ນຂ້ອນຂ້າງປະຕິບັດຍ້ອນວິທີການ RHF isolates re-renders. ແຕ່ຖ້າທ່ານຕ້ອງມອບເລື່ອງນີ້ໃຫ້ກັບຜູ້ທີ່ບໍ່ໄດ້ຂຽນມັນແລະຂໍໃຫ້ພວກເຂົາອະທິບາຍພາຍໃຕ້ເງື່ອນໄຂໃດທີ່ຫນ້າເວັບທົບທວນປາກົດ, ພວກເຂົາຈະຕ້ອງຕິດຕາມເບິ່ງການສະແດງອອກ, ເງື່ອນໄຂການສະແດງຂັ້ນຕອນ 3, ແລະເຫດຜົນຂອງປຸ່ມ nav - ສາມບ່ອນແຍກຕ່າງຫາກ - ເພື່ອສ້າງກົດລະບຽບທີ່ສາມາດລະບຸໄວ້ໃນເສັ້ນດຽວ. ແບບຟອມເຮັດວຽກ, ແມ່ນແລ້ວ, ແຕ່ພຶດຕິກໍາບໍ່ສາມາດກວດສອບໄດ້ຢ່າງແທ້ຈິງເປັນລະບົບ. ມັນຕ້ອງໄດ້ຮັບການປະຕິບັດທາງຈິດໃຈ. ສິ່ງທີ່ສໍາຄັນກວ່ານັ້ນ, ການປ່ຽນແປງມັນຮຽກຮ້ອງໃຫ້ມີການມີສ່ວນຮ່ວມດ້ານວິສະວະກໍາ. ເຖິງແມ່ນວ່າການປັບຕົວເລັກໆນ້ອຍໆ, ເຊັ່ນການປັບຕົວເມື່ອຂັ້ນຕອນການທົບທວນຄືນສະແດງໃຫ້ເຫັນເຖິງ, ຫມາຍຄວາມວ່າການແກ້ໄຂອົງປະກອບ, ການປັບປຸງການກວດສອບ, ເປີດການຮ້ອງຂໍດຶງ, ລໍຖ້າການທົບທວນຄືນ, ແລະນໍາໃຊ້ອີກເທື່ອຫນຶ່ງ. ສ່ວນທີ 2: ການຂັບເຄື່ອນແບບແຜນ (SurveyJS) ຕອນນີ້ໃຫ້ສ້າງກະແສດຽວກັນໂດຍໃຊ້ schema. ການຕິດຕັ້ງ npm ຕິດຕັ້ງ survey-core survey-react-ui @tanstack/react-query</p><p>survey-coreThe MIT-licensed platform-independent runtime engine that powers of SurveyJS’s form rendering — ສ່ວນ​ທີ່​ພວກ​ເຮົາ​ສົນ​ໃຈ​ກ່ຽວ​ກັບ​ການ​ນີ້​. ມັນໃຊ້ JSON schema, ສ້າງແບບຈໍາລອງພາຍໃນຈາກມັນ, ແລະຈັດການທຸກສິ່ງທີ່ບໍ່ດັ່ງນັ້ນຈະຢູ່ໃນອົງປະກອບ React ຂອງທ່ານ: ການປະເມີນການສະແດງອອກຂອງການເບິ່ງເຫັນ, ການຄິດໄລ່ມູນຄ່າທີ່ມາຈາກ, ການຄຸ້ມຄອງສະຖານະຂອງຫນ້າ, ການຕິດຕາມການກວດສອບແລະການຕັດສິນໃຈວ່າ "ສົມບູນ" ຫມາຍຄວາມວ່າຫນ້າໃດຖືກສະແດງ. survey-react-uiThe UI / rendering layer ທີ່ເຊື່ອມຕໍ່ແບບຈໍາລອງນັ້ນກັບ React. ມັນເປັນສິ່ງຈໍາເປັນ <Survey model={model} /> ອົງປະກອບທີ່ສະແດງຄືນໃຫມ່ທຸກຄັ້ງທີ່ສະຖານະຂອງເຄື່ອງຈັກມີການປ່ຽນແປງ. ຫ້ອງສະໝຸດ UI ຂອງ SurveyJS ຍັງມີຢູ່ສຳລັບ Angular, Vue3, ແລະກອບວຽກອື່ນໆອີກ.</p><p>ຮ່ວມກັນ, ພວກມັນໃຫ້ທ່ານເປັນ runtime ແບບຟອມຫຼາຍຫນ້າທີ່ເປັນປະໂຫຍດຢ່າງເຕັມທີ່ໂດຍບໍ່ຕ້ອງຂຽນເສັ້ນດຽວຂອງການໄຫຼຄວບຄຸມ. ຮູບແບບ schema ຕົວຂອງມັນເອງແມ່ນ, ດັ່ງທີ່ໄດ້ກ່າວກ່ອນຫນ້ານີ້, ພຽງແຕ່ເປັນ JSON - ບໍ່ມີ DSL ຫຼືສິ່ງໃດໆທີ່ເປັນເຈົ້າຂອງ. ທ່ານ​ສາ​ມາດ inline ມັນ​, ນໍາ​ເຂົ້າ​ຈາກ​ໄຟລ​໌​, ເອົາ​ມັນ​ຈາກ API​, ຫຼື​ເກັບ​ຮັກ​ສາ​ໄວ້​ໃນ​ຖັນ​ຖານ​ຂໍ້​ມູນ​ແລະ​ໃຫ້​ມັນ​ໃນ​ເວ​ລາ​ແລ່ນ​. ແບບຟອມດຽວກັນ, ເປັນຂໍ້ມູນ ນີ້ແມ່ນຮູບແບບດຽວກັນ, ເວລານີ້ສະແດງອອກເປັນວັດຖຸ JSON. schema ກໍານົດທຸກສິ່ງທຸກຢ່າງ: ໂຄງສ້າງ, ການກວດສອບ, ກົດລະບຽບການເບິ່ງເຫັນ, ການຄິດໄລ່ທີ່ມາຈາກ, ການນໍາທາງຫນ້າ - ແລະມອບມັນໃຫ້ກັບຕົວແບບທີ່ປະເມີນມັນໃນເວລາແລ່ນ. ນີ້ແມ່ນສິ່ງທີ່ມີລັກສະນະເຕັມທີ່:</p><p>export const surveySchema = { title: "Order Flow", showProgressBar: "top", pages: [ { name: "details", ອົງປະກອບ: [ { type: "text", name: "firstName", isRequired: true }, { type: "text", name: "email", inputType: "email", isRequired: [valid" type: valid] } ] }, { name: "order", ອົງປະກອບ: [ { type: "text", ຊື່: "price", inputType: "number", defaultValue: 0 }, { type: "text", name: "quantity", inputType: "number", defaultValue: 1 }, { type: "dropdown",name: "taxRate", defaultValue: 0.1, choices: [ { value: 0.05, text: "5%" }, { value: 0.1, text: "10%" }, { value: 0.15, text: "15%" } ] }, { type: "expression", name: "subtotal", expression: "subtotal", {type: "expression", name: "subtotal", "expression", ຊື່: "tax", ສະແດງອອກ: "{subtotal} {taxRate}" }, { type: "expression", name: "total", expression: "{subtotal} + {tax}" } ] }, { name: "account", ອົງປະກອບ: [ { type: "radiogroup", name: "hasAccount", ທາງເລືອກ, {" type: "Yes", ທາງເລືອກ: {"Yes" "username", visibleIf: "{hasAccount} = 'Yes'", isRequired: true }, { type: "text", name: "password", inputType: "password", visibleIf: "{hasAccount} = 'Yes'", isRequired: true, validators: [{ type: "text", name: "password", inputType: "password", visibleIf: "{hasAccount} = 'Yes'", isRequired: true, validators: [{ type: "text" , minLength: 6 ຕົວອັກສອນ: "} } "rating", ຊື່: "ຄວາມພໍໃຈ", rateMin: 1, rateMax: 5 }, { type: "comment", name: "positiveFeedback", visibleIf: "{satisfaction} >= 4" }, { type: "comment", name: "improvementFeedback", visibleIf: "{satisfaction} <= 2" } ]=viewto tal : {0}: {0} [] } ]};</p><p>ປຽບທຽບນີ້ກັບລຸ້ນ RHF ໃນເວລາສັ້ນໆ.</p><p>ບລັອກ superRefine ທີ່ຕ້ອງການຊື່ຜູ້ໃຊ້ແລະລະຫັດຜ່ານແມ່ນຫມົດໄປ. visibleIf: "{hasAccount} = 'Yes'" ລວມກັບ isRequired: true handles ທັງສອງຄວາມກັງວົນຮ່ວມກັນ, ໃນພາກສະຫນາມຕົວມັນເອງ, ບ່ອນທີ່ທ່ານຄາດຫວັງວ່າຈະຊອກຫາພວກມັນ. ລະບົບຕ່ອງໂສ້ useWatch + useMemo ທີ່ຄຳນວນທັງໝົດຍ່ອຍ, ອາກອນ, ແລະທັງໝົດຖືກແທນທີ່ດ້ວຍສາມຊ່ອງຂໍ້ມູນທີ່ອ້າງອີງເຊິ່ງກັນແລະກັນດ້ວຍຊື່. ເງື່ອນໄຂຂອງຫນ້າການທົບທວນຄືນ, ເຊິ່ງໃນສະບັບ RHF ແມ່ນ reconstructable ພຽງແຕ່ໂດຍການ tracing ຜ່ານ showSubmit, ຂັ້ນຕອນ 3 render ສາຂາ. ແລະສຸດທ້າຍ, ເຫດຜົນຂອງປຸ່ມ nav ເປັນຄຸນສົມບັດ visibleIf ດຽວຢູ່ໃນວັດຖຸຂອງຫນ້າ.</p><p>ເຫດຜົນດຽວກັນແມ່ນຢູ່ທີ່ນັ້ນ. ມັນເປັນພຽງແຕ່ວ່າ schema ເຮັດໃຫ້ມັນເປັນບ່ອນຢູ່ບ່ອນທີ່ມັນສັງເກດເຫັນຢູ່ໃນຄວາມໂດດດ່ຽວ, ແທນທີ່ຈະແຜ່ລາມໄປທົ່ວອົງປະກອບ. ນອກຈາກນັ້ນ, ໃຫ້ສັງເກດວ່າ schema ໃຊ້ປະເພດ: 'ສະແດງອອກ' ສໍາລັບຈໍານວນຍ່ອຍ, ພາສີ, ແລະຈໍານວນທັງຫມົດ. ການສະແດງອອກແມ່ນອ່ານເທົ່ານັ້ນ ແລະໃຊ້ເປັນສ່ວນໃຫຍ່ເພື່ອສະແດງຄ່າທີ່ຄຳນວນໄດ້. SurveyJS ຍັງສະຫນັບສະຫນູນປະເພດ: 'html' ສໍາລັບເນື້ອຫາທີ່ສະຖິດ, ແຕ່ສໍາລັບຄ່າທີ່ຄິດໄລ່, ການສະແດງອອກແມ່ນທາງເລືອກທີ່ເຫມາະສົມ. ໃນປັດຈຸບັນສໍາລັບດ້ານ React. ການສະແດງແລະການຍື່ນສະເຫນີ ງ່າຍດາຍຫຼາຍ. Wire onComplete ກັບ API ຂອງທ່ານດ້ວຍວິທີດຽວກັນ — ໂດຍຜ່ານ useMutation ຫຼື fetch ທໍາມະດາ:</p><p>ນໍາເຂົ້າ { useState, useEffect, useRef } ຈາກ "react";ນໍາເຂົ້າ { useMutation } ຈາກ "@tanstack/react-query";ນໍາເຂົ້າ { Model } ຈາກ "survey-core";ນໍາເຂົ້າ { Survey } ຈາກ "survey-react-ui";ນໍາເຂົ້າ "survey-core/survey";</p><p>ຟັງຊັນການສົ່ງອອກ SurveyForm() { const [model] = useState(() => new Model(surveySchema));</p><p>const mutation = useMutation({ mutationFn: async (ຂໍ້ມູນ) => { const res = ລໍຖ້າ fetch("/api/orders", { ວິທີການ: "POST", headers: { "Content-Type": "application/json" }, ເນື້ອໃນ: JSON.stringify(data), }); ຖ້າ (!res.ok) ຖິ້ມ Error ໃໝ່ ("ບໍ່ສາມາດສົ່ງ"); ກັບຄືນ res.json(); }, });</p><p>const mutationRef = useRef(ການກາຍພັນ); mutationRef.current = ການກາຍພັນ; useEffect(() => { const handler = (sender) => mutationRef.current.mutate(sender.data); model.onComplete.add(handler); return () => model.onComplete.remove(handler); }, [model]); // ref ຫຼີກເວັ້ນການລົງທະບຽນໃຫມ່ handler ທຸກໆ render (ການປ່ຽນແປງຕົວຕົນຂອງວັດຖຸທີ່ກາຍພັນ)</p><p>ກັບຄືນ ( <> <Survey model={model} /> {mutation.isError && <div>Error: {mutation.error.message}</div>} </> ); }</p><p>ເບິ່ງ Pen SurveyJS-03-SurveyJS [forked] ໂດຍ sixthextinction.</p><p>onComplete fires ເມື່ອຜູ້ໃຊ້ໄປຮອດຈຸດສຸດທ້າຍຂອງຫນ້າທີ່ສັງເກດເຫັນສຸດທ້າຍ. ດັ່ງນັ້ນ, ຖ້າຈໍານວນທັງຫມົດບໍ່ເຄີຍຂ້າມ 100 ແລະຫນ້າທົບທວນຖືກຂ້າມ, ມັນຍັງຖືກໄຟໄຫມ້ຢ່າງຖືກຕ້ອງເພາະວ່າ SurveyJS ປະເມີນການເບິ່ງເຫັນກ່ອນທີ່ຈະຕັດສິນໃຈວ່າ "ຫນ້າສຸດທ້າຍ" ຫມາຍຄວາມວ່າແນວໃດ. ຫຼັງຈາກນັ້ນ, sender.data ປະກອບດ້ວຍຄໍາຕອບທັງຫມົດພ້ອມກັບຄ່າທີ່ຄິດໄລ່ (ລວມຍ່ອຍ, ພາສີ, ຈໍານວນທັງຫມົດ) ເປັນຊ່ອງຂໍ້ມູນຊັ້ນທໍາອິດ, ດັ່ງນັ້ນ API payload ແມ່ນຄືກັນກັບສິ່ງທີ່ RHF ຮຸ່ນທີ່ປະກອບດ້ວຍຕົນເອງໃນ onSubmit. ໄດ້ຮູບແບບ mutationRef ແມ່ນອັນດຽວກັນທີ່ເຈົ້າຈະໄປເຖິງບ່ອນໃດກໍໄດ້ທີ່ເຈົ້າຕ້ອງການຕົວຈັດການເຫດການທີ່ໝັ້ນຄົງຕໍ່ກັບມູນຄ່າທີ່ປ່ຽນແປງໃນທຸກການສະແດງຜົນ — ບໍ່ມີຫຍັງສະເພາະຂອງ SurveyJS ກ່ຽວກັບມັນ.</p><p>ອົງປະກອບ React ບໍ່ມີເຫດຜົນທາງທຸລະກິດອີກຕໍ່ໄປ. ບໍ່ມີ useWatch, ບໍ່ມີ JSX ທີ່ມີເງື່ອນໄຂ, ບໍ່ມີຕົວນັບຂັ້ນຕອນ, ບໍ່ມີຕ່ອງໂສ້ useMemo, ບໍ່ມີ superRefine. React ກໍາລັງເຮັດສິ່ງທີ່ມັນດີຢູ່ໃນຕົວຈິງ: ການສະແດງອົງປະກອບແລະສາຍມັນໄປຫາການໂທ API. ສິ່ງທີ່ຍ້າຍອອກຈາກປະຕິກິລິຍາ?</p><p>ຄວາມກັງວົນ RHF Stack ການສໍາຫຼວດJS ການເບິ່ງເຫັນ ສາຂາ JSX ເຫັນໄດ້ຖ້າ ຄ່າທີ່ມາຈາກ useWatch / useMemo ການສະແດງອອກ ກົດລະບຽບຂ້າມພາກສະຫນາມ superRefine ເງື່ອນໄຂ Schema ການນໍາທາງ ສະຖານະຂັ້ນຕອນ ໜ້າເບິ່ງເຫັນຖ້າ ສະຖານທີ່ກົດລະບຽບ ແຈກຢາຍໃນທົ່ວໄຟລ໌ ສູນກາງໃນ schema</p><p>ສິ່ງທີ່ຢູ່ໃນ React ແມ່ນຮູບແບບ, ຄໍເຕົ້າໄຂ່ທີ່, ສາຍສົ່ງ, ແລະການລວມຕົວຂອງແອັບຯ, ເຊິ່ງຫມາຍຄວາມວ່າ, ສິ່ງທີ່ React ຖືກອອກແບບມາສໍາລັບຕົວຈິງ. ທຸກສິ່ງທຸກຢ່າງອື່ນໄດ້ຍ້າຍໄປຢູ່ໃນ schema, ແລະເນື່ອງຈາກວ່າ schema ແມ່ນພຽງແຕ່ວັດຖຸ JSON, ມັນສາມາດຖືກເກັບໄວ້ໃນຖານຂໍ້ມູນ, ສະບັບພາສາເອກະລາດຂອງລະຫັດຄໍາຮ້ອງສະຫມັກຂອງທ່ານ, ຫຼືແກ້ໄຂໂດຍຜ່ານເຄື່ອງມືພາຍໃນໂດຍບໍ່ຈໍາເປັນຕ້ອງມີການຕິດຕັ້ງ. ຜູ້ຈັດການຜະລິດຕະພັນທີ່ຕ້ອງການປ່ຽນຂອບເຂດທີ່ກະຕຸ້ນໃຫ້ຫນ້າທົບທວນສາມາດເຮັດແນວນັ້ນໄດ້ໂດຍບໍ່ຕ້ອງສໍາຜັດກັບອົງປະກອບ. ນັ້ນແມ່ນຄວາມແຕກຕ່າງດ້ານການປະຕິບັດງານທີ່ມີຄວາມຫມາຍສໍາລັບທີມງານທີ່ພຶດຕິກໍາຂອງແບບຟອມພັດທະນາເລື້ອຍໆແລະບໍ່ໄດ້ຂັບເຄື່ອນໂດຍວິສະວະກອນສະເຫມີ. ເມື່ອໃດທີ່ຈະໃຊ້ແຕ່ລະວິທີ? ນີ້ແມ່ນກົດລະບຽບທີ່ດີທີ່ເຮັດວຽກສໍາລັບຂ້ອຍ: ຈິນຕະນາການລຶບແບບຟອມທັງຫມົດ. ເຈົ້າຈະສູນເສຍຫຍັງ?</p><p>ຖ້າມັນເປັນຫນ້າຈໍ, ທ່ານຕ້ອງການແບບຟອມທີ່ຂັບເຄື່ອນໂດຍອົງປະກອບ. ຖ້າມັນເປັນເຫດຜົນທາງທຸລະກິດ, ເຊັ່ນ: ຂອບເຂດ, ກົດລະບຽບການແຍກ, ແລະຂໍ້ກໍານົດເງື່ອນໄຂທີ່ເຂົ້າລະຫັດການຕັດສິນໃຈທີ່ແທ້ຈິງ, ທ່ານຕ້ອງການເຄື່ອງຈັກ schema.</p><p>ເຊັ່ນດຽວກັນ, ຖ້າການປ່ຽນແປງທີ່ເຂົ້າມາໃນວິທີການຂອງເຈົ້າສ່ວນໃຫຍ່ແມ່ນກ່ຽວກັບປ້າຍຊື່, ທົ່ງນາ, ແລະຮູບແບບ, RHF ຈະໃຫ້ບໍລິການທ່ານດີ. ຖ້າພວກເຂົາກ່ຽວກັບເງື່ອນໄຂ, ຜົນໄດ້ຮັບ, ແລະກົດລະບຽບທີ່ ops ຫຼືທີມງານທາງດ້ານກົດຫມາຍຂອງທ່ານອາດຈະຕ້ອງປັບຕົວໃນຕອນບ່າຍວັນອັງຄານໂດຍບໍ່ມີການຍື່ນປີ້, ຮູບແບບ schema ກັບ SurveyJS ແມ່ນເຫມາະສົມກວ່າທີ່ຊື່ສັດ. ທັງສອງວິທີການນີ້ແມ່ນບໍ່ໄດ້ຢູ່ໃນການແຂ່ງຂັນກັບກັນແລະກັນ. ພວກເຂົາແກ້ໄຂບັນຫາປະເພດຕ່າງໆ, ແລະຄວາມຜິດພາດທີ່ຄວນຫລີກລ້ຽງແມ່ນຄວາມບໍ່ສົມດຸນກັບນ້ໍາຫນັກຂອງເຫດຜົນ - ການປະຕິບັດລະບົບກົດລະບຽບຄືກັບອົງປະກອບເພາະວ່ານັ້ນແມ່ນເຄື່ອງມືທີ່ຄຸ້ນເຄີຍ, ຫຼືການເຂົ້າຫາເຄື່ອງຈັກນະໂຍບາຍເພາະວ່າແບບຟອມໄດ້ເຕີບໂຕເຖິງສາມຂັ້ນຕອນແລະໄດ້ຮັບພາກສະຫນາມທີ່ມີເງື່ອນໄຂ. ຮູບແບບທີ່ພວກເຮົາສ້າງຢູ່ນີ້ຕັ້ງຢູ່ໃກ້ກັບເຂດແດນໂດຍເຈດຕະນາ, ສະລັບສັບຊ້ອນພຽງພໍທີ່ຈະເປີດເຜີຍຄວາມແຕກຕ່າງແຕ່ບໍ່ຮ້າຍແຮງທີ່ສຸດທີ່ການປຽບທຽບມີຄວາມຮູ້ສຶກເຄັ່ງຄັດ. ຮູບແບບທີ່ແທ້ຈິງສ່ວນໃຫຍ່ທີ່ໄດ້ຮັບຄວາມບໍ່ສະດວກໃນ codebase ຂອງທ່ານອາດຈະນັ່ງຢູ່ໃກ້ກັບຊາຍແດນດຽວກັນນັ້ນ, ແລະຄໍາຖາມແມ່ນປົກກະຕິແລ້ວວ່າໃຜໄດ້ຕັ້ງຊື່ສິ່ງທີ່ພວກເຂົາເປັນ. ໃຊ້ React Hook Form + Zod ເມື່ອ:</p><p>ແບບຟອມແມ່ນ CRUD-oriented; Logic ແມ່ນຕື້ນແລະ UI-driven; ວິສະວະກອນເປັນເຈົ້າຂອງພຶດຕິກໍາທັງຫມົດ; Backend ຍັງຄົງເປັນແຫຼ່ງຂອງຄວາມຈິງ.</p><p>ໃຊ້ SurveyJS ເມື່ອ:</p><p>ແບບຟອມເຂົ້າລະຫັດການຕັດສິນໃຈທາງທຸລະກິດ; ກົດລະບຽບພັດທະນາເປັນເອກະລາດຂອງ UI; ເຫດຜົນຕ້ອງເຫັນໄດ້, ສາມາດກວດສອບໄດ້, ຫຼືສະບັບ; ທີ່ບໍ່ແມ່ນວິສະວະກອນມີອິດທິພົນຕໍ່ພຶດຕິກໍາ; ແບບຟອມດຽວກັນຈະຕ້ອງແລ່ນຜ່ານຫຼາຍຫນ້າ.</p> </div> <script>(function(){var body=document.getElementById('article-body');var headings=body?body.querySelectorAll('h2'):[];if(headings.length<2)return;var toc=document.getElementById('toc-list');var container=document.getElementById('toc-container');headings.forEach(function(h,i){var id='section-'+i;h.id=id;var li=document.createElement('li');var a=document.createElement('a');a.href='#'+id;a.textContent=h.textContent;a.style.cssText='color:#667eea;text-decoration:none;';a.addEventListener('mouseover',function(){this.style.textDecoration='underline';});a.addEventListener('mouseout',function(){this.style.textDecoration='none';});li.appendChild(a);toc.appendChild(li);});container.style.display='block';})();</script> <div style="margin-top:4rem;padding-top:2rem;border-top:1px solid #e8e8f0;"> <h2 style="font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;">You May Also Like</h2> <div class="seo-grid seo-grid-3"> <a href="https://seemless.link/lo/blog/13-trending-songs-on-tiktok-in-march-2026-how-to-use-them" class=seo-card style="text-decoration:none;color:inherit;"> <h3 style="font-weight:600;font-size:0.95rem;">13 Trending Songs on TikTok in March 2026 (+ How to Use Them)</h3> </a> <a href="https://seemless.link/lo/blog/our-best-ai-pm-workflows-for-prototyping-strategy-and-personal-os-2026" class=seo-card style="text-decoration:none;color:inherit;"> <img src="https://substack-post-media.s3.amazonaws.com/public/images/3960c0cd-803c-4893-995c-ccdae389b34a_1376x768.jpeg" alt="Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)" style="width:100%;height:120px;object-fit:cover;border-radius:0.5rem;margin-bottom:0.75rem;" loading=lazy> <h3 style="font-weight:600;font-size:0.95rem;">Our Best AI PM Workflows for Prototyping, Strategy, and Personal OS (2026)</h3> </a> <a href="https://seemless.link/lo/blog/chinas-cybersecurity-agency-issues-security-warning-about-openclaw" class=seo-card style="text-decoration:none;color:inherit;"> <h3 style="font-weight:600;font-size:0.95rem;">China’s Cybersecurity Agency Issues Security Warning About OpenClaw</h3> </a> </div> </div> </div> </section> </article> <section style="padding:3rem 0;background:#f8f9ff;"> <div class=seo-container style="max-width:600px;text-align:center;"> <h2 style="font-size:1.75rem;font-weight:800;margin-bottom:0.5rem;color:#1a1a2e;">Enjoyed This Article?</h2> <p style="color:#666;margin-bottom:1.5rem;">Get weekly tips on growing your audience and monetizing your content — straight to your inbox.</p> <form action="https://seemless.link/register" method=GET style="display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;"> <input type=email name=email placeholder="your@email.com" required style="flex:1;min-width:200px;padding:0.75rem 1rem;border:2px solid #e8e8f0;border-radius:0.5rem;font-size:1rem;outline:none;color:#333;background:#fff;"> <button type=submit style="padding:0.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700;border:none;border-radius:0.5rem;cursor:pointer;font-size:1rem;white-space:nowrap;"> Get Free Tips </button> </form> <p style="color:#aaa;font-size:0.8rem;margin-top:0.75rem;">No spam. Join 138,000+ creators. Unsubscribe anytime.</p> </div> </section> <section class=seo-hero style="padding:4rem 0;text-align:center;color:#fff;"> <div class=seo-container> <h2 style="font-size:2rem;font-weight:800;margin-bottom:1rem;">Create Your Free Bio Page</h2> <p style="font-size:1.1rem;opacity:0.9;margin-bottom:2rem;">Join 138,000+ creators on Seemless.</p> <a href="https://seemless.link/register" class=seo-btn-primary style="background:#fff;color:#667eea;">Get Started Free</a> </div> </section> <footer class=seo-footer> <div class=seo-container> <div class="seo-grid seo-grid-4" style="margin-bottom:3rem;"> <div> <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;"> <img src="https://seemless.link/media/site/logo/ikTHyDHGc9NTPweV5AqEen23c5Tv1HeJkBk8KyWM.png" alt=Seemless style="height:1.75rem;"> <span style="color:#fff;font-weight:700;font-size:1.1rem;">Seemless</span> </div> <p style="font-size:0.9rem;line-height:1.6;">The link-in-bio platform trusted by 138,000+ creators, influencers, and businesses worldwide.</p> <p style="font-size:0.8rem;line-height:1.6;margin-top:0.75rem;padding:0.5rem 0.75rem;background:rgba(102,126,234,0.15);border-radius:0.375rem;border:1px solid rgba(102,126,234,0.25);"> Part of the <a href="https://mewayz.com" style="color:#96a8f0;font-weight:600;" rel=noopener>Mewayz</a> all-in-one business platform </p> </div> <div> <h4 style="color:#fff;font-weight:600;margin-bottom:1rem;">Product</h4> <div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.9rem;"> <a href="https://seemless.link/features">Features</a> <a href="https://seemless.link/pricing">Pricing</a> <a href="https://seemless.link/discover">Discover</a> <a href="https://seemless.link/blog">Blog</a> <a href="https://seemless.link/free-link-in-bio">Free Link in Bio</a> <a href="https://seemless.link/link-in-bio-maker">Link in Bio Maker</a> <a href="https://seemless.link/instagram-bio-link">Instagram Bio Link</a> <a href="https://seemless.link/tiktok-bio-link">TikTok Bio Link</a> <a href="https://seemless.link/youtube-bio-link">YouTube Bio Link</a> </div> </div> <div> <h4 style="color:#fff;font-weight:600;margin-bottom:1rem;">Compare</h4> <div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.9rem;"> <a href="https://seemless.link/linktree-alternative">Linktree Alternative</a> <a href="https://seemless.link/beacons-alternative">Beacons Alternative</a> <a href="https://seemless.link/lnk-bio-alternative">Lnk.Bio Alternative</a> <a href="https://seemless.link/shorby-alternative">Shorby Alternative</a> <a href="https://seemless.link/campsite-alternative">Campsite Alternative</a> <a href="https://seemless.link/bio-fm-alternative">Bio.fm Alternative</a> <a href="https://seemless.link/milkshake-alternative">Milkshake Alternative</a> <a href="https://seemless.link/tap-bio-alternative">Tap.Bio Alternative</a> <a href="https://seemless.link/koji-alternative">Koji Alternative</a> <a href="https://seemless.link/later-link-in-bio-alternative">Later Alternative</a> <a href="https://seemless.link/carrd-alternative">Carrd Alternative</a> <a href="https://seemless.link/stan-store-alternative">Stan Store Alternative</a> <a href="https://seemless.link/bento-alternative">Bento Alternative</a> <a href="https://seemless.link/contactinbio-alternative">ContactInBio Alternative</a> <a href="https://seemless.link/bio-sites-alternative">Bio Sites Alternative</a> </div> </div> <div> <h4 style="color:#fff;font-weight:600;margin-bottom:1rem;">Mewayz Ecosystem</h4> <div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.9rem;"> <a href="https://mewayz.com" rel=noopener>Mewayz Business Platform</a> <a href="https://app.mewayz.com/register" rel=noopener>Start Free Trial</a> <a href="https://mewayz.com/en/features" rel=noopener>All Features</a> <a href="https://mewayz.com/en/pricing" rel=noopener>Pricing Plans</a> <a href="https://watch.mewayz.com" rel=noopener>Mewayz Watch</a> <a href="https://news.mewayz.com" rel=noopener>Mewayz News</a> </div> <h4 style="color:#fff;font-weight:600;margin-bottom:0.5rem;margin-top:1.5rem;">Legal</h4> <div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.9rem;"> <a href="mailto:support@seemless.link">Contact</a> </div> </div> </div> <div style="border-top:1px solid #2a2a3e;padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;"> <p style="font-size:0.85rem;">© 2026 Seemless. All rights reserved. A <a href="https://mewayz.com" style="color:#96a8f0;font-weight:500;" rel=noopener>Mewayz</a> product.</p> <div style="display:flex;gap:1rem;"> <a href="###" target=_blank rel="noopener noreferrer" style="color:#a0a0b8;"> <i class="iconfont icon-Email"></i> </a> <a href=jeffjola target=_blank rel="noopener noreferrer" style="color:#a0a0b8;"> <i class="iconfont icon-Instagram"></i> </a> <a href="#" target=_blank rel="noopener noreferrer" style="color:#a0a0b8;"> <i class="iconfont icon-Whatsapp"></i> </a> <a href="#" target=_blank rel="noopener noreferrer" style="color:#a0a0b8;"> <i class="iconfont icon-Twitter"></i> </a> <a href=333 target=_blank rel="noopener noreferrer" style="color:#a0a0b8;"> <i class="iconfont icon-Facebook"></i> </a> </div> </div> </div> </footer> <div id=mz-net-wrap></div><script>fetch('https://mewayz.com/network-footer.html').then(function(r){return r.text()}).then(function(h){var d=document.getElementById('mz-net-wrap');d.insertAdjacentHTML('beforeend',h);if(!localStorage.getItem('mwcc')){var cc=document.getElementById('mw-cc');if(cc)cc.style.display='block'}}).catch(function(){})</script></body> </html>