Trang đích SEO. Tối ưu hóa nội bộ của các trang đích. Và đây là những gì bạn cần làm cho việc này

Xác thực trường phía máy khách là điều mà mọi biểu mẫu nên có, không có nghi ngờ gì về điều đó. Thứ nhất, người dùng không cần phải chờ đợi và lãng phí thần kinh của mình. Thứ hai, bạn thể hiện rằng bạn quan tâm đến khách truy cập. Thật tuyệt khi người khách biết trước mình đã làm gì sai.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách viết xác thực biểu mẫu jQuery trong thời gian thực. Nếu bạn muốn xem những gì bạn có thể nghĩ ra, bạn có thể nhấp vào DEMO và xem qua.

Hôm nay chúng ta sẽ học gì? Làm cách nào để triển khai xác thực jquery?

Có nhiều cách để đạt được điều này, đây là những cách phổ biến nhất:

Chúng tôi có thể tạo thẻ SPAN (sẽ chứa thông tin xác thực) bên cạnh trường nhập và cung cấp cho nó một ID cụ thể để chúng tôi sẽ truy cập vào đó.

Chúng tôi có thể gói từng trường trong thẻ P, bên trong thẻ này chúng tôi tạo SPAN sẽ chứa thông tin về xác thực của trường.

Bạn cũng có thể bọc trường P bằng một thẻ, bên trong thẻ này bạn có thể “tìm hiểu” SPAN (nhanh chóng sử dụng jquery).

Tất cả điều này sẽ hoạt động, nhưng nó sẽ không cách tốt nhất thực hiện. Tại sao? Bởi vì có quá nhiều mã HTML bổ sung trong biểu mẫu đầu vào mà chúng ta không cần. Phải được quan sát.

Chúng ta sẽ làm theo cách tôi đã làm cho chính mình. Theo tôi đây là điều tuyệt vời nhất giải pháp đúng, mặc dù không ai làm điều đó. Thành thật mà nói, tôi chưa thấy ai khác làm điều này... nếu bạn biết, hãy viết bình luận cho tôi ở cuối bài học.

Chúng ta sẽ làm gì?

Chúng tôi sẽ viết mâu đơn giản, đẹp và sạch sẽ mã ngữ nghĩa, không có thẻ không cần thiết.

Vì mọi người điền vào từng trường riêng lẻ nên chúng tôi có thể theo dõi và xác thực nó một cách nhanh chóng:

Xác định vị trí của nó trong cửa sổ (góc trên bên trái)
Xác định chiều rộng của nó
Bằng cách này chúng ta sẽ biết điểm cuối của nó ở đâu.
Hãy thêm thông tin xác thực vào khối DIV có ID cụ thể, ở bên phải của một trường cụ thể. Chúng ta cũng sẽ chỉ định các lớp tương ứng .chính xác hoặc .không chính xác.

Lưu ý: điều này cũng được chấp nhận đối với những người không sử dụng JavaScript trong trình duyệt của họ. Những điều này sẽ được xác nhận ở phía máy chủ.

Cấu trúc dự án

Chúng ta sẽ cần tạo ba tệp:

chỉ mục.html

phong cách.css

xác thực.js

Chúng ta sẽ xem xét mọi thứ từng bước một... đầu tiên là mã HTML, sau đó là những thứ cần thiết Kiểu CSS, sau này chúng ta sẽ tập trung vào tập lệnh xác thực biểu mẫu jQuery chính.

Viết HTML

Chúng ta hãy phá vỡ tất cả ...

Bước 1 - tạo mã HTML cơ bản

Để bắt đầu, hãy tạo một tệp index.html và dán tệp này vào đó mã cơ sở. Bạn thấy rằng chúng tôi đang kết nối tập tin jQueryở dưới cùng, trước validation.js, chứa tập lệnh xác thực của chúng tôi.

Bước 2 - tạo một hình chia thành ba phần

Chúng tôi sẽ tạo một biểu mẫu gồm ba phần để xem cách xác thực các trường nhập và trình kiểm tra khác nhau. Để phân chia, chúng tôi sử dụng FIELDSET và LABEL cho tiêu đề của từng phần:

Thông tin cá nhân (tên người dùng, ngày sinh, giới tính, xe).

Email (trường nhập email của người dùng).

Về tôi ( thông tin ngắn gọn về người dùng).

Xác thực biểu mẫu theo thời gian thực bằng email thông tin cá nhân jQuery Về bạn Bước 3 - thêm trường và nút xác nhận

Tuyệt vời, bây giờ hãy tạo một số trường đầu vào cho biểu mẫu của chúng ta. Đối với bài học của chúng tôi, chúng tôi đã chọn cụ thể một số lĩnh vực khác nhau:

Ba trường INPUT (tên người dùng, ngày sinh, địa chỉ email).
Nút RADIO để chọn giới tính.
HỘP ĐẶT cho Phương tiện giao thông người dùng.
TEXTAREA để biết thông tin người dùng.
NÚT cho nút “Xác nhận”.

Chúng tôi sẽ gói từng trường LABLE và trường đầu vào trong thẻ P để tách nó thành các khối riêng biệt. Tệp index.html cuối cùng của bạn bây giờ sẽ trông như thế này:

Xác thực biểu mẫu theo thời gian thực bằng thông tin cá nhân jQuery

Họ và tên:

Ngày sinh (dd-mm-yyyy):

Tôi là: Nam Nữ

Tôi sở hữu: ô tô máy bay xe đạp tàu thủy

E-mail

Thư điện tử ( [email được bảo vệ]):

Về bạn

Hãy cho chúng tôi biết một chút về bản thân bạn:

nộp

Điều này có thể trông hơi đáng sợ, nhưng đó là vì có rất nhiều trường nhập trong biểu mẫu của chúng ta. Trên thực tế, không có gì phức tạp ở đây. Lưu tệp của bạn và xem trong trình duyệt của bạn để xem điều gì sẽ xảy ra. Bây giờ chúng ta hãy trang trí một chút...

Thêm CSS

Vì kiểu dáng CSS không phải là chủ đề chính của hướng dẫn hôm nay nên chúng ta sẽ không tập trung vào nó. Chúng ta chỉ cần mã CSS này để làm cho biểu mẫu trông đẹp mắt và tất cả các khối được đặt đúng chỗ.

Tạo một tệp style.css và dán mã bên dưới vào đó. Bây giờ, biểu mẫu có xác thực jquery trong tương lai trông thật tuyệt vời. Không phải nó?

Nội dung ( nền: #efefef; lề: 0; đệm: 0; viền: không có; căn chỉnh văn bản: giữa; phông chữ: bình thường 13px Georgia, "Times New Roman", Times, serif; color: #222; ) #content ( chiều rộng: 500px; lề: 0 tự động; lề dưới: 25px; căn lề trên: 25px; đường viền liền khối 1px #d1d1d1; 7px; bán kính đường viền: 7px; phông chữ: bình thường 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; khoảng cách giữa các chữ cái: màu -1px: #273953; : 3px; ) nhãn ( con trỏ: con trỏ; ) .block ( display: block; ) nhỏ ( letter-spacing: 1px; font-size: 11px; font-style: italic; color: #9e9e9e; ) .info ( text- căn chỉnh: bên trái; phần đệm: 5px; kích thước phông chữ: 11px; vị trí: tuyệt đối; hiển thị: không có; -webkit-border-radius: 5px ; ; -webkit-box-shadow: -1px 1px 2px #a9a9a9; bóng hộp: -1px 1px 2px #a9a9a9; ) .error ( nền: #f60000; viền: 3px rắn #d50000; ) .đúng ( nền: #56d800; viền: 3px rắn #008000; ) .sai ( font-weight: đậm; color: #e90000; ) .normal ( font-weight: normal; color: #222; ) #send ( nền: #3f5a81; width: 100%; border: 5px Solid #0F1620; font: đậm 30px Verdana, sans-serif; color: #fafafa; text- bóng: 1px 1px 1px #0F1620; -webkit-border-bán kính: 7px; bán kính đường viền: 7px ) #send:hover ( nền: #4d76b1; đường viền: 5px liền khối #253750; màu: #fff; ) #send:active ( thụt lề văn bản: -10px; )

Chúng tôi viết xác thực jQuery các hình thức

Đây là phần thú vị và hấp dẫn nhất của bài học. Nhưng trước tiên, chúng ta cần suy nghĩ và mô tả những điểm chính trong công việc của mình. Bạn cần phải lên kế hoạch cho mọi thứ.

Đang lên kế hoạch

Trước khi viết, hãy tự hỏi mình ba câu hỏi:

Chúng ta cần gì từ kịch bản này?

Chúng ta muốn làm điều này như thế nào?

Chúng ta sẽ đạt được điều này như thế nào?

Điều này rõ ràng, chúng tôi muốn tập lệnh xác thực biểu mẫu. Nhưng bằng cách nào? Chúng tôi muốn nó thực hiện việc này trong thời gian thực (khi người dùng điền xong trường nhập) và khi nhấp vào nút "Xác nhận". Do đó, chúng ta sẽ phải viết một số hàm: riêng cho từng trường đầu vào và cho tất cả các biểu mẫu (sẽ được gọi khi nhấp vào nút “Xác nhận”).

Để tránh lặp lại mã, chúng ta sẽ cần tạo Đối tượng JavaScript vì điều này.

Chúng ta cần gì cho việc này?

Đối tượng JS trong trường hợp của chúng ta sẽ được gọi là jVal, nó sẽ chứa các phương thức sau:

jVal.fullName
jVal.birthDate
jVal.gender
jVal.vehicle
jVal.email
jVal.about

Biến sẽ chứa trạng thái của lỗi hiện tại là jVal.errors. Và một phương pháp kiểm tra xem có lỗi nào không và xác nhận việc gửi biểu mẫu hoặc từ chối nó. Nếu tìm thấy bất kỳ lỗi nào, nó sẽ hướng người dùng đến phần đầu của biểu mẫu, nơi anh ta có thể điền chính xác vào tất cả các trường.

Phương thức này được gọi là - jVal.sendIt

Bây giờ chúng ta có thể bắt đầu phát triển tập lệnh jQuery xác nhận mẫu. Một khi chúng ta viết phương thức đầu tiên thì mọi thứ sẽ diễn ra dễ dàng và nhanh chóng hơn.

Hãy bắt đầu công việc

Mã cơ bản rất đơn giản, hoàn toàn có mọi thứ mã jquery sẽ được chứa trong cú pháp này:

$(document).ready(function())( jVal = ( ); ));

Xác thực trường tên người dùng

Phương pháp đầu tiên của chúng tôi sẽ xử lý trường "tên người dùng". Dán nó vào bên trong đối tượng jVal như trong ví dụ:

Var jVal = ("fullName" : function() ( ) );

Bây giờ hãy viết một vài dòng mã bên trong phương thức. Chỉ cần dán chúng vào và chúng ta sẽ xem điều đó có nghĩa gì tiếp theo:

$("body").append(""); var nameInfo = $("#nameInfo"); var ele = $("#fullname"); var pos = ele.offset();

Dòng 1: Chúng tôi thêm khối DIV vào tài liệu. Thông tin lớp, cung cấp một số kiểu cho khối, được xác định trong tệp style.css, cũng làm cho nó trở nên vô hình bằng cách sử dụng display:none; Tìm một ID, điều này là để có truy cập nhanh vào khối này và thao tác với nó sử dụng jQuery. Khối DIV này sẽ chứa thông tin xác thực trường.

Dòng 3: Chúng ta viết lệnh gọi khối này bằng một biến vì chúng ta sẽ sử dụng nó một số lượng lớn một lần.

Dòng 4: Giống như trường hợp trước, chúng tôi ghi lại kết nối đến trường tên đầy đủ trong một biến. Chúng tôi cũng sẽ sử dụng nó nhiều lần.

Hàm jQuery offset() trả về vị trí hiện tại của một phần tử so với tài liệu. Trả về dưới dạng một đối tượng chứa thuộc tính top và left. Chúng tôi sử dụng hàm này trên ele để xác định vị trí của trường đầu vào.

Bây giờ hãy thêm một vài dòng nữa...

NameInfo.css(( top: pos.top-3, left: pos.left+ele.width()+15 ));

Như bạn có thể thấy, chúng ta đang bắt đầu hoạt động với các kiểu của khối nameInfo. Cụ thể, chúng tôi đặt vị trí của nó ở bên phải trường nhập. Để thực hiện việc này, chúng tôi di chuyển nó lên 3 pixel (dòng mã thứ 2) và di chuyển nó 15 pixel sang bên phải của trường (dòng mã thứ 3).

Chúng tôi đã viết được 50% phương pháp đầu tiên, chúng tôi sẽ hoàn thiện nó. Đã đến lúc xác định xem người dùng đã nhập dữ liệu chính xác như thế nào và thực hiện hành động...

If(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"); }

Trông không ổn lắm phải không? Không có gì phải sợ cả...

Dòng 1: Chúng ta kiểm tra tên người dùng nhập vào không dưới 6 ký tự.

Dòng 2: Đặt biến jVal.errors thành true vì chúng tôi đã xác định rằng tên người dùng quá ngắn. Chúng tôi sẽ sử dụng điều này hơn nữa.

Dòng 3: Chúng ta bắt đầu thao tác với phần tử nameInfo (trong đó chúng ta hiển thị thông tin). Đầu tiên, chúng ta loại bỏ lớp đúng và gán lỗi cho lớp. Tiếp theo chúng ta chèn nội dung vào phần tử nameInfo, đây là thông tin tên phải dài hơn 6 ký tự. Và cuối cùng, chúng tôi hiển thị thông báo của mình cho người dùng.

Dòng 4: Chúng ta bắt đầu thao tác với phần tử ele (mẫu nhập tên người dùng). Chúng tôi loại bỏ lớp bình thường và gán nó sai.

Dòng 5: Nếu tên người dùng đủ dài thì...

Dòng 6: Chúng ta bắt đầu thao tác với phần tử nameInfo. Nếu lỗi lớp được gán, chúng tôi loại bỏ nó và gán lớp đúng. Chúng tôi nhét một “con chim” vào bên trong để hiểu rằng mọi thứ đều ổn. Và hiển thị thông báo cho người dùng.

Dòng 7: Chúng ta thao tác với phần tử ele. Chúng tôi loại bỏ lớp sai nếu nó được áp dụng và áp dụng lớp bình thường.

Chúng tôi đã tạo phương thức xác thực đầu tiên của mình! Đã đến lúc kiểm tra nó. Chúng ta cần chắc chắn rằng phương thức của chúng ta sẽ được gọi khi người dùng nhập xong tên của họ. Để thực hiện điều này, chúng ta cần đính kèm một sự kiện vào một hành động. Chúng ta sẽ sử dụng hàm thay đổi(). Dán mã ví dụ bên dưới vào đối tượng jVal:

$("#fullname").change(jVal.fullName);

Điều này có nghĩa là gì trong ngôn ngữ của con người: nếu người dùng thay đổi giá trị của trường "Tên đầy đủ" và sau đó thực hiện xong với nó, thì phương thức fullName sẽ được gọi để xác thực trường.

Tệp xác thực.js của bạn bây giờ sẽ chứa mã sau:

< 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); });

Xác thực trường ngày sinh

Bây giờ mọi thứ sẽ diễn ra nhanh hơn. Chúng ta chỉ cần tạo một bản sao của phương thức fullName và thực hiện một số thay đổi.

Bây giờ, hãy sao chép phương thức fullName, dán nó vào bên dưới và đổi tên thành ngày sinh. Và thực hiện những thay đổi sau:

Bất cứ nơi nào nameInfo xuất hiện, hãy thay thế nó bằng BirthInfo
Thay vì #fullname, hãy sử dụng #birthday cho biến ele
Dán mẫu này biểu hiện thông thường bên dưới là biểu thức BirthInfo.css():

var patt = /^(2)\-(2)\-(4)$/i;

Biểu thức if() cũ của chúng ta sẽ là:

if(!patt.test(ele.val()))

Thông báo cho trường này sẽ như sau: nhập ngày ở định dạng đúng

Phương thức ngày sinh sẽ trông như thế này sau khi thực hiện những thay đổi này:

"birthDate" : function ()( $("body").append(""); var BirthInfo = $("#birthInfo"); var ele = $("#birthday"); var pos = ele.offset( ); BirthInfo.css(( top: pos.top-3, left: pos.left+ele.width()+15 )); /i; if(!patt.test(ele.val())) ( jVal.errors = true; BirthInfo.removeClass("true").addClass("error").html("← nhập ngày theo đúng định dạng ").show(); ele.removeClass("normal").addClass("sai"); ) else ( BirthInfo.removeClass("error").addClass("true").html("√").show (); ele.removeClass("sai").addClass("bình thường" ) )

Sử dụng biểu thức chính quy (dòng 14), chúng tôi kiểm tra xem ngày có ở định dạng 28/03/1987 hay không. Ở dòng 16, chúng tôi kiểm tra xem ngày sinh của người dùng có khớp với mẫu biểu thức chính quy hay không.

Và tất nhiên, chúng ta cần đính kèm sự kiện Change() vào trường ngày sinh:

$("#birthday").change(jVal.birthDate);

Bây giờ chúng ta có một phương thức xác thực biểu mẫu jQuery đang hoạt động khác. Bạn đã làm rất tốt!

Xác nhận trường trở thành

Một lần nữa, sao chép phương thức fullName, đổi tên giới tính và thực hiện các thay đổi sau:

Đổi tên tất cả nameInfo thành giới tínhInfo
Thay vì #fullname, hãy sử dụng #woman cho biến ele
Trong biểu thức giới tínhInfo.css(), hãy thay đổi biến trên cùng thành top: pos.top-10 và từ trái sang trái: pos.left+ele.width()+60
Câu lệnh if() của chúng ta phải là:

if($("input:checked").length === 0)

Thông điệp gửi đến người dùng sẽ là: bạn là nam hay nữ?

Phương thức giới tính sẽ trông như thế này sau khi thay đổi:

"giới tính" : function ()( $("body").append(""); var giớiInfo = $("#genderInfo"); var ele = $("#woman"); var pos = ele.offset( ); giới tínhInfo.css(( top: pos.top-10, left: pos.left+ele.width()+60 )); if($("input:checked").length === 0) ( jVal .errors = true; giới tínhInfo.removeClass("đúng").addClass("error").html("← bạn là nam hay nữ?").show(); ("sai"); khác ( giới tínhInfo..removeClass("error").addClass("đúng").html("√").show(); ele.removeClass("sai").addClass("bình thường " ); ) )

Ở dòng 14, chúng tôi kiểm tra xem có bao nhiêu bộ chọn radio được chọn. Nếu là 0 thì người dùng không chọn gì cả, chúng tôi hiển thị thông báo lỗi.

Và như mọi khi, chúng tôi đính kèm phương pháp giới tính cho các nút radio:

$("input").change(jVal.gender);

Trình kiểm tra xác thực - quyền sở hữu xe

Bây giờ hãy sao chép phương thức giới tính và đổi tên phương tiện, thực hiện các thay đổi sau:

Thay thế tất cả thông tin giới tính bằng thông tin xe cộ
Thay vì #woman, hãy nhập #ship cho ele.
Trong biểu thức VehicleInfo.css(), giá trị của left phải được để lại: pos.left+ele.width()+40
Câu lệnh if() của chúng ta bây giờ sẽ là:

if($("input:checked").length