ตัวอย่างการตรวจสอบความถูกต้องของการกรอกแบบฟอร์มจาวาสคริปต์ การตรวจสอบความถูกต้องหรือการตรวจสอบฟิลด์แบบฟอร์มเพื่อหาข้อผิดพลาดและความสมบูรณ์ เหตุใดจึงต้องมีการตรวจสอบแบบฟอร์ม?

ในตัวอย่างของเรา เรามี 5 ช่องที่ต้องกรอก:

- ชื่อ
- ข้อความ
- อีเมล
- หมายเลขโทรศัพท์ติดต่อ
- ตรวจสอบหมายเลขเพื่อความคุ้มครอง

นอกเหนือจากการตรวจสอบช่องว่างแล้ว เรายังจะแสดงอีกด้วย

วิธีตรวจสอบว่าป้อนอีเมลและหมายเลขโทรศัพท์ของคุณถูกต้องหรือไม่

เราจะตรวจสอบเขตข้อมูลด้วย โดยใช้จาวาสคริปต์- ในช่องสุดท้ายคุณต้องป้อนตัวเลขที่กำหนด (เพื่อป้องกัน เติมอัตโนมัติ- หากช่องว่างเปล่า หน้าต่างแจ้งเตือนจะปรากฏขึ้น ถึง สคริปต์นี้เราเพิ่มการส่งแบบฟอร์มที่กรอกเสร็จแล้วทางอีเมลทันที เราจะดำเนินการนี้โดยใช้ php

เอาล่ะ เรามาสร้างไฟล์กัน ดัชนี.phpและเขียนที่นั่น แบบฟอร์มต่อไปนี้:

1. ชื่อของคุณ:

2.ข้อความ:

3. อีเมล

4. หมายเลขโทรศัพท์ติดต่อ

3. ใส่จำนวน 10+10

สร้างไฟล์ ข้อมูล.jsให้เขียนรหัสยืนยันลงไป:
ฟังก์ชั่น Formdata (ข้อมูล) (
/* หากช่องชื่อของคุณไม่ได้กรอก ความยาวจะน้อยกว่า 3-x*/
ถ้า (data.fnm != null && data.fnm.value.length< 3)
{
alert("กรอกข้อมูลในช่อง "ชื่อของคุณ"");
กลับเท็จ ;)

/* หากช่องข้อความไม่ได้กรอก */
ถ้า (data.text != null && data.text.value.length< 3)
{
alert("กรอกข้อมูลในช่อง "ข้อความ");
กลับเท็จ ;)

/* อีเมลของผู้ใช้ */
ถ้า (data.email != null && data.email.value.length == 0)
{
alert("ช่องอีเมล์ว่างเปล่า");
กลับเท็จ ;)

if(data.email != null && data.email.value.length< 6)
{
alert("อีเมลสั้นเกินไป");
กลับเท็จ ;)

ถ้า(!(/^w+[-_.]*w+@w+-?w+.(2,4)$/.test(data.email.value)))
{
alert("กรอกอีเมล์ให้ถูกต้อง");
กลับเท็จ ;)

/* เบอร์โทรศัพท์ติดต่อได้ */
ถ้า (data.phone! = null && data.phone.value.length == 0)
{
alert("ช่องหมายเลขโทรศัพท์ติดต่อว่างเปล่า");
กลับเท็จ ;)

ถ้า (data.phone! = null && data.phone.value.length< 5)
{
alert("ช่อง "โทรศัพท์ติดต่อ" ต้องมีอักขระอย่างน้อยห้าตัว");
กลับเท็จ ;)

ถ้า(!(/^+z/.test(data.phone.value+"z")))
{
alert("หมายเลขติดต่อไม่ถูกต้อง");
กลับเท็จ ;)

/* ตรวจสอบให้แน่ใจว่าฟิลด์จำนวนเงินเท่ากับ จำนวนหนึ่ง */
number = document.getElementById("สรุป");
ถ้า (number.value !== "20")
{
alert("ไม่ได้กรอกจำนวนเงินหรือกรอกไม่ถูกต้อง");
กลับเท็จ ;)
) กำลังโหลด ไฟล์นี้ในเอกสารของเรา ให้วางไว้ระหว่าง แท็กหัว:

ตอนนี้การทดสอบของเราพร้อมแล้ว ตอนนี้หลังจากป้อนข้อมูลทั้งหมดแล้ว เราก็ส่งแบบฟอร์มของเราไปยังอีเมลของเรา
เราเขียนโค้ด php ในไฟล์ index.php:

เราทุกคนได้กรอกแบบฟอร์มเรียบร้อยแล้ว บางคนถึงกับประมวลผลผลลัพธ์ที่รวบรวม ไม่ว่าจะเป็นคำสั่งซื้อในร้านค้าออนไลน์ หรือการคืนบริการ เมื่อขอให้ผู้ใช้กรอกข้อมูลบางอย่าง เราต้องการให้มันสอดคล้องกับรูปแบบที่กำหนด โดยเฉพาะอย่างยิ่งหากได้รับการประมวลผลในภายหลังโดย CMS เช่น 1C bitrix, WorldPress และอื่นๆ ท้ายที่สุดหากผู้ใช้เขียนลงในคอลัมน์โทรศัพท์ด้วยเหตุผลบางประการ เข้าสู่ระบบสไกป์อาจเกิดข้อผิดพลาดในการประมวลผลข้อมูล: มันจะไม่ถูกบันทึกและผู้ใช้จะถูกโยนกลับไปที่หน้าการกรอกแบบฟอร์ม ดังนั้นจึงเกิดคำถามว่าจะตรวจสอบข้อมูลที่ป้อนทางออนไลน์และป้องกันการส่งข้อมูลไม่ถูกต้องได้อย่างไร

สามารถประเมินการทำงานของโซลูชันที่อธิบายไว้ซึ่งพัฒนาโดยเราได้ทันทีโดยใช้ตัวอย่างขั้นตอนการสั่งซื้อบนเว็บไซต์ Newcom ด้านล่างนี้เราจะเริ่มเรื่องราวเกี่ยวกับกระบวนการพัฒนาพร้อมทั้งยกตัวอย่างเพิ่มเติมอีกเล็กน้อย

คำชี้แจงของปัญหา

การตรวจสอบฟิลด์แบบฟอร์มด้วย Javascript อย่างง่ายก่อนส่งไปยังเซิร์ฟเวอร์จะใช้เวลาสองสามนาที เฉพาะเมื่อคุณเขียนสิ่งง่าย ๆ นี้เป็นครั้งที่สิบสำหรับไซต์เดียวเท่านั้น คุณจะคิดเกี่ยวกับการทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติโดยไม่ได้ตั้งใจ เมื่อถึงจุดหนึ่ง ความคิดเกี่ยวกับเรื่องนี้ครอบงำจิตใจมากจนฉันต้องนั่งลงและสร้างห้องสมุดขนาดเล็กที่เกี่ยวข้องกับทุ่งนา

หากคุณแบ่งปัญหาออกเป็นบล็อกๆ คุณจะได้แผนภาพต่อไปนี้:

ถ้ามีแบบแผนก็ลงมือทำเลย

การวิเคราะห์ทางเลือกในการตรวจสอบ

ช่องใดที่พบบ่อยที่สุดในแบบฟอร์ม?

การป้อนข้อความ ซึ่งตามกฎแล้วจะถูกตรวจสอบเพื่อความสมบูรณ์หรือสำหรับนิพจน์ทั่วไปอย่างอีเมลหรือโทรศัพท์
ช่องทำเครื่องหมายถูกทำเครื่องหมายว่ามีเครื่องหมายอยู่หรือไม่ (เช่น ข้อตกลงในการประมวลผลข้อมูลส่วนบุคคล)
นอกจากนี้เรายังสามารถพูดถึงรายการแบบเลื่อนลงที่ถูกตรวจสอบสำหรับค่าที่ไม่ว่างเปล่าบางค่า
อย่าลืมเกี่ยวกับปุ่มตัวเลือกที่ร้ายกาจ ทำไมร้ายกาจ? มีข้อผิดพลาดในการตรวจสอบเครื่องหมาย

แน่นอนว่าฟิลด์นี้อาจเป็นได้ทั้งแบบบังคับหรือแบบเลือกก็ได้ สถานการณ์อาจเกิดขึ้นได้เมื่อฟิลด์นั้นเป็นทางเลือก แต่เนื่องจากคุณกำลังกรอกข้อมูล คุณจึงไม่ต้องดำเนินการใดๆ แต่เป็นไปตามกฎเกณฑ์บางประการ

เนื่องจากเราตั้งใจจะเขียนสคริปต์สากลไม่มากก็น้อย เราจึงต้องคิดถึงโครงสร้างที่ผิดปกติซึ่งจะถูกเรียกว่า "กลุ่ม" ในอนาคต โดยคำนี้เราหมายถึงฟิลด์ที่เชื่อมต่อถึงกัน ตัวอย่างเช่นหากผู้ใช้ทำเครื่องหมายในช่อง "ส่งข่าวสารทางอีเมล" รายการ "อีเมล" จะถูกบังคับให้กรอกหรือมักต้องการแบ่งหมายเลขโทรศัพท์ออกเป็นรหัสและตัวเลขเอง - จากนั้นความถูกต้อง จะต้องตรวจสอบในทุกช่อง และความไม่ถูกต้องของรายการใดรายการหนึ่งจะทำให้เกิดข้อผิดพลาดในทั้งสองช่อง และไม่ควรแสดงข้อความแสดงข้อผิดพลาดในทุกช่องของกลุ่ม แต่แสดงเพียงช่องเดียวเท่านั้น ไม่เช่นนั้นจำนวนช่องจะเริ่มทำให้ตาพร่า

ข้อสรุปใดที่สามารถสรุปได้?
เราจำเป็นต้องจัดระเบียบ ตรวจสอบปกติไปยังช่องข้อความ การยืนยันอีเมล และช่อง "ดิจิทัล" เช่น หมายเลขโทรศัพท์ อายุ ฯลฯ ช่องทำเครื่องหมายและปุ่มตัวเลือกจะถูกตรวจสอบโดยคุณสมบัติที่เลือก ส่วนรายการแบบเลื่อนลงจะถูกตรวจสอบด้วยค่า เพื่อตอบสนองความต้องการ กลุ่มที่ยุ่งยาก– เขียนตัวจัดการให้พวกเขาด้วย นอกจากนี้ยังให้ความสามารถในการตรวจสอบบางฟิลด์บางฟิลด์ ฟังก์ชั่นที่กำหนดเองสำหรับกรณีที่ยากเป็นพิเศษ

จัดระเบียบการจัดเก็บข้อมูลเกี่ยวกับฟิลด์ที่กำลังตรวจสอบและประเภทของการตรวจสอบ สมมติว่าเราจำเป็นต้องตรวจสอบข้อมูลต่อไปนี้สำหรับอีเมล:

ในความคิดของฉัน มีเพียงสองตัวเลือกการจัดเก็บที่นี่:

เราสร้างออบเจ็กต์จาวาสคริปต์ซึ่งเราจัดเก็บฟิลด์ที่จำเป็นสำหรับการตรวจสอบ

เราแทรกข้อมูลเกี่ยวกับเช็คลงในแท็กฟิลด์โดยตรง

ออบเจ็กต์ JS จะทำงานเร็วขึ้นและดูถูกต้องมากกว่าแอตทริบิวต์ที่ไม่ได้มาตรฐานบางตัวในแท็ก สมมติว่ามันจะมีลักษณะดังนี้:

Var checkThis=( หมายเลขอ้างอิง: "$("")", // ตัวชี้ไปยังฟิลด์ที่กำลังตรวจสอบประเภท: "อีเมล", // ประเภทการตรวจสอบ: ปกติ, อีเมล, ชื่อหมายเลข: "ป้อนอีเมลของคุณที่นี่ เป็นต้น", // คำใบ้เกี่ยวกับข้อผิดพลาด: จริง, // กลุ่มแฟล็กที่จำเป็น: เท็จ, // ตัวชี้กลุ่ม);

var AllChecks=;//และนี่คืออาร์เรย์ที่จะจัดเก็บอ็อบเจ็กต์ที่เลือกไว้ทั้งหมด หากโปรแกรมเมอร์ไปที่ไซต์เมื่อมีการจัดวางอย่างสมบูรณ์แล้ว (นั่นคือการกระทำเกิดขึ้นในนิยายวิทยาศาสตร์) แนวทางนี้ถือว่ายอดเยี่ยม แต่บ่อยครั้งที่บางสิ่งบางอย่างจะต้องทำให้เสร็จอย่างแน่นอน รวมถึงส่วนเพิ่มเติมด้วยฟิลด์เพิ่มเติม

จากนั้นคุณสามารถลองยัดข้อมูลการยืนยันลงในแอตทริบิวต์ที่ไม่ได้มาตรฐานเพื่อเปลี่ยนเรื่องพูดน้อย

กลายเป็นสัตว์ประหลาดตัวใหญ่อย่างเราจะเน้นไปที่ตัวเลือกนี้ เรามีไว้สำหรับความเก่งกาจ

จากนั้นเราป้อนแท็กที่ประมวลผลดังต่อไปนี้:

ชื่อ	แน่นอนว่ามันเป็นมาตรฐาน แต่ที่นี่เราจะเขียนข้อความเกี่ยวกับความผิดพลาดในสนาม และเราจะแสดงมันในรูปแบบ “ระบุ”+ชื่อ
cfm_check	ธงยืนยันคือสิ่งที่เราจะใช้เพื่อค้นหาฟิลด์ที่กำลังตรวจสอบ และสามารถรับค่าต่อไปนี้: Y หมายความว่าคุณต้องตรวจสอบ อีเมลหรือหมายเลข – หมายถึง การตรวจสอบมาตรฐานทางอีเมลหรือหมายเลข/โทรศัพท์หากเต็ม Y_email / Y_num – ตรวจสอบบังคับทางอีเมลหรือหมายเลข groupID(Y) – ล้อมรอบองค์ประกอบในกลุ่มด้วยตัวระบุ groupID พร้อมพารามิเตอร์การตรวจสอบที่ระบุในวงเล็บ
cfm_confirminfo	ตามค่าเริ่มต้น ข้อผิดพลาดจะแสดงทันทีหลังจากตรวจสอบองค์ประกอบ ซึ่งไม่สะดวกเสมอไป ดังนั้นให้เราระบุในคุณลักษณะนี้ว่าตัวเลือก jq ขององค์ประกอบหลังจากนั้นข้อผิดพลาดจะปรากฏขึ้น ตัวอย่างเช่น cfm_confirminfo=’#placeForErrors’
cfm_function	เพื่อไม่ให้ซับซ้อน cfm_check ที่โอเวอร์โหลด ที่นี่เราจะเขียนชื่อของฟังก์ชันการตรวจสอบฟิลด์ที่ไม่ได้มาตรฐาน

สคริปต์สำหรับตรวจสอบฟิลด์เสร็จสมบูรณ์

เราได้รับข้อมูลแล้ว เหลือเพียงการประมวลผลข้อมูลเท่านั้น อัลกอริทึมที่นี่ไม่ซับซ้อน:

ที่อินพุตเราให้ตัวชี้ไปยังแบบฟอร์มที่จะทำการตรวจสอบ (เราสามารถมีหลายแบบฟอร์มในหน้านั้น!);
เราวิ่งผ่าน องค์ประกอบที่ระบุแบบฟอร์มตรวจสอบว่ากรอกถูกต้อง
หากมีข้อผิดพลาด เราจะทำเครื่องหมาย หากไม่ เราจะอนุญาตให้มีการตรวจสอบแบบฟอร์ม

อาจถึงเวลาสร้างโค้ด js ที่ใช้งานฟังก์ชันการทำงานอย่างน้อยบางส่วน เนื่องจากข้อความจำนวนมากดังกล่าวได้ถูกเขียนลงไปแล้ว

If(typeof cFM_classError === "unknown")//ที่นี่เราเขียนคลาส css ที่กำหนดให้กับฟิลด์ที่ไม่ถูกต้อง var cFM_classError="cFM_wrong"; ฟังก์ชั่น cFM_checktrueAttr(parent)//เตรียมข้อมูลสำหรับการประมวลผล //(parent – jq-pointer ไปยังแบบฟอร์มหรือบล็อกการรวม) ( var error=true; //ล้างข้อมูลหลังจากฟังก์ชันที่ถูกเรียกใช้ก่อนหน้านี้ $("div. "+cFM_classError).remove ();//ลบคำแนะนำ $("."+cFM_classError).each(function())(//ลบข้อผิดพลาดที่เน้น $(this).removeClass(cFM_classError); )); //look สำหรับช่องที่จะตรวจสอบ var inputsToHandle=false ; if(typeof parent !== "unknown") inputsToHandle=parent.find(""); else inputsToHandle=$("");// ถ้าไม่ได้ระบุ parent มาตรวจสอบทุกอย่าง //คว้าองค์ประกอบที่พบและสังเกต inputsToHandle.each(function())( if(error) error=cFM_prepareChecking(this);//ตรวจสอบวัตถุ มองหาข้อผิดพลาดอย่างน้อยรายการเดียว มิฉะนั้น cFM_prepareChecking(สิ่งนี้) ; )); ส่งคืนข้อผิดพลาด;//คืนค่าจริงหากองค์ประกอบทั้งหมดผ่านข้อผิดพลาด และคืนค่าเท็จหากมีคนล้มเหลว ) ฟังก์ชัน cFM_prepareChecking(handle) // เริ่มการตรวจสอบ องค์ประกอบเฉพาะและทำเครื่องหมายสิ่งที่ผิด ( var error=true;/*return value; ความหมายคือเพียงเพื่อแสดงว่ามีข้อผิดพลาด ใช้ค่า: true - no error; false - field is not filling; "wrong" - field is filling failed. ;*/ // กำหนดด้วยลายเซ็นของฟิลด์หากตรวจพบข้อผิดพลาดในนั้น โดยค่าเริ่มต้น //"ระบุค่าฟิลด์" จะปรากฏขึ้นหากไม่มีการระบุชื่อ var title = " field value"; if(typeof $(handle).attr("title") !== "undefined" && $(handle).attr("title").length>0) title=$(handle).attr("title"); var after = handle;//куда лепить сообщение об ошибке var attribute = $(handle).attr("cFM_check");//значение великого атрибута cFM_check //а не задали ли какую !} ฟังก์ชั่นยุ่งยากเพื่อตรวจสอบสนาม?

if(typeof $(handle).attr("cFM_function") !== "unknown") var chkFunk=$(handle).attr("cFM_function");

//สุดท้าย ให้ตรวจสอบฟิลด์ if(typeof chkFunk !== "unknown") error=window($(handle));

ข้อผิดพลาดอื่น = cFM_checkFullness (หมายเลขอ้างอิง);

");//html error else//ถ้าตรวจสอบพิเศษด้วย html พิเศษ $(after).after(""); ) $(handle).addClass(cFM_classError);//เพิ่มคลาสข้อผิดพลาด if($(handle) . attr("type")=="radio"// เรากำลังสรุปฟังก์ชันปุ่มตัวเลือก $("").addClass(cFM_classError); error=false; return error) ฟังก์ชั่น cFM_checkFullness(handle) ฟังก์ชั่นมาตรฐานตรวจสอบ ( var error = true; //อ่านข้อมูลจากแอตทริบิวต์ var คุณลักษณะ = $(handle).attr("cFM_check"); //required flag var required = true; if(attribute.indexOf("Y")=== -1) required=false; //ตรวจสอบรูปแบบ var format=attribute; if(required) format=attribute.substr(2); switch($(handle).attr("type"))//ดูสิ่งที่เรามี สิ่งนี้สำหรับองค์ประกอบ (case "checkbox": if(!$(handle).prop("checked")) error=false; break; case "radio"://promised problems with radio if(!$(handle) prop("checked") && $(":checked").length==0) error=false; else error=true; // ทั้งข้อความ, เลือก และ textarea เหมือนกันที่นี่ ค่าเริ่มต้น: if(($ (handle) .val().trim().length==0 ||. $(handle).val()=="0") && จำเป็น) error=false; else ( if(format==="num" )// ตรวจสอบหมายเลข ( var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val())) error="wrong"; ) if( format==="email")//ตรวจสอบอีเมล ( var regCheck = new RegExp("^(+[-._+&])*+@([-0-9a-zA-Z] +[.] )+(2,6)$"); if(!regCheck.test($(handle).val())) error="ผิด";

) ) หยุดพัก; ) ข้อผิดพลาดในการส่งคืน; -

ตัวอย่างเช่น เราจะให้ฟังก์ชันการตรวจสอบพิเศษ เช่น การตรวจสอบการมีอยู่ของคำสองคำในการป้อนข้อมูล (ชื่อ นามสกุล หรือ ชื่อ นามสกุล) อินพุตที่ทริกเกอร์การตรวจสอบฟังก์ชันนี้จะถูกนำไปใช้ดังนี้:

ตอนนี้ หากฟังก์ชัน cFM_checkFullness() ดำเนินการได้สำเร็จ (นั่นคือ ส่งคืนค่าจริง) สคริปต์ควรส่งแบบฟอร์มสำหรับการประมวลผล วิธีดำเนินการนี้ขึ้นอยู่กับแบบฟอร์มเฉพาะ หากการยืนยันการส่งมาจากปุ่มส่ง คุณสามารถสมัครรับกิจกรรมการส่งแบบฟอร์ม (เมื่อส่ง) และจะส่งหรือไม่ก็ได้ ทั้งนี้ขึ้นอยู่กับผลลัพธ์ของการตรวจสอบ ตัวอย่างเช่นเช่นนี้:

และที่นี่ เช่น แท็กแบบฟอร์มจำนวนมาก หากการส่งเสร็จสิ้นโดยใช้ ajax ทุกอย่างก็ง่ายดาย: เรียกมันขึ้นอยู่กับผลลัพธ์ของฟังก์ชัน cFM_checktrueAttr($(this));

ในโค้ดข้างต้นไม่มีการตรวจสอบกลุ่ม (เนื่องจากความยุ่งยากของโค้ดเพิ่มขึ้นอย่างมาก และขนาดของแถบเลื่อนของบทความนี้อาจทำให้ผู้เข้าชมจำนวนมากกลัว) ความแตกต่างในอัลกอริธึมจะไม่มีนัยสำคัญ: การตรวจสอบองค์ประกอบในกลุ่มควรเปิดใช้งานในบล็อกแยกต่างหาก และข้อความแสดงข้อผิดพลาดควรปรากฏในองค์ประกอบเฉพาะทั้งนี้ขึ้นอยู่กับการทำงานของบล็อกทั้งหมด
จริงอยู่ ณ จุดนี้มันก็คุ้มค่าที่จะชะลอตัวลงและคิดว่า: จำเป็นจริงๆ หรือไม่ที่จะต้องแก้ไขโค้ดเป็นกลุ่มสนับสนุน หรือเราจะจำกัดตัวเองให้เขียนฟังก์ชันการตรวจสอบแยกต่างหากสำหรับฟิลด์ที่ซับซ้อนสองสามฟิลด์ได้หรือไม่

ในที่สุดเราจะได้อะไร? ด้วยการเชื่อมต่อไฟล์สองสามไฟล์ (.js และ .css) เราจะได้รับฟังก์ชันการตรวจสอบคุณสมบัติที่คุณสามารถนำไปใช้กับไซต์ใดๆ ได้อย่างอุ่นใจ โดยมีการเชื่อมต่อ jquery ท้ายที่สุดแล้ว การมีชุดในมือจะดีกว่ามาก เครื่องมือสำเร็จรูปแทนที่จะใช้เวลามากมายในการผลิตงานเหล่านั้นก่อนงานแต่ละงานที่เป็นประเภทเดียวกัน

การเชื่อมต่อและตัวอย่าง

ประการแรกเราต้องการ ไลบรารี jquery- คุณสามารถดาวน์โหลดได้จากเว็บไซต์อย่างเป็นทางการ
หรือเพียงแทรกบรรทัดลงในส่วนหัว (สิ่งที่อยู่ภายในแท็ก) ของไซต์ของคุณ

จากนั้นดาวน์โหลด (คลิกขวา -> รายการที่คุณชอบพร้อมคำว่า "บันทึก") จากที่นี่ไฟล์ที่มีโค้ด js และหากจำเป็นไฟล์ที่มีสไตล์ css สำหรับฟิลด์ที่ผิดพลาดจากที่นี่
เราเพิ่มเข้าไปในส่วนหัวด้วย: ตอนนี้คุณต้องจัดเรียงแอตทริบิวต์ของฟิลด์แบบฟอร์มตาม ขึ้นอยู่กับประเภทของเช็คที่คุณต้องการดำเนินการ
ขั้นตอนสุดท้ายคือการเพิ่มแท็กเหตุการณ์ onsubmit: “onsubmit="return cFM_checktrueAttr($(this));""

ตอนนี้เรามาลองใช้การตรวจสอบแบบฟอร์มง่ายๆ กัน

เมื่อเพิ่มแบบฟอร์มลงในไซต์ เช่น แบบฟอร์ม ข้อเสนอแนะมักจะจำเป็นต้องตรวจสอบช่องทั้งหมดหรือบางช่องก่อนส่งเพื่อให้แน่ใจว่าช่องกรอกข้อมูลครบถ้วน ตามทฤษฎีแล้วสิ่งนี้สามารถทำได้ โดยใช้ PHP, อย่างไรก็ตาม โดยใช้จาวาสคริปต์อนุญาตให้คุณยกเลิกการโหลดสคริปต์เซิร์ฟเวอร์โดยถ่ายโอนการกระทำทั้งหมดไปยังเบราว์เซอร์ของผู้ใช้โดยตรง

สมมติว่าเรามีรูปแบบขนาดเล็กที่ประกอบด้วยอินพุต 2 ช่อง (ข้อความและรหัสผ่าน) พื้นที่ข้อความ และปุ่มส่ง งานของเราคือการตรวจสอบว่าอินพุตและพื้นที่ข้อความสองรายการแรกว่างเปล่าทันทีก่อนที่จะส่งแบบฟอร์ม หากไม่มีช่องว่าง ให้ส่งแบบฟอร์ม หากมีช่องว่าง คุณจะต้องล้อมรอบด้วยกรอบสีแดง แสดงข้อความในรูปแบบการแจ้งเตือนว่าต้องกรอกข้อมูลทุกช่อง จากนั้นจึงปิดการส่งแบบฟอร์ม หลังจากที่ผู้ใช้ลบการแจ้งเตือน สีของกรอบฟิลด์ควรกลับสู่สถานะเดิม เว็บไซต์ของ Zheka Nesmelov จะช่วยให้คุณออกแบบแบบฟอร์มได้อย่างสวยงาม

เพื่อให้ทุกอย่างทำงานได้อย่างที่ควรจะเป็น เราจะผูกค่าที่ส่งคืนโดยฟังก์ชัน send() เข้ากับเหตุการณ์ onsubmit ของแบบฟอร์ม ฟังก์ชั่นนี้จะคืนค่าเป็นจริงหรือเท็จ ขึ้นอยู่กับว่ากรอกข้อมูลครบทุกช่องแล้ว หากคืนค่าเป็นเท็จ เมื่อคลิกปุ่มแล้ว แบบฟอร์มจะไม่ถูกส่ง หากเป็นจริง แบบฟอร์มก็จะถูกส่งไป โปรดทราบว่าเราไม่ได้ให้รหัสแก่ฟิลด์ต่างๆ (ซึ่งจะทำให้สามารถเชื่อมต่อผ่าน JavaScript DOM ได้ง่ายขึ้นมาก)

การตรวจสอบความสมบูรณ์ของฟิลด์แบบฟอร์มใน JavaScript

ตอนนี้เรามาดูโค้ด JavaScript กันดีกว่า จะมีสองฟังก์ชันที่นี่ ฟังก์ชัน send() แรกจะทำการตรวจสอบจริง ด้วยค่าของตัวแปรที่ถูกต้องเราจะเข้าใจว่ามีการกรอกข้อมูลทุกช่องหรือไม่หลังจากการตรวจสอบเสร็จสิ้น ในองค์ประกอบ เราวางองค์ประกอบทั้งหมดของรูปแบบแรก (ดัชนี = 0) ของเอกสารของเรา แทนที่จะใช้ 0 คุณสามารถใช้ชื่อของแบบฟอร์มเป็นสตริงได้ (หากระบุ) ต่อไปในลูป เราจะดูองค์ประกอบทั้งหมดของแบบฟอร์มนี้ พร้อมตรวจสอบว่าองค์ประกอบปัจจุบันเป็น textarea หรืออินพุตด้วย type = text || รหัสผ่าน. ถ้าเป็นเช่นนั้นให้ตรวจสอบ มูลค่า มูลค่า ขององค์ประกอบนี้- ท้ายที่สุดแล้ว ค่า จะมีข้อความที่ผู้ใช้ป้อน ถ้าค่า = บรรทัดว่างจากนั้นเราจะมอบหมาย เส้นขอบขององค์ประกอบสีแดง และตั้งค่าตัวแปรที่ถูกต้องเป็นเท็จ ในตอนท้ายสุด หลังจากผ่านองค์ประกอบทั้งหมดแล้ว เราจะตรวจสอบความถูกต้อง หากเป็นเท็จ เราจะแสดงการแจ้งเตือน ปิดการใช้งานการส่งแบบฟอร์ม และเน้นสีแดงเฉพาะฟิลด์ที่ไม่ได้กรอก มิฉะนั้นให้ส่งแบบฟอร์ม

ฟังก์ชันที่สองในโค้ด JavaScript จะถูกดำเนินการทันทีหลังจากโหลดเอกสารแล้ว เมื่อคุณวางเมาส์ไว้เหนือแบบฟอร์ม (เหตุการณ์ onmouseover) การวนซ้ำจะเริ่มวนซ้ำผ่านองค์ประกอบทั้งหมด ถ้าธาตุใดธาตุหนึ่ง คุณสมบัติ CSS ชายแดน= "สีแดงทึบ 2px" จากนั้นจะมีการกำหนดค่าเริ่มต้น (สีแดงจะถูกลบออก)

นั่นคือทั้งหมดที่ สิ่งที่เหลืออยู่คือการตกแต่งรูปร่างของคุณให้สวยงาม!

แสดงความคิดเห็นคลิก "ถูกใจ" ("ถูกใจ") และ "บันทึก" แล้วฉันจะเขียนสิ่งอื่นที่น่าสนใจสำหรับคุณ :)

ฉันกำลังส่งคำขอ ajax ข้ามโดเมนไปยังหน้า php ของฉันบนเซิร์ฟเวอร์ ฉันกำลังส่งแบบฟอร์มจาก html ผ่าน ajax ไปยังของฉัน หน้า phpบนเซิร์ฟเวอร์ ปัญหาเกี่ยวกับการตรวจสอบฝั่งไคลเอ็นต์

ฉันไม่รู้วิธีตรวจสอบฝั่งไคลเอ็นต์ก่อนที่จะส่งแบบฟอร์ม

แบบฟอร์ม HTML แบบฟอร์มมาตรฐาน, ตำแหน่งของช่องป้อนข้อมูล: ชื่อ, นามสกุล, ข้อความ.... แบบฟอร์ม HTML ของฉันบนฝั่งไคลเอ็นต์:

var เอาท์พุต = $(".nesa"); $(document).ready(function())( $("#form1").submit(function (e) ( e.preventDefault(); $.ajax(( url: "http://www.example.com) / form.php", crossDomain: true, //set as a cross domain request type: "post", data: $("#form1").serialize(), beforeSend: function())( // เพิ่มสปินเนอร์ $ (" .spinner").ผนวก("

"); ), ความสำเร็จ: function (data) ( $(".nesa").html(data); alert("sent " + data); ), ข้อผิดพลาด: function())( output.text("Message is ไม่ได้ส่ง!"); ) )); )); ));

การตรวจสอบความถูกต้องเป็นอย่างไร? ฉันพยายามใส่รหัสใน sendmail แต่ก็ไม่มีโชค หรือเป็นไปได้ที่จะใช้ sendHandler? แนวคิดก็คือเมื่อผู้ใช้คลิกปุ่ม "ส่ง" การตรวจสอบนี้จะทำงาน และหาก "วางที่อยู่" ล้มเหลวอีเมล

- ตอนนี้เมื่อฉันคลิกปุ่มส่ง คุณจะส่งข้อมูลไปยังเซิร์ฟเวอร์ ฉันต้องการให้ช่องป้อนข้อมูลแรกได้รับการตรวจสอบ

แบบฟอร์มนี้เป็นงานจริงในการส่งข้อมูลไปยังเซิร์ฟเวอร์ แต่เพียงต้องทราบวิธีการตรวจสอบความถูกต้อง จะใส่การตรวจสอบความถูกต้องในการโทร ajax ได้ที่ไหน?

ขอบคุณ

5 คำตอบ

การเรียงลำดับ:

กิจกรรม กรุณายืนยันแบบฟอร์มก่อนที่จะส่งคำขอของอาแจ็กซ์

- หากไม่มีข้อผิดพลาด ควรส่งคำขอ ajax มิฉะนั้นจะส่งคืน false คุณสามารถทำได้:

$("#form1").submit(function (e) ( e.preventDefault(); // รับค่าชื่อล็อกอินและตัดออก var name = $.trim($("#name").val()) ; // ตรวจสอบว่าว่างเปล่าจาก not if (name === "") ( alert("Text-field is Empty."); return false; ) ));

คุณยังสามารถใช้ฟังก์ชัน OnKeyUp ได้

ก่อนอื่น คุณใช้แบบฟอร์ม AJAX จริงหรือ

$(document).on("click", "input", function() ( // Validate form // Add error message on failed, and return // Else send form via AJAX ));

อย่างไรก็ตาม คุณสามารถใช้เหตุการณ์เบลอของ jQuery เป็นทางเลือกในการตรวจสอบแต่ละฟิลด์เมื่อผู้ใช้ไปยังฟิลด์ถัดไป คุณยังสามารถตรวจสอบทุกครั้งที่ผู้ใช้กดปุ่มด้วยการกดปุ่ม

สร้างฟังก์ชันเพื่อตรวจสอบแบบฟอร์มที่คืนค่าจริง/เท็จ เรียกใช้ฟังก์ชันก่อน $.ajax ตรวจสอบว่า return เป็นเท็จหรือไม่ให้ return.. ดูตัวอย่างด้านล่าง...

ถ้า(!validateForm()) กลับเท็จ;

ฉันมักจะตรวจสอบพวกเขาก่อนที่จะเข้าสู่การโทร AJAX นี่คือการสอบของฉัน

$("#form_nieuwsbrief").bind("submit",function())( var name = $("input").val(); var email = $("input").val(); var ดำเนินการ = จริง ; if (name=="")( $("input").css(("border": "2px solid red")); ดำเนินการต่อ = false; ) if (email=="")( $(" input ").css(("border///2px solid red")); Continue = false; ) if(proceed == false)( $("#msg").append("คุณงอข้อมูลใน te vullen . "); setTimeout(function())( $(".alert").fadeOut(400, function())( $(this).remove(); )) ;),10000); ) ถ้า(ดำเนินการ = = true) ( // โทร ajax

เป็นเพียงจดหมายข่าวที่ขอชื่อและที่อยู่อีเมลเท่านั้น แต่หลักการก็เหมือนกัน ก่อนที่จะทำการเรียก ajax ให้สร้างคำสั่ง if else ด้วยตัวแปรที่คุณตั้งค่าหากมีสิ่งใดเป็นเท็จ มิฉะนั้นคุณจะต้องยึดเช็คเริ่มต้นของเขาเพื่อดำเนินการต่อ

“Fool-proof” คือชุดมาตรการป้องกันการป้อนข้อมูล ข้อมูลไม่ถูกต้องในรูปร่าง เช่น หากคุณต้องการกรอกข้อมูลในช่อง จำนวนบวกจาก 0 ถึง 10 แล้วควรตรวจสอบว่าผู้ใช้ไม่ได้ป้อนข้อความหรือตัวเลขที่ไม่อยู่ในนั้น ช่วงที่กำหนด, เช่น. จำนวนไม่ควรน้อยกว่าศูนย์และมากกว่าสิบ

เหตุใดจึงป้อนข้อมูลที่ไม่ถูกต้อง? ส่วนใหญ่จะทำด้วยเหตุผลสามประการ

ผู้ใช้ทำผิดพลาดโดยไม่ได้ตั้งใจ เช่น เขาอ่านสิ่งที่จำเป็นต้องระบุโดยไม่ตั้งใจ

หน้าเว็บถามข้อมูลในลักษณะคลุมเครือ ปล่อยให้ผู้ใช้เดาและคาดเดาว่าพวกเขาต้องการอะไรจริงๆ อย่างไรก็ตามความคิดเห็นของผู้พัฒนาและผู้ใช้อาจไม่ตรงกันเสมอไป

มีคนจำนวนหนึ่งที่มองว่าคำแนะนำเป็นสิ่งท้าทายและพยายามทำสิ่งที่ตรงกันข้าม ผู้ใช้ดังกล่าวให้เหตุผลดังนี้: “ใช่ พวกเขาขอให้ฉันป้อนตัวเลข จะเกิดอะไรขึ้นถ้าฉันระบุตัวอักษร” จากนั้นพวกเขาจะถามข้อมูลที่ไม่ถูกต้องอย่างเห็นได้ชัดและดูว่าข้อมูลดังกล่าวนำไปสู่อะไร

ควรเข้าใจว่าการใช้ถ้อยคำที่แม่นยำและถูกต้องแม้ว่าจะช่วยลดโอกาสที่จะเกิดข้อผิดพลาด แต่ก็ไม่ได้ช่วยคุณจากสิ่งเหล่านั้น แต่อย่างใด เท่านั้น วิธีการทางเทคนิคทางฝั่งเซิร์ฟเวอร์ช่วยให้คุณได้รับผลลัพธ์ที่ต้องการและหลีกเลี่ยงการป้อนข้อมูลที่ไม่ถูกต้อง อย่างไรก็ตาม การแก้ไขหรือที่เรียกกันว่าการตรวจสอบฝั่งไคลเอ็นต์ทำให้คุณสามารถตรวจสอบข้อมูลที่ผู้ใช้ป้อนเพื่อความถูกต้องได้อย่างรวดเร็ว โดยไม่ต้องส่งแบบฟอร์มไปยังเซิร์ฟเวอร์ ซึ่งจะช่วยประหยัดเวลาของผู้ใช้และลดภาระบนเซิร์ฟเวอร์ จากมุมมองของการใช้งาน ยังมีข้อดีอีกด้วย - ผู้ใช้จะได้รับข้อความทันทีเกี่ยวกับข้อมูลที่เขาป้อนไม่ถูกต้องและสามารถแก้ไขข้อผิดพลาดได้

ช่องที่ต้องกรอก

ต้องกรอกแบบฟอร์มบางช่องก่อนจึงจะถูกส่งไปยังเซิร์ฟเวอร์ สิ่งนี้ใช้กับแบบฟอร์มลงทะเบียนซึ่งคุณจะต้องป้อนข้อมูลเข้าสู่ระบบและรหัสผ่าน หากต้องการระบุฟิลด์ที่ต้องกรอก ให้ใช้แอตทริบิวต์ที่จำเป็น ดังที่แสดงในตัวอย่างที่ 1

ตัวอย่างที่ 1 คุณลักษณะที่จำเป็น

HTML5 IE 10+ Cr Op Sa Fx

ช่องที่ต้องกรอก

เข้าสู่ระบบ:

รหัสผ่าน:

ต้องกรอกข้อมูลในช่องที่ต้องกรอกก่อนส่งแบบฟอร์ม มิฉะนั้นแบบฟอร์มจะไม่ถูกส่งไปยังเซิร์ฟเวอร์และเบราว์เซอร์จะออกคำเตือนเกี่ยวกับเรื่องนี้ ประเภทของข้อความขึ้นอยู่กับเบราว์เซอร์ เช่น Chrome จะแสดงคำแนะนำเครื่องมือดังแสดงในรูปที่ 1 1.

ข้าว. 1. ไม่ได้กรอกข้อมูลในช่องที่ต้องกรอก

ความถูกต้องของข้อมูล

เริ่มแรก มีสองฟิลด์ที่อินพุตของผู้ใช้จะถูกตรวจสอบโดยอัตโนมัติ นี่คือที่อยู่เว็บและที่อยู่อีเมล เบราว์เซอร์ Chromeตรวจสอบความถูกต้องของฟิลด์ข้อมูลปฏิทินด้วย แต่เนื่องจากไม่มีอินเทอร์เฟซการเลือกปฏิทินแบบคลิกเมาส์ กฎต่อไปนี้ใช้กับองค์ประกอบเหล่านี้

ที่อยู่เว็บ ( ) ต้องมีโปรโตคอล (http://, https://, ftp://)
ที่อยู่อีเมล ( ) จะต้องมีตัวอักษรหรือตัวเลขอยู่หน้าสัญลักษณ์ @ หลังจากนั้นตามด้วยจุดและโดเมนระดับบนสุด

เบราว์เซอร์มีนโยบายในการตรวจสอบข้อมูลผู้ใช้ที่แตกต่างกันเล็กน้อย ตัวอย่างเช่น การทดแทน Opera โปรโตคอล http:// ก่อนข้อความที่ป้อนโดยอัตโนมัติ ในขณะที่เบราว์เซอร์อื่นๆ คาดหวังจากผู้ใช้ Chrome และ Opera ต้องการสิ่งนั้น ที่อยู่ทางไปรษณีย์มีประเด็นคือมันไม่จำเป็นสำหรับ Firefox

ตัวอย่างที่ 2 แสดงแบบฟอร์มที่มีช่องที่ต้องกรอกซึ่งมีการตรวจสอบความถูกต้องของสองช่องโดยเบราว์เซอร์

ตัวอย่างที่ 2: ความถูกต้องของข้อมูล

HTML5 IE 10+ Cr Op Sa Fx

ความถูกต้องของข้อมูล

กรอกแบบฟอร์ม (ต้องกรอกทุกช่อง)

ชื่อ:

อีเมล:

เว็บไซต์:

Opera จะตรวจสอบเฉพาะองค์ประกอบแบบฟอร์มหากมีแอตทริบิวต์ชื่อเท่านั้น

จะเกิดอะไรขึ้นใน Opera เมื่อคุณป้อนข้อมูลไม่ถูกต้องจะแสดงในรูป 2.

ข้าว. 2. คำเตือนเกี่ยวกับข้อมูลที่ไม่ถูกต้อง

เทมเพลตอินพุต

ข้อมูลบางอย่างไม่สามารถจัดอยู่ในประเภทองค์ประกอบของแบบฟอร์มได้ ดังนั้นคุณต้องใช้ช่องข้อความสำหรับข้อมูลดังกล่าว ในขณะเดียวกันก็เข้าตามมาตรฐานที่กำหนด ดังนั้น ที่อยู่ IP จึงมีตัวเลขสี่ตัวคั่นด้วยจุด (192.168.0.1) รหัสไปรษณีย์รัสเซียจำกัดไว้ที่หกหลัก (124007) โทรศัพท์ประกอบด้วยรหัสพื้นที่และจำนวนหลักโดยเฉพาะ ซึ่งมักจะคั่นด้วยเครื่องหมายยัติภังค์ (391 555-341-42) ฯลฯ เบราว์เซอร์จะต้องระบุเทมเพลตอินพุตเพื่อตรวจสอบ ข้อมูลที่ผู้ใช้ป้อนตามนั้น เมื่อต้องการทำเช่นนี้ จะใช้แอตทริบิวต์ pattern และค่าของมันคือนิพจน์ทั่วไป ค่าทั่วไปบางค่าแสดงอยู่ในตาราง 1.

ตัวอย่างที่ 3 ขอให้คุณป้อน ค่าเลขฐานสิบหก color (#ffcc00) และหากไม่อยู่ในช่วงนี้ เบราว์เซอร์จะแสดงข้อความแสดงข้อผิดพลาด

ตัวอย่างที่ 3 เทมเพลตอินพุต

HTML5 IE 10+ Cr Op Sa Fx

การป้อนสี

ป้อนค่าสีเลขฐานสิบหก (ต้องขึ้นต้นด้วย #)

ในรูป รูปที่ 3 แสดงคำเตือนในเบราว์เซอร์ Chrome

ข้าว. 3. ข้อมูลที่ป้อนไม่ตรงกับเทมเพลต

การยกเลิกการตรวจสอบ

การตรวจสอบไม่จำเป็นเสมอไปสำหรับแบบฟอร์ม ตัวอย่างเช่น นักพัฒนาอาจต้องการใช้ โซลูชั่นที่เป็นสากลใน JavaScript และไม่จำเป็นต้องตรวจสอบซ้ำโดยเบราว์เซอร์อีกต่อไป ในกรณีเช่นนี้ คุณจะต้องปิดใช้งานการตรวจสอบความถูกต้องในตัว เมื่อต้องการทำเช่นนี้ ให้ใช้แอตทริบิวต์ novalidate ของแท็ก ตัวอย่างที่ 4 แสดงการใช้คุณลักษณะนี้

ตัวอย่างที่ 4: การยกเลิกการตรวจสอบ

HTML5 IE 10+ Cr Op Sa Fx

ตรวจสอบแอตทริบิวต์ใหม่

เพื่อจุดประสงค์ที่คล้ายกัน มีการใช้แอตทริบิวต์ formnovalidate ซึ่งเพิ่มลงในปุ่มสำหรับส่งแบบฟอร์ม ในกรณีนี้เพื่อแท็ก ในกรณีนี้ แบบฟอร์มจากตัวอย่างที่ 4 จะมีลักษณะดังนี้