บทความนี้ได้แชร์รหัสโมดูลผู้ใช้ของร้านหนังสือ Java Online สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ภาพการทำซ้ำ:
register.js
$ (function () {/ * * 1 รับข้อความแสดงข้อผิดพลาดทั้งหมดและวนซ้ำพวกเขาเรียกวิธีการเพื่อตรวจสอบว่าข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น! */$ (". errorclass") แต่ละ (ฟังก์ชั่น () {showerror ($ (นี่)); // ถ่ายโอนแต่ละองค์ประกอบและใช้แต่ละองค์ประกอบ ฟังก์ชั่น () {$ ("#submentbtn"). attr ("src", "/goods/images/regist2.jpg"); $ (". inputclass"). focus (function () {var labelid = $ (this) .attr ("id") + "ข้อผิดพลาด"; // ค้นหารหัสฉลากที่สอดคล้องกันผ่านกล่องอินพุต $ ("#" + labelid). text (""); // ล้างเนื้อหาของฉลาก! $ (". inputclass"). blur (function () {var id = $ (this) .attr ("id"); // รับ ID ของกล่องอินพุตปัจจุบัน var funname = "ตรวจสอบความถูกต้อง" + id.substring (0,1). touppercase () /** 5. ตรวจสอบเมื่อส่งแบบฟอร์ม*/$ ("#registform") ส่ง (ฟังก์ชั่น () {var bool = true; // ระบุว่าการตรวจสอบผ่านถ้า (! validateLoginname ()) {bool = false;} ถ้า (! if (! ValidateEmail ()) {bool = false; var value = $ ("#" + id) .val (); // รับเนื้อหากล่องอินพุต/ * 1. การตรวจสอบที่ไม่ว่างเปล่า */ถ้า (!) {/ * * รับป้ายกำกับที่เกี่ยวข้อง * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงป้ายชื่อ */$ ("#" + id + "ข้อผิดพลาด") Showerror ($ ("#" + id + "ข้อผิดพลาด")); กลับเท็จ; } / * * 2. การตรวจสอบความยาว * / if (value.length <3 || value.length> 20) { / * * รับป้ายกำกับที่สอดคล้องกัน * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงฉลาก * / $ ("#" + id + "ข้อผิดพลาด") ข้อความ ("ความยาวชื่อผู้ใช้ต้องอยู่ระหว่าง 3 และ 20!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); เท็จ; }/** 3. ลงทะเบียนตรวจสอบ*/$ .AJAX ({url: "/goods/userservlet", // servlet ที่จะขอข้อมูล: {วิธี: "ajaxvalidateLoginName", loginName: ค่า}, // พารามิเตอร์ไปยังเซิร์ฟเวอร์: "โพสต์" Asynchronous เราจะไม่รอให้เซิร์ฟเวอร์กลับมาและฟังก์ชั่นของเราจะทำงานลง ส่งคืน true;}/** วิธีการตรวจสอบรหัสผ่านเข้าสู่ระบบ*/ฟังก์ชั่น validateLoginPass () {var id = "LoginPass"; var value = $ ("#" + id) .val (); // รับเนื้อหากล่องอินพุต/ * * 1. การตรวจสอบที่ไม่ว่างเปล่า */if (! ค่า) {/ * * รับป้ายกำกับที่เกี่ยวข้อง * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงป้ายกำกับ */$ ("#" + id + "ข้อผิดพลาด") ข้อความ ("รหัสผ่านไม่ต้องว่าง!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); กลับเท็จ; } / * * 2. การตรวจสอบความยาว * / if (value.length <3 || value.length> 20) { / * * รับป้ายกำกับที่สอดคล้องกัน * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงฉลาก * / $ ("#" + id + "ข้อผิดพลาด") ข้อความ ("ความยาวรหัสผ่านต้องอยู่ระหว่าง 3 ถึง 20!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); เท็จ; } return true; }/** ยืนยันวิธีการตรวจสอบรหัสผ่าน*/ฟังก์ชั่น ValidaterElogInPass () {var id = "reloginPass"; var value = $ ("#" + id) .val (); // รับเนื้อหากล่องอินพุต/ * 1. การตรวจสอบที่ไม่ว่างเปล่า */ถ้า (!) {/ * * รับป้ายกำกับที่เกี่ยวข้อง * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงป้ายชื่อ */$ ("#" + id + "ข้อผิดพลาด") ข้อความ ("ยืนยันรหัสผ่าน Showerror ($ ("#" + id + "ข้อผิดพลาด")); กลับเท็จ; } / * * 2. ตรวจสอบว่าอินพุตทั้งสองนั้นสอดคล้องกัน * / if (value! = $ ("#loginPass"). val ()) { / * * รับป้ายกำกับที่สอดคล้องกัน * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงฉลาก * / $ ("#" + id + "ข้อผิดพลาด") ข้อความ ("อินพุตทั้งสองไม่สอดคล้องกัน!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); เท็จ; } return true; }/** วิธีการตรวจสอบอีเมล*/function validateMail () {var id = "อีเมล"; var value = $ ("#" + id) .val (); // รับเนื้อหากล่องอินพุต/ * 1. การตรวจสอบที่ไม่ใช่ NULL */if (! ค่า) {/ * * รับป้ายกำกับที่เกี่ยวข้อง * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงป้ายกำกับ */$ ("#" + id + "ข้อผิดพลาด") ข้อความ ("อีเมลไม่ว่าง!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); กลับเท็จ; }/ * * 2. การตรวจสอบรูปแบบอีเมล */if (!/^([A-za-z0-9 _-])+@([A-za-z0-9 _-])+((/. [a-za-z0-9 _-] {2,3}) {1,2}) + id + "ข้อผิดพลาด") ข้อความ ("รูปแบบอีเมลข้อผิดพลาด!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); เท็จ; }/** 3. ลงทะเบียนและตรวจสอบ*/$ .AJAX ({url: "/goods/userservlet", // servlet ที่จะได้รับข้อมูล: {วิธี: "ajaxvalidateemail", อีเมล: ค่า}, // พารามิเตอร์ไปยังเซิร์ฟเวอร์: "โพสต์" จะไม่รอให้เซิร์ฟเวอร์กลับมาและฟังก์ชั่นของเราจะทำงานลง กลับมาจริง; }/** วิธีการตรวจสอบรหัสการตรวจสอบ*/ฟังก์ชั่น validateverifyCode () {var id = "VerifyCode"; var value = $ ("#" + id) .val (); // รับเนื้อหากล่องอินพุต/ * * 1. การตรวจสอบที่ไม่ว่างเปล่า */ถ้า (!) {/ * * รับป้ายกำกับที่เกี่ยวข้อง * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงฉลาก */$ ("#" + id + "ข้อผิดพลาด") ข้อความ ("รหัสยืนยันไม่ได้!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); กลับเท็จ; } / * * 2. การตรวจสอบความยาว * / if (value.length! = 4) { / * * รับป้ายกำกับที่สอดคล้องกัน * เพิ่มข้อความแสดงข้อผิดพลาด * แสดงฉลาก * / $ ("#" + id + "ข้อผิดพลาด") ข้อความ ("รหัสตรวจสอบผิด!"); Showerror ($ ("#" + id + "ข้อผิดพลาด")); เท็จ; }/** 3. มันถูกต้อง*/$ .ajax ({url: "/goods/userservlet", // servlet ที่จะร้องขอข้อมูล: {วิธี: "ajaxvalidateverifycode", VerifyCode: ค่า}, // พารามิเตอร์ไปยังเซิร์ฟเวอร์: "โพสต์" Asynchronous เราจะไม่รอให้เซิร์ฟเวอร์กลับมาและฟังก์ชั่นของเราจะทำงานลง กลับมาจริง; }/ * * พิจารณาว่าองค์ประกอบปัจจุบันมีเนื้อหาหรือไม่ หากมีอยู่หน้าจะไม่ปรากฏ! */ฟังก์ชั่น showerror (ele) {var text = ele.text (); // รับเนื้อหาขององค์ประกอบถ้า (! ข้อความ) {// ถ้าไม่มีเนื้อหา ele.css ("แสดง", "ไม่มี"); // ซ่อนองค์ประกอบ} {// ถ้ามีเนื้อหา {/** 1 รับองค์ประกอบ <img>* 2. รีเซ็ต src* 3 ใช้มิลลิวินาทีเพื่อเพิ่มพารามิเตอร์*/$ ("#imgverifyCode"). attr ("src", "/goods/verifyCodeServlet? A =" + วันที่ใหม่ ()ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น