การตรวจสอบฟิลด์ฝั่งไคลเอ็นต์เป็นสิ่งที่ทุกแบบฟอร์มควรมี ไม่ต้องสงสัยเลย ประการแรก ผู้ใช้ไม่จำเป็นต้องรอและเปลืองความกังวลใจ ประการที่สอง คุณแสดงให้เห็นว่าคุณใส่ใจผู้เยี่ยมชมของคุณ เป็นเรื่องดีมากสำหรับผู้มาเยี่ยมที่จะรู้ล่วงหน้าว่าเขาทำอะไรผิด
ในบทช่วยสอนนี้ เราจะได้เรียนรู้วิธีเขียนการตรวจสอบความถูกต้องของแบบฟอร์ม jQuery แบบเรียลไทม์ หากคุณต้องการดูว่าคุณสามารถทำอะไรได้บ้าง คุณสามารถคลิก DEMO และดูได้เลย
วันนี้เราจะเรียนรู้อะไร?
เราจะใช้การตรวจสอบความถูกต้องของ jquery ได้อย่างไร? มีหลายวิธีในการบรรลุเป้าหมาย นี่คือวิธีที่พบบ่อยที่สุด:
เราสามารถสร้างแท็ก SPAN (ซึ่งจะมีข้อมูลการตรวจสอบ) ถัดจากช่องป้อนข้อมูล และกำหนด ID เฉพาะที่เราจะเข้าถึงได้
เราสามารถล้อมแต่ละฟิลด์ด้วยแท็ก P ซึ่งภายในนั้นเราสร้าง SPAN ที่จะมีข้อมูลเกี่ยวกับการตรวจสอบความถูกต้องของฟิลด์
คุณยังสามารถล้อมฟิลด์ P ด้วยแท็ก ซึ่งภายในนั้นคุณสามารถ "เรียนรู้" SPAN (ได้ทันทีโดยใช้ jquery)
ทั้งหมดนี้จะใช้ได้ผล แต่จะไม่เป็นเช่นนั้น วิธีที่ดีที่สุดการดำเนินการ ทำไม เนื่องจากมีโค้ด HTML พิเศษมากเกินไปในรูปแบบอินพุตที่เราไม่ต้องการ จะต้องสังเกต
เราจะทำแบบเดียวกับที่ฉันทำเพื่อตัวเอง ในความคิดของฉัน นี่เป็นวิธีแก้ปัญหาที่ถูกต้องที่สุด แม้ว่าจะไม่มีใครทำเช่นนี้ก็ตาม จริงๆ แล้วฉันไม่เคยเห็นใครทำแบบนี้มาก่อน... ถ้าคุณรู้ เขียนความคิดเห็นถึงฉันในตอนท้ายของบทเรียนได้เลย
เราจะทำอย่างไร? เราจะเขียน รูปแบบที่เรียบง่ายสวยงามและสะอาด รหัสความหมายโดยไม่มีแท็กที่ไม่จำเป็น
เนื่องจากผู้คนกรอกข้อมูลในแต่ละฟิลด์แยกกัน เราจึงสามารถติดตามและตรวจสอบได้ทันที: - กำหนดตำแหน่งในหน้าต่าง (มุมซ้ายบน)
- กำหนดความกว้าง
- ด้วยวิธีนี้เราจะรู้ว่าจุดสิ้นสุดของมันอยู่ที่ไหน
- มาเพิ่มข้อมูลการตรวจสอบในบล็อก DIV ด้วย ID เฉพาะทางด้านขวาของฟิลด์เฉพาะ นอกจากนี้เรายังจะกำหนดคลาสที่เกี่ยวข้อง .correct หรือ .incorrect
หมายเหตุ: สิ่งนี้ยังเป็นที่ยอมรับสำหรับผู้ที่ไม่ได้ใช้ JavaScript ในเบราว์เซอร์ของตน สิ่งเหล่านี้จะได้รับการตรวจสอบบนฝั่งเซิร์ฟเวอร์
โครงสร้างโครงการ เราจะต้องสร้างไฟล์สามไฟล์:
ดัชนี.html
สไตล์.css
ตรวจสอบความถูกต้อง.js
เราจะดูทุกอย่างทีละขั้นตอน... อันดับแรกคือโค้ด HTML จากนั้นจึงค่อยที่จำเป็น สไตล์ CSSในภายหลังเราจะมุ่งเน้นไปที่สคริปต์ตรวจสอบความถูกต้องของแบบฟอร์ม jQuery หลัก
การเขียน HTML มาทำลายมันทั้งหมดลง ...
ขั้นตอนที่ 1 - สร้าง HTML พื้นฐานรหัส ในการเริ่มต้น ให้สร้างไฟล์ index.html และวางโค้ดพื้นฐานนี้ลงไป คุณจะเห็นว่าเรากำลังรวมไฟล์ jQuery ไว้ด้านล่างก่อน validation.js ซึ่งมีสคริปต์ตรวจสอบความถูกต้องของเรา
ขั้นตอนที่ 2 - สร้างรูปร่างที่แบ่งออกเป็นสามส่วน เราจะสร้างแบบฟอร์มสามส่วนเพื่อดูวิธีตรวจสอบช่องป้อนข้อมูลและตัวตรวจสอบต่างๆ สำหรับแผนก เราใช้ FIELDSET และ LABEL สำหรับส่วนหัวของแต่ละส่วน:
ข้อมูลส่วนบุคคล (ชื่อผู้ใช้ วันเกิด เพศ ยานพาหนะ)
อีเมล (ช่องป้อนอีเมลของผู้ใช้)
เกี่ยวกับฉัน ( ข้อมูลโดยย่อเกี่ยวกับผู้ใช้)การตรวจสอบแบบฟอร์มแบบเรียลไทม์โดยใช้ข้อมูลส่วนบุคคล jQuery อีเมลเกี่ยวกับคุณ ขั้นตอนที่ 3 - เพิ่มฟิลด์และปุ่มยืนยัน เยี่ยมเลย ตอนนี้เรามาสร้างช่องป้อนข้อมูลสำหรับแบบฟอร์มของเรากันดีกว่า สำหรับบทเรียนของเรา เราได้เลือกสาขาที่แตกต่างกันหลายสาขาโดยเฉพาะ:
- สาม ช่องอินพุต(ชื่อผู้ใช้ วันเดือนปีเกิด ที่อยู่อีเมล)
- ปุ่ม RADIO เพื่อเลือกเพศ
- กล่องกาเครื่องหมายสำหรับ ยานพาหนะผู้ใช้
- TEXTAREA สำหรับข้อมูลผู้ใช้
- ปุ่มสำหรับปุ่ม "ยืนยัน"
เราจะล้อมแต่ละ LABLE และฟิลด์อินพุตไว้ในแท็ก P เพื่อแยกออกเป็นบล็อกแยกกัน ตอนนี้ของคุณ ไฟล์สุดท้าย index.html จะมีลักษณะดังนี้:
การตรวจสอบแบบฟอร์มแบบเรียลไทม์โดยใช้ข้อมูลส่วนบุคคล jQuery
ชื่อเต็ม:
วันเกิด (วว-ดด-ปปปป):
ฉัน: ผู้ชาย ผู้หญิง
ฉันเป็นเจ้าของ: รถยนต์ เครื่องบิน จักรยาน เรือ
อีเมล อีเมล ( [ป้องกันอีเมล]):
เกี่ยวกับคุณ บอกเราสักเล็กน้อยเกี่ยวกับตัวคุณ:
ส่ง
อาจดูน่ากลัวเล็กน้อย แต่นั่นเป็นเพราะมีช่องป้อนข้อมูลจำนวนมากในแบบฟอร์มของเรา ที่จริงแล้วไม่มีอะไรซับซ้อนที่นี่ บันทึกไฟล์ของคุณและดูในเบราว์เซอร์ของคุณเพื่อดูว่าเกิดอะไรขึ้น เรามาตกแต่งกันสักหน่อย...
การเพิ่ม CSS เนื่องจากสไตล์ CSS ไม่ใช่หัวข้อหลักของบทช่วยสอนในวันนี้ เราจึงจะไม่พูดถึงมัน เราแค่ต้องการโค้ด CSS นี้เพื่อทำให้ฟอร์มดูดีและบล็อกทั้งหมดให้เข้าที่
สร้างไฟล์ style.css และวางโค้ดด้านล่างลงไป ตอนนี้แบบฟอร์มที่มีการตรวจสอบ jquery ในอนาคตดูน่าทึ่ง มันไม่ได้เป็น?
เนื้อความ ( พื้นหลัง: #efefef; ระยะขอบ: 0; ช่องว่างภายใน: 0; เส้นขอบ: ไม่มี; การจัดแนวข้อความ: กึ่งกลาง; แบบอักษร: ปกติ 13px Georgia, "Times New Roman", Times, serif; สี: #222; ) #content ( ความกว้าง: 500px; ระยะขอบ: 0 อัตโนมัติ; ระยะขอบล่าง: 25px; การขยาย: 0; การจัดตำแหน่งข้อความ: ซ้าย; ) ชุดฟิลด์ ( ระยะขอบด้านบน: 25px; การขยาย: 15px; เส้นขอบ: 1px solid #d1d1d1; -webkit-border- รัศมี: 7px; -moz-border-radius: 7px; border-radius: 7px; ) fieldset legend ( แบบอักษร: ปกติ 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; ระยะห่างระหว่างตัวอักษร : -1px; color: #273953; ) อินพุต พื้นที่ข้อความ ( padding: 3px; ) ป้ายกำกับ ( เคอร์เซอร์: ตัวชี้; ) .block ( จอแสดงผล: block; ) ขนาดเล็ก ( ระยะห่างตัวอักษร: 1px; ขนาดตัวอักษร: 11px; font- สไตล์: ตัวเอียง; สี: #9e9e9e; ) .info ( การจัดตำแหน่งข้อความ: ซ้าย; การขยาย: 5px; ขนาดตัวอักษร: 11px; สี: #fff; ตำแหน่ง: สัมบูรณ์; จอแสดงผล: ไม่มี; -webkit-border-radius: 5px ; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px #a9a9a9; -moz-box-shadow: -1px 1px 2px #a9a9a9; กล่องเงา: -1px 1px 2px #a9a9a9; ) .error ( พื้นหลัง: #f60000; เส้นขอบ: 3px solid #d50000; ) .correct ( พื้นหลัง: #56d800; เส้นขอบ: 3px solid #008000; ) .wrong ( น้ำหนักแบบอักษร: ตัวหนา; สี: #e90000; ) .normal ( น้ำหนักแบบอักษร: ปกติ; สี: #222; ) #send ( พื้นหลัง: #3f5a81; ความกว้าง: 100%; เส้นขอบ: 5px ทึบ #0F1620; แบบอักษร: ตัวหนา 30px Verdana, sans-serif; สี: #fafafa; ข้อความ- เงา: 1px 1px 1px #0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; ) #send:hover ( พื้นหลัง: #4d76b1; border: 5px solid #253750; สี: #fff; ) #send:active ( เยื้องข้อความ: -10px; )
การเขียนการตรวจสอบแบบฟอร์ม jQuery นี่เป็นส่วนที่น่าสนใจและน่าตื่นเต้นที่สุดของบทเรียน แต่ก่อนอื่นเราต้องคิดและอธิบายประเด็นหลักของงานของเราก่อน คุณต้องวางแผนทุกอย่าง
กำลังวางแผน ก่อนที่เราจะเขียน ให้ถามตัวเองสามคำถาม:
เราต้องการอะไรจากสคริปต์นี้?
เราต้องการทำเช่นนี้อย่างไร?
เราจะบรรลุเป้าหมายนี้ได้อย่างไร?
เห็นได้ชัดว่าเราต้องการให้สคริปต์ตรวจสอบแบบฟอร์ม แต่อย่างไร? เราต้องการให้ดำเนินการแบบเรียลไทม์ (เมื่อผู้ใช้กรอกข้อมูลในช่องป้อนข้อมูลเสร็จแล้ว) และเมื่อคลิกปุ่ม "ยืนยัน" ดังนั้นเราจะต้องเขียนฟังก์ชันหลายอย่าง: แยกกันสำหรับแต่ละช่องป้อนข้อมูลและทุกรูปแบบ (ซึ่งจะถูกเรียกเมื่อคลิกปุ่ม "ยืนยัน")
เพื่อป้องกันการซ้ำซ้อนของโค้ด เราจะต้องสร้าง วัตถุจาวาสคริปต์สำหรับสิ่งนี้.
เราต้องการอะไรสำหรับสิ่งนี้? วัตถุ JS ในกรณีของเราจะถูกเรียกว่า jVal ซึ่งจะมีวิธีการดังต่อไปนี้:
- jVal.fullName
- jVal.birthDate
- jVal.เพศ
- jVal.ยานพาหนะ
- jVal.อีเมล
- jVal.about
ตัวแปรที่จะมีสถานะ ข้อผิดพลาดปัจจุบัน- jVal.ข้อผิดพลาด และวิธีการตรวจสอบว่ามีข้อผิดพลาดหรือไม่และยืนยันการส่งแบบฟอร์มหรือปฏิเสธ หากพบข้อผิดพลาด ระบบจะนำผู้ใช้ไปยังจุดเริ่มต้นของแบบฟอร์ม ซึ่งเขาสามารถกรอกข้อมูลทุกช่องได้อย่างถูกต้อง
วิธีการนี้เรียกว่า - jVal.sendIt
ตอนนี้เราสามารถเริ่มพัฒนาได้แล้ว สคริปต์ jQueryการตรวจสอบแบบฟอร์ม เมื่อเราเขียนวิธีแรกแล้วทุกอย่างจะง่ายขึ้นและเร็วขึ้น
มาเริ่มงานกันเลย พื้นฐานของโค้ดนั้นเรียบง่าย โดยโค้ด jquery ทั้งหมดจะอยู่ภายในไวยากรณ์นี้:
$(เอกสาร).ready(function())( jVal = ( ); ));
การตรวจสอบฟิลด์ชื่อผู้ใช้ วิธีแรกของเราจะประมวลผลช่อง "ชื่อผู้ใช้" วางลงในวัตถุ jVal ดังแสดงในตัวอย่าง:
Var jVal = ( "ชื่อเต็ม" : function() ( ) );
ตอนนี้เรามาเขียนโค้ดสองสามบรรทัดภายในวิธีการนี้ เพียงวางเข้าไปแล้วเราจะดูว่านั่นหมายความว่าอย่างไรต่อไป:
$("body").ผนวก(""); var nameInfo = $("#nameInfo"); var ele = $("#ชื่อเต็ม"); var pos = ele.offset();
บรรทัดที่ 1: เราเพิ่มบล็อก DIV ให้กับเอกสาร ข้อมูลคลาส ให้สไตล์บางอย่างแก่บล็อก ซึ่งถูกกำหนดไว้ในไฟล์ style.css และยังทำให้มองไม่เห็นด้วยการใช้ display:none; ค้นหา ID นี่คือเพื่อที่จะมี เข้าถึงได้รวดเร็วไปที่บล็อกนี้และจัดการกับมันด้วย โดยใช้ jQuery. บล็อก DIV นี้จะมีข้อมูลการตรวจสอบฟิลด์
บรรทัดที่ 3: เราเขียนการเรียกไปยังบล็อกนี้ในตัวแปร เนื่องจากเราจะใช้มัน จำนวนมากครั้งหนึ่ง.
บรรทัดที่ 4: เช่นเดียวกับในกรณีก่อนหน้านี้ เราบันทึกการเชื่อมต่อกับฟิลด์ชื่อเต็มในตัวแปร เราจะใช้มันหลายครั้งเช่นกัน
jQuery offset() ฟังก์ชันส่งกลับตำแหน่งปัจจุบันขององค์ประกอบที่เกี่ยวข้องกับเอกสาร ส่งกลับเป็นวัตถุที่มีคุณสมบัติด้านบนและด้านซ้าย เราใช้ฟังก์ชันนี้กับ ele เพื่อกำหนดตำแหน่งของฟิลด์อินพุต
ตอนนี้ขอเพิ่มอีกสองสามบรรทัด ...
NameInfo.css(( บน: pos.top-3, ซ้าย: pos.left+ele.width()+15 ));
อย่างที่คุณเห็น เรากำลังเริ่มดำเนินการกับสไตล์ของบล็อก nameInfo โดยเฉพาะเรากำหนดตำแหน่งไว้ทางด้านขวาของช่องป้อนข้อมูล ในการดำเนินการนี้ ให้เลื่อนขึ้นไป 3 พิกเซล (โค้ดบรรทัดที่ 2) และย้ายไปทางด้านขวาของฟิลด์ 15 พิกเซล (โค้ดบรรทัดที่ 3)
เราได้เขียนวิธีแรกไปแล้ว 50% เราจะนำมาให้จบ ถึงเวลาตัดสินว่าผู้ใช้ป้อนข้อมูลและดำเนินการอย่างถูกต้องเพียงใด...
ถ้า(ele.val().length< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
ดูไม่ดีเหรอ? ไม่มีอะไรต้องกลัว...
บรรทัดที่ 1: เราตรวจสอบว่าชื่อที่ผู้ใช้ป้อนมีอักขระไม่น้อยกว่า 6 ตัว
บรรทัดที่ 2: ตั้งค่าตัวแปร jVal.errors ให้เป็นจริง เนื่องจากเราได้พิจารณาแล้วว่าชื่อผู้ใช้สั้นเกินไป เราจะใช้สิ่งนี้ต่อไป
บรรทัดที่ 3: เราเริ่มดำเนินการด้วยองค์ประกอบ nameInfo ของเรา (ซึ่งเราแสดงข้อมูล) ขั้นแรก เราจะลบคลาสที่ถูกต้องออกและกำหนดข้อผิดพลาดของคลาส ต่อไปเราจะแทรกเนื้อหาลงในองค์ประกอบ nameInfo ซึ่งเป็นข้อมูลที่ชื่อต้องยาวเกิน 6 ตัวอักษร และสุดท้าย เราก็ทำให้ข้อความของเราปรากฏแก่ผู้ใช้
บรรทัดที่ 4: เราเริ่มจัดการองค์ประกอบเอเลของเรา (แบบฟอร์มป้อนชื่อผู้ใช้) เราลบคลาสปกติออกและมอบหมายให้คลาสผิด
บรรทัดที่ 5: หากชื่อผู้ใช้ยาวพอ ดังนั้น...
บรรทัดที่ 6: เราเริ่มจัดการองค์ประกอบ nameInfo หากมีการกำหนดข้อผิดพลาดของชั้นเรียน เราจะลบออกและกำหนดให้ชั้นเรียนถูกต้อง เราใส่ "นก" เข้าไปข้างในเพื่อทำความเข้าใจว่าทุกอย่างเรียบร้อยดี และแสดงข้อความให้กับผู้ใช้
บรรทัดที่ 7: เราดำเนินการโดยใช้องค์ประกอบเอเล เราจะลบคลาสที่ไม่ถูกต้องออก หากมีการใช้งาน และใช้คลาสปกติ
เราได้สร้างวิธีการตรวจสอบความถูกต้องวิธีแรกของเราแล้ว! ถึงเวลาทดสอบแล้ว เราต้องแน่ใจว่าวิธีการของเราจะถูกเรียกเมื่อผู้ใช้ป้อนชื่อเสร็จแล้ว เพื่อดำเนินการนี้ เราจำเป็นต้องแนบเหตุการณ์เข้ากับการดำเนินการ เราจะใช้ฟังก์ชัน change() วางโค้ดตัวอย่างด้านล่างใต้วัตถุ jVal:
$("#ชื่อเต็ม").change(jVal.fullName);
สิ่งนี้หมายความว่าอย่างไร ภาษามนุษย์: หากผู้ใช้เปลี่ยนค่าของฟิลด์ "ชื่อเต็ม" และดำเนินการเสร็จแล้ว จะมีการโทรเมธอด fullName ซึ่งจะตรวจสอบความถูกต้องของฟิลด์
ไฟล์ validate.js ของคุณควรมีรหัสต่อไปนี้:
< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
};
// bind jVal.fullName function to "Full name" form field
$("#fullname").change(jVal.fullName);
});
การตรวจสอบความถูกต้องของฟิลด์วันเดือนปีเกิด ตอนนี้ทุกอย่างจะเร็วขึ้น เราเพียงแค่ต้องทำสำเนาของเมธอด fullName และทำการเปลี่ยนแปลงบางอย่าง
ตอนนี้ให้คัดลอกเมธอด fullName วางไว้ด้านล่างแล้วเปลี่ยนชื่อเป็นวันเกิด และทำการเปลี่ยนแปลงดังต่อไปนี้:
- เมื่อใดก็ตามที่ nameInfo ปรากฏ ให้แทนที่ด้วยbirthInfo
- แทนที่จะใช้ #fullname ให้ใช้ #birthday สำหรับตัวแปร ele
- วางเทมเพลตนี้ การแสดงออกปกติด้านล่างนี้คือนิพจน์birthInfo.css():
var แพตต์ = /^(2)\-(2)\-(4)$/i; - นิพจน์ if() แบบเก่าของเราควรเป็น:
ถ้า(!patt.test(ele.val())) - ข้อความสำหรับฟิลด์นี้จะเป็น: พิมพ์วันที่ในรูปแบบที่ถูกต้อง
นี่คือลักษณะของวิธีวันเกิดหลังจากทำการเปลี่ยนแปลงเหล่านี้:
"birthDate" : function ()( $("body").append(""); varbirthInfo = $("#birthInfo"); var ele = $("#birthday"); var pos = ele.offset( );birthInfo.css(( บน: pos.top-3, ซ้าย: pos.left+ele.width()+15 )); var patt = /^(2)\-(2)\-(4)$ /i; if(!patt.test(ele.val())) ( jVal.errors = true; BirthInfo.removeClass("correct").addClass("error").html("← พิมพ์วันที่ในรูปแบบที่ถูกต้อง ").show(); ele.removeClass("normal").addClass("wrong"); ) else (birthInfo.removeClass("error").addClass("correct").html("√").show (); ele.removeClass("ผิด").addClass("ปกติ"); ) )
ใช้นิพจน์ทั่วไป (บรรทัดที่ 14) เราตรวจสอบว่าวันที่อยู่ในรูปแบบ 03/28/1987 ในบรรทัดที่ 16 เราตรวจสอบว่าวันเกิดของผู้ใช้ตรงกับรูปแบบนิพจน์ทั่วไป
และแน่นอน เราจำเป็นต้องแนบเหตุการณ์ change() เข้ากับช่องวันเดือนปีเกิด:
$("#birthday").change(jVal.birthDate);
ตอนนี้เรามีวิธีการตรวจสอบแบบฟอร์ม jQuery ที่ใช้งานได้อีกวิธีหนึ่ง เยี่ยมมาก!
การตรวจสอบความถูกต้องของสนามกลายเป็น อีกครั้ง ให้คัดลอกเมธอด fullName เปลี่ยนชื่อเป็นเพศ และทำการเปลี่ยนแปลงต่อไปนี้:
- เปลี่ยนชื่อ nameInfo ทั้งหมดเป็น sexInfo
- แทนที่จะใช้ #fullname ให้ใช้ #woman สำหรับตัวแปร ele
- ในนิพจน์ sexInfo.css() ให้เปลี่ยนตัวแปรบนสุดเป็นด้านบน: pos.top-10 และจากซ้ายไปซ้าย: pos.left+ele.width()+60
- คำสั่ง if() ของเราควรเป็น:
if($("input:checked").length === 0) - ข้อความถึงผู้ใช้จะเป็น: คุณเป็นผู้ชายหรือผู้หญิง?
นี่คือลักษณะของวิธีระบุเพศหลังจากการเปลี่ยนแปลง:
"gender" : function ()( $("body").append(""); var sexInfo = $("#genderInfo"); var ele = $("#woman"); var pos = ele.offset( ); sexInfo.css(( บน: pos.top-10, ซ้าย: pos.left+ele.width()+60 )); if($("input:checked").length === 0) ( jVal .errors = true; sexInfo.removeClass("correct").addClass("error").html("← are you a man or woman?").show(); ele.removeClass("normal").addClass ("ผิด"); ) else ( genderInfo..removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal" "); ) )
ในบรรทัดที่ 14 เราตรวจสอบจำนวนตัวเลือกวิทยุที่เลือก ถ้าเป็น 0 แสดงว่าผู้ใช้ไม่ได้เลือกอะไรเลย เราจะแสดงข้อความแสดงข้อผิดพลาด
และเช่นเคย เราได้แนบวิธีการเกี่ยวกับเพศไว้ด้วย ปุ่มตัวเลือก:
$("อินพุต").เปลี่ยน(jVal.gender);
เครื่องตรวจสอบความถูกต้อง - ความเป็นเจ้าของยานพาหนะ ตอนนี้เรามาคัดลอกวิธีการระบุเพศแล้วเปลี่ยนชื่อเป็นยานพาหนะ โดยทำการเปลี่ยนแปลงต่อไปนี้:
- แทนที่ sexInfo ทั้งหมดด้วย vehicleInfo
- แทนที่จะเป็น #woman ให้ป้อน #ship for ele
- ในนิพจน์ vehicleInfo.css() ค่าของ left ควรเหลือไว้: pos.left+ele.width()+40
- คำสั่ง if() ของเราตอนนี้ควรเป็น:
if($("input:checked").length
