Trang Chủ-Tải chương trinh-Ví dụ về xác thực biểu mẫu với jQuery. Chúng ta cần gì cho việc này? Tạo séc tùy chỉnh

Ví dụ về xác thực biểu mẫu với jQuery. Chúng ta cần gì cho việc này? Tạo séc tùy chỉnh

Có rất nhiều bài viết về cách viết các quy tắc tùy chỉnh cho plugin jQuery validate, nhưng ít trong số đó giải thích hoạt động bên trong của plugin này, đó là những gì chúng ta sẽ thảo luận trong bài viết này.
Đây là phần đầu tiên của loạt bài viết "Hiểu về xác thực không phô trương của Asp.NET MVC".

1. Cách plugin xác thực jQuery hoạt động từ bên trong
2. Hiểu mã Html được tạo bởi xác thực không phô trương trong ASP.Net MVC
3. Hoạt động bên trong của plugin xác thực jQuery kín đáo trong ASP.Net MVC.

Chúng ta sẽ học được gì từ bài viết này:
1. Cách xác nhận một biểu mẫu.
2. Thông báo xác thực và cách chúng hoạt động.
3. Bổ sung quy tắc riêng Thẩm định.
4. Điều gì sẽ xảy ra chính xác khi chúng ta gọi phương thức xác nhận.

Cách xác thực biểu mẫu

Có 2 cách chính để xác thực biểu mẫu.
1. Sử dụng tên lớp làm quy tắc
Làm thế nào nó hoạt động

Chúng tôi thêm thuộc tính html "class" vào trường cần xác thực và điều này sẽ cho phép xác thực.
Vì vậy, nếu chúng ta cần trường văn bản là bắt buộc, chúng ta thêm giá trị thuộc tính class = "Required" vào phần tử đầu vào

HTML



JavaScript
$ (tài liệu) .ready (function () ($ ("form"). validate ();));
Bằng cách này, bạn có thể thêm nhiều quy tắc vào các lớp nhất định.

Ưu và nhược điểm của phương pháp này:
Chỉ hoạt động với các quy tắc không có đối số.
Chúng tôi đang sử dụng thuộc tính html "class" cho một thứ mà nó không có nghĩa là để làm.
Nhưng rất dễ cài đặt.

Phương pháp sử dụng "addClassRules"
Sử dụng hàm "addClassRules" cho chúng ta khả năng sử dụng quy tắc ghép cho một lớp duy nhất.

JavaScript
$ .validator.addClassRules ((tên: (bắt buộc: true, minlength: 2), zip: (bắt buộc: true, các chữ số: true, minlength: 5, maxlength: 5)));
Mã này thêm 2 quy tắc mới cho lớp "tên" và "zip" và nếu chúng ta có phần tử "đầu vào" có lớp "zip", thì các quy tắc áp dụng cho nó: giá trị của nó là bắt buộc, người dùng chỉ có thể nhập số và độ dài phải có chính xác 5 ký tự.

HTML

Thông tin: Để sử dụng thông điệp riêngđối với một quy tắc yêu cầu cụ thể trong quy tắc ghép, chúng tôi cần tạo ra một bí danh cho quy tắc "bắt buộc", tạo một quy tắc mới với bí danh đó và đặt một thông báo mặc định cho nó.

JavaScript
$ .validator.addMethod ("yêu cầu mới", $ .validator.methods.required, "cần có tên mới");
Hoặc chúng ta có thể sử dụng thuộc tính html "title", giá trị của nó sẽ là thông báo lỗi cho quy tắc ghép.

Lưu ý: Xác thực theo tên lớp chỉ hoạt động đối với các quy tắc xác thực không có đối số.

2. Thêm quy tắc dưới dạng đối tượng JSON vào phương thức validate ()
Theo cái tên, bạn hẳn đã đoán được rằng phương thức xác thực này sử dụng một đối tượng json, vì vậy chúng ta có thể xác định các trường chúng ta cần xác thực và các quy tắc xác thực cho chúng.

HTML


JavaScript
$ ("biểu mẫu"). validate ((quy tắc: (userEmail: (email: true, bắt buộc: true))));
Lưu ý: Khi chúng ta truyền đối tượng "rules" vào hàm "validate", khóa phải là giá trị của thuộc tính "name", không phải giá trị của "id". Như bạn có thể thấy trong ví dụ, khóa là "userEmail", giá trị của thuộc tính là "name" và thuộc tính "id" có một giá trị khác.

Ưu và nhược điểm của phương pháp này:

Cách tiếp cận này cung cấp cho chúng tôi khả năng sử dụng nhiều quy tắc xác thực hơn lấy các đối số như minlength, remote, equalTo, v.v.
Kiểm soát tuyệt vời và có thể điều chỉnh bằng tay đối với mọi thứ.
Nhưng người dùng phải thực hiện một chức năng "xác thực" riêng biệt với các tùy chọn khác nhau cho từng biểu mẫu.

Thêm hoặc xóa các quy tắc động.
Thêm quy tắc
Để thêm quy tắc, chúng tôi phải sử dụng phương thức "quy tắc" để phần tử jQuery sau khi biểu mẫu được xác thực và chuyển làm tham số đầu tiên là chuỗi "add" và là tham số thứ hai là đối tượng của các quy tắc mà chúng tôi muốn thêm vào phần tử này (chúng tôi cũng có thể chuyển đối tượng "thông báo" cho các quy tắc mà chúng tôi đã thêm) .

JavaScript
$ (". input"). quy tắc ("add", (bắt buộc: đúng, thông báo: (bắt buộc: đúng)))

Xóa quy tắc
Nếu chúng tôi muốn xóa quy tắc hoặc tập hợp quy tắc, chúng tôi chuyển chuỗi "remove" làm tham số đầu tiên cho phương thức "rules" và tham số thứ hai sẽ là một chuỗi chứa các quy tắc mà chúng tôi muốn xóa, được phân tách bằng dấu không gian.

JavaScript
$ (". input"). quy tắc ("remove", " nhỏ nhất lớn nhất");

Phương pháp điều chỉnh thủ công
JavaScript
var validator = $ ("form"). data ("validator"); validator.settings.rules.objectName = (bắt buộc: true)
Cách tiếp cận này rất hữu ích, nếu bạn đã tạo các quy tắc và đối tượng thông báo, bạn có thể mở rộng các quy tắc trình xác thực bằng chính của mình:

JavaScript
$ .extend (validator.settings, (quy tắc: quy tắc, thông báo: thông báo));

Thông báo xác thực và cách chúng hoạt động

Có ba cách để tùy chỉnh thông báo xác thực

1. Truyền đối tượng "messages" tới phương thức "validate". Đối tượng "thông báo" bao gồm các cặp khóa / giá trị. Chìa khóa là giá trị của thuộc tính "name" của phần tử. Giá trị là một đối tượng chứa mỗi quy tắc và thông điệp của nó.

JavaScript
$ ("biểu mẫu"). xác thực ((quy tắc: (userEmail: (email: true, bắt buộc: true)), tin nhắn: (userEmail: (email: "Vui lòng nhập email của bạn", bắt buộc: "*")))) ;
2. Xác định giá trị của thuộc tính "title" của phần tử

HTML

3. Sử dụng tin nhắn mặc định. Khi quy tắc xác thực được xác định, sẽ có các thông báo mặc định được tích hợp sẵn cho các quy tắc tích hợp.

Lưu ý: Ba phương thức này ghi đè lẫn nhau dựa trên mức độ ưu tiên, mức độ ưu tiên cao nhất là đối tượng "message" được truyền vào và mức độ ưu tiên thấp nhất là thông báo mặc định.

Thêm quy tắc xác thực của riêng bạn

Khi chúng tôi muốn thêm nhiều quy tắc xác thực hơn được xác định theo mặc định, chúng tôi sử dụng phương pháp
$ .validator.addMethod

Phương thức này chấp nhận các tham số sau:

  • tên quy tắc;
  • một chức năng thực hiện xác nhận;
  • tin nhắn mặc định.
Hàm thực hiện xác nhận có thể có hai hoặc ba tham số

JavaScript
function validationMethod (value, element) // OR function validationMethod (value, element, params)
Hãy giải thích các tùy chọn này.
Giá trị: Giá trị của phần tử DOM cần được xác thực
Phần tử: Bản thân phần tử DOM
Tham số: những gì chúng tôi truyền dưới dạng giá trị. Đối với ví dụ này, các quy tắc xác thực là những gì các tham số phải bằng nhau.

JavaScript
$ ("form"). validate ((quy tắc: (firstname: (so sánh: (type: "notequal", otherprop: "lastname")))));
trong ví dụ này, các tham số sẽ bằng (type: "notequal", otherprop: "lastname")

Ví dụ về việc thêm quy tắc của riêng bạn:

JavaScript
$ .validator.addMethod ("notnumbers", function (value, element) (return! / * /. test (value);), "Vui lòng không chèn số.")

Chính xác thì điều gì sẽ xảy ra khi chúng tôi gọi phương thức "xác thực"

Khi chúng tôi gọi phương thức xác thực trên một biểu mẫu, có rất nhiều điều khác nhau xảy ra đằng sau hậu trường:

Đối tượng "trình xác thực" được tạo với tất cả các quy tắc và tùy chọn được đính kèm với biểu mẫu.
Phương thức "validate" đính kèm "validator" bằng cách sử dụng "$ .data". Chúng ta có thể lấy nó bằng cách chọn biểu mẫu và gọi hàm jQuery "$ .data" và chuyển nó đến "trình xác nhận". Đối tượng "vaidator" là tất cả siêu dữ liệu xác thực cung cấp cho chúng tôi khả năng truy cập các tùy chọn xác thực bất kỳ lúc nào vòng đời các trang.
Sử dụng đối tượng này, chúng ta có thể thay đổi trong thời gian chạy các tùy chọn mà chúng ta đã chuyển cho phương thức xác thực, chẳng hạn như thêm hoặc xóa quy tắc, thay đổi hành vi nếu trường hợp lệ hoặc không hợp lệ hoặc thậm chí giới thiệu bộ chọn bỏ qua.

JavaScript
// lấy trình xác thực var validator = $ ("selector"). data ("validator")
Lưu ý: Khi bạn gọi phương thức "validate" trên một biểu mẫu đã được xác thực, nó sẽ chỉ trả về đối tượng "validator", $ .data cũng được sử dụng và mọi tùy chọn trước đó được chuyển cho phương thức "validate" sẽ bị xóa .

JavaScript
var validator = $ (". selector"). validate (/ * quy tắc sẽ bị bỏ qua * /)

Đính kèm sự kiện biểu mẫu
Điều gì sẽ xảy ra khi chúng tôi nhấn gửi và biểu mẫu được nhập với giá trị không hợp lệ cho trường mà chúng tôi đã đính kèm xác thực. Nếu một trong các trường không hợp lệ, thì plugin xác thực sẽ xem xét nó kỹ hơn để kiểm tra xem nó có hợp lệ hay không dựa trên các sự kiện trên trường này.
Các sự kiện biểu mẫu mà plugin đăng ký là "click", "focusin", "focusout", "keyup", "submit".
Lưu ý: Bạn có thể tắt xác thực trên một số sự kiện bằng cách chuyển chúng dưới dạng khóa trong phương thức xác thực và sai dưới dạng giá trị.

JavaScript
$ (". selector"). validate ((onfocusout: false, onkeyup: false, onclick: false, onsubmit: false));

Bản dịch bài viết của Nadeem Khedr "Cách plugin xác thực jQuery hoạt động nội bộ" ".

Khi sử dụng các biểu mẫu trên trang web, bạn nên kiểm tra dữ liệu đã nhập. Điều này không chỉ đảm bảo rằng thông tin đã nhập là chính xác mà còn cải thiện trải nghiệm người dùng.

Có hai loại xác thực: phía máy khách và phía máy chủ. Khuyến nghị sử dụng cả hai loại xác nhận. Xác thực phía máy khách thường được triển khai với JavaScript. Nó cung cấp cho người dùng phản hồi nhanh chóng đối với các lỗi đầu vào trước khi gửi dữ liệu đến máy chủ.

Xác thực trên máy chủ đóng vai trò như một tuyến phòng thủ thứ hai chống lại việc nhận dữ liệu không hợp lệ. Bạn phải luôn xác thực dữ liệu trên máy chủ vì JavaScript có thể bị lừa.

Trong bài viết này, chúng ta sẽ xem xét cách sử dụng jQuery để thực hiện xác thực phía máy khách. Đầu tiên, hãy xác thực dữ liệu biểu mẫu bằng cách viết các quy tắc xác thực từ đầu. Trong ví dụ thứ hai, chúng tôi sẽ chỉ ra cách đơn giản hóa quy trình này bằng cách sử dụng plugin jQuery Validation.

Kết nối để bắt đầu thư viện jQuery trong một tệp HTML.

Thêm biểu mẫu sau.

Ví dụ 1:

Đoạn mã trên sẽ xuất ra mâu đơn giản với bốn trường và một nút gửi.

Đối với biểu mẫu, hãy sử dụng các kiểu CSS sau.

nhãn biểu mẫu (display: inline-block; width: 100px;) form div (margin-bottom: 10px;) .error (color: red; margin-left: 5px;) nhãn. error (display: inline;)

Thêm mã JavaScript sau vào tệp HTML.

$ (document) .ready (function () ($ ("# first_form"). submit (function (e) (e.preventDefault (); var first_name = $ ("# first_name"). val (); var last_name = $ ("# last_name"). val (); var email = $ ("# email"). val (); var password = $ ("# password"). val (); $ (". error"). remove (); if (first_name.length< 1) { $("#first_name").after("Trường này là bắt buộc");) if (last_name.length< 1) { $("#last_name").after("Trường này là bắt buộc");) if (email.length< 1) { $("#email").after("Trường này là bắt buộc");) else (var regEx = /^(0,63)@(?:(1,63).)(1,125)(2,63)$/; var validEmail = regEx.test (email); if ( ! validEmail) ($ ("# email"). after (" Nhập email hợp lệ");)) if (mật khẩu. độ dài< 8) { $("#password").after("Mật khẩu phải dài ít nhất 8 ký tự"); } }); });

Trong ví dụ trên, chúng tôi đang thêm một trình xử lý biểu mẫu sẽ được gọi khi dữ liệu được gửi. Đầu tiên, nó gọi hàm PreventDefault () để ngăn không cho dữ liệu được gửi đi. Sau đó, chúng tôi tạo một vài biến và gán cho chúng các giá trị của các trường biểu mẫu khác nhau.

Hiện tại, hãy bỏ qua $ (". Error") line.remove (); , chúng tôi sẽ trở lại nó sau.

Sau khi nhận được các giá trị của các trường biểu mẫu, chúng tôi thực hiện một số thử nghiệm để kiểm tra tính đúng đắn của thông tin do người dùng nhập. Chúng tôi kiểm tra xem các giá trị trường có chứa first_name, last_name và email hay không. Nếu người dùng để trống trường, thì một thẻ span sẽ được thêm vào nó với một thông báo lỗi.

Sau đó, chúng tôi thêm một séc cho trường email. Đối với séc này, chúng tôi sử dụng biểu hiện thông thường. Cuối cùng, chúng tôi kiểm tra độ dài mật khẩu để đảm bảo nó chứa ít nhất 8 ký tự.

Chuỗi $ (". Error"). Remove (); loại bỏ bất kỳ phần tử nào có lỗi lớp khỏi tài liệu. Nếu không có nó, mỗi lần gửi biểu mẫu không thành công, các thông báo lỗi mới sẽ được thêm vào các thông báo trước đó. Điều này sẽ dẫn đến các thông báo trùng lặp được hiển thị.

Gửi biểu mẫu với dữ liệu không chính xác và bạn sẽ thấy thông báo lỗi.


Sử dụng Plugin xác thực jQuery

Trong ví dụ trước, chúng tôi đã viết một ví dụ đã xác thực dữ liệu biểu mẫu. Để làm cho quá trình này dễ dàng hơn, hãy sử dụng plugin jQuery Thẩm định. Chỉ định một vài quy tắc cho từng trường biểu mẫu bạn muốn xác thực và plugin sẽ thực hiện tất cả việc xác thực cho bạn.

Để xem plugin đang hoạt động, hãy bao gồm jQuery trong tệp HTML.

Thêm biểu mẫu thứ hai vào tệp của bạn.

Ví dụ 2:

Thêm tiếp theo Mã JavaScript thành một chức năng $ (tài liệu) .ready (function () ()) sau khối $ ('# first_form'). submit (function (e) ()).

$ ("biểu mẫu"). validate ((quy tắc: (fname: "", lname: "bắt buộc", user_email: (bắt buộc: true, email: true,), psword: (bắt buộc: true, minlength: 8,) ), tin nhắn: (fname: "Trường này là bắt buộc", lname: "Trường này là bắt buộc", user_email: "Nhập email hợp lệ", psword: (minlength: "Mật khẩu phải dài tối thiểu 8 ký tự")), submitHandler: function (form) (form.submit ();)));

Chúng tôi đã áp dụng quy tắc bắt buộc cho tất cả các trường biểu mẫu. Đối với trường địa chỉ E-mailđã thêm một quy tắc email. Và đối với trường mật khẩu, một quy tắc kiểm tra độ dài tối thiểu là 8 ký tự.

Bản dịch bài viết “Xác thực biểu mẫu bằng cách sử dụng các ví dụ về Jquery”được chuẩn bị bởi một nhóm dự án thân thiện

Không có gì bí mật khi các biểu mẫu trực tuyến có thể là một thách thức thực sự đối với người dùng. Đặc biệt là khi chúng giống như một danh sách các trường đầu vào mà không có bất kỳ lời nhắc nào. Tuy nhiên, với tư cách là nhà phát triển, chúng tôi có thể làm cho cuộc sống của khách truy cập vào các trang web của chúng tôi trở nên dễ dàng hơn rất nhiều.

Sử dụng CSS

Có bốn lớp giả đặc biệt trong CSS áp dụng cho các trường biểu mẫu:: valid ( trường hợp lệ), :không hợp lệ( không hợp lệ), :yêu cầu( bắt buộc) và: tùy chọn ( không bắt buộc). Chúng có thể được sử dụng để thêm một số - mặc dù rất hạn chế - gợi ý cho người dùng hoàn thành biểu mẫu.

Bằng cách sử dụng: hợp lệ và: không hợp lệ, chúng tôi có thể hiển thị cho người dùng nếu trường được điền chính xác khi họ nhập.

Tuy nhiên, có một vấn đề với phương pháp này: các kiểu được áp dụng trước khi người dùng thậm chí tương tác với biểu mẫu. Các trường bắt buộc phải điền sẽ ngay lập tức được đánh dấu là: không hợp lệ và các trường tùy chọn - as: hợp lệ. Điều này có nghĩa là người dùng, thậm chí không cần bắt đầu điền vào biểu mẫu, ngay lập tức có thể nhận được Phản hồi. Không tốt lắm.

Việc tạo kiểu cho các trạng thái: bắt buộc và: tùy chọn tự nó không đặc biệt hữu ích, vì thông tin này thường được cung cấp trong các nhãn trường biểu mẫu. Tuy nhiên, chúng ta có thể kết hợp các trạng thái này với: các lớp giả hợp lệ /: không hợp lệ và tạo kiểu cho các kết hợp của chúng. Ví dụ: chúng tôi muốn chỉ hiển thị kết quả dương tính khi trường bắt buộc là hợp lệ.


Sử dụng JavaScript

JavaScript cung cấp nhiều tùy chọn hơn để cải thiện trải nghiệm người dùng với các biểu mẫu. Hãy lấy ba trường số làm ví dụ, mỗi trường được đặt tối thiểu là 10, tối đa là 100 và bước là 10 đơn vị.

Bằng cách đặt các thuộc tính min, max và step, chúng tôi chỉ có thể chắc chắn rằng giá trị là chính xác khi người dùng sử dụng các điều khiển trường số đặc biệt. Nhưng điều gì ngăn người dùng nhập dữ liệu không chính xác theo cách thủ công? Đây là những gì sẽ xảy ra nếu anh ta chèn 1, 12 và 123 vào ba trường và gửi biểu mẫu:


Kết quả là, tất cả những gì người dùng nhận được là một thông báo lỗi cho trường đầu tiên. Ngoài ra, chỉ một trong hai điểm không nhất quán bắt buộc sẽ được chỉ ra trong thông báo này. Hành vi này có thể được khắc phục bằng cách thay đổi thông báo do trình xác thực hiển thị.

Thêm nhiều thông báo lỗi vào một chú giải công cụ

Khi xác thực các trường, trình duyệt sẽ kiểm tra chúng dựa trên danh sách các lỗi tiềm ẩn cụ thể. Mỗi trường chứa một tính hợp lệ của đối tượng đặc biệt, bao gồm danh sách các giá trị boolean đặc trưng cho việc kiểm tra tính hợp lệ cụ thể. Ví dụ: đây là -đối tượng hợp lệ mà trường sẽ có khi người dùng nhập 1 vào nó:

Ghi chú của người dịch: Từ "mismatch" được dịch là "không phù hợp". Do đó, trong các giá trị patternMismatch, stepMismatch và typeMismatch, logic được đảo ngược: true - giá trị không khớp với thuộc tính, false - nó có.

Theo mặc định, trình duyệt sẽ chỉ hiển thị một lỗi. Những gì chúng ta có thể làm là tự mình kiểm tra tất cả các giá trị này và nếu có lỗi, hãy lưu chúng lại. Khi chúng tôi lưu trữ tất cả các lỗi cho một trường, chúng tôi có thể hiển thị toàn bộ danh sách của chúng dưới dạng thông điệp đặc biệt về một lỗi khi sử dụng hàm setCustomValidity ().

Bây giờ khi chúng tôi cố gắng gửi biểu mẫu, chúng tôi sẽ thấy điều này:


Nó được cải thiện vì tất cả các thông báo lỗi liên quan đến một trường cụ thể bây giờ sẽ được hiển thị. Tuy nhiên, một vấn đề khác vẫn chưa được giải quyết: lỗi vẫn chỉ được hiển thị cho trường đầu tiên.

Đây là giới hạn xác thực do trình duyệt đặt ra. Để vượt qua nó, chúng ta cần phải đi theo con đường khác.

Hiển thị tất cả các lỗi cho tất cả các trường.

Thay vì sử dụng chú giải công cụ có sẵn, chúng tôi có thể thêm thông báo lỗi trực tiếp vào DOM. Như vậy, tất cả các lỗi sẽ được hiển thị bên cạnh trường tương ứng.

Điều này có thể đạt được với một vài dòng bổ sung trong mã của chúng tôi:

Đây là những gì sẽ xảy ra khi bạn nhấp vào gửi ngay bây giờ:


Chúng tôi sử dụng các kiểm tra tính hợp lệ không theo tiêu chuẩn

Đôi khi xác thực được tích hợp trong trình duyệt là không đủ. Chúng tôi có thể cần dữ liệu đầu vào để đáp ứng một số quy tắc bổ sung. Ví dụ, để yêu cầu các ký tự đặc biệt được nhập vào trường văn bản.

Vì chúng tôi đã kiểm tra thủ công tất cả các lỗi có thể xảy ra trong hàm CustomValidation.prototype.checkValidity của mình, chúng tôi có thể chỉ cần thêm một vài lần kiểm tra ở đó.

Xác thực thời gian thực

Mặc dù cách làm hiện tại có vẻ tốt hơn nhiều, nhưng nó cũng không phải là không có khuyết điểm. Điều tồi tệ nhất của những thiếu sót là người dùng sẽ không thể xem bất kỳ thông báo nào cho đến khi anh ta nhấp vào nút gửi của biểu mẫu. Sẽ tốt hơn nhiều nếu việc xác thực trường diễn ra ngay lập tức khi nó được điền. Ba quy tắc có thể được phân biệt để tạo sự thuận tiện khi làm việc với biểu mẫu.

Có 2 cách chính để xác thực biểu mẫu:

1. Sử dụng tên lớp làm quy tắc

Làm thế nào nó hoạt động

Chúng tôi thêm thuộc tính html "class" vào trường cần xác thực và điều này sẽ cho phép xác thực.
Vì vậy, nếu chúng ta cần trường văn bản là bắt buộc, chúng ta thêm giá trị thuộc tính class = "Required" vào phần tử đầu vào
HTML

JavaScript
$ (tài liệu) .ready (function () ($ ("form"). validate ();));

Bằng cách này, bạn có thể thêm nhiều quy tắc vào các lớp nhất định.

Ưu và nhược điểm của phương pháp này:
Chỉ hoạt động với các quy tắc không có đối số.
Chúng tôi đang sử dụng thuộc tính html "class" cho một thứ mà nó không có nghĩa là để làm.
Nhưng rất dễ cài đặt.
Phương pháp sử dụng "addClassRules"

Sử dụng hàm "addClassRules" cho chúng ta khả năng sử dụng quy tắc ghép cho một lớp duy nhất.

JavaScript
$ .validator.addClassRules ((tên: (bắt buộc: true, minlength: 2), zip: (bắt buộc: true, các chữ số: true, minlength: 5, maxlength: 5)));
Mã này thêm 2 quy tắc mới cho lớp "tên" và "zip" và nếu chúng ta có phần tử "đầu vào" có lớp "zip", thì các quy tắc áp dụng cho nó: giá trị của nó là bắt buộc, người dùng chỉ có thể nhập số và độ dài phải có chính xác 5 ký tự.

HTML

Thông tin: Để sử dụng thông báo tùy chỉnh cho một quy tắc yêu cầu cụ thể trong quy tắc ghép, chúng tôi cần đưa ra bí danh cho quy tắc "bắt buộc", tạo quy tắc mới với bí danh đó và đặt thông báo mặc định cho quy tắc đó.

JavaScript
$ .validator.addMethod ("yêu cầu mới", $ .validator.methods.required, "cần có tên mới");

Hoặc chúng ta có thể sử dụng thuộc tính html "title", giá trị của nó sẽ là thông báo lỗi cho quy tắc ghép.

Lưu ý: Xác thực theo tên lớp chỉ hoạt động đối với các quy tắc xác thực không có đối số.

2. Thêm quy tắc dưới dạng đối tượng JSON vào phương thức validate ()

Theo cái tên, bạn hẳn đã đoán được rằng phương thức xác thực này sử dụng một đối tượng json, vì vậy chúng ta có thể xác định các trường chúng ta cần xác thực và các quy tắc xác thực cho chúng.

HTML
JavaScript
$ ("biểu mẫu"). validate ((quy tắc: (userEmail: (email: true, bắt buộc: true))));

Lưu ý: Khi chúng ta truyền đối tượng "rules" vào hàm "validate", khóa phải là giá trị của thuộc tính "name", không phải giá trị của "id". Như bạn có thể thấy trong ví dụ, khóa là "userEmail", giá trị của thuộc tính là "name" và thuộc tính "id" có một giá trị khác.

Ưu và nhược điểm của phương pháp này:
Cách tiếp cận này cung cấp cho chúng tôi khả năng sử dụng nhiều quy tắc xác thực hơn lấy các đối số như minlength, remote, equalTo, v.v.
Kiểm soát tuyệt vời và có thể điều chỉnh bằng tay đối với mọi thứ.
Nhưng người dùng phải thực hiện một chức năng "xác thực" riêng biệt với các tùy chọn khác nhau cho từng biểu mẫu.

Thêm hoặc xóa các quy tắc động.

Để thêm quy tắc, chúng ta phải sử dụng phương thức "quy tắc" trên các phần tử jQuery sau khi biểu mẫu được xác thực và chuyển làm tham số đầu tiên cho chuỗi "thêm" và là tham số thứ hai là đối tượng của quy tắc mà chúng tôi muốn thêm vào phần tử này. (chúng ta cũng có thể chuyển đối tượng "message" "cho các quy tắc mà chúng ta đã thêm vào).

JavaScript
$ (". input"). quy tắc ("add", (bắt buộc: đúng, thông báo: (bắt buộc: đúng)))
Nếu chúng tôi muốn xóa quy tắc hoặc tập hợp quy tắc, chúng tôi chuyển chuỗi "remove" làm tham số đầu tiên cho phương thức "rules" và tham số thứ hai sẽ là một chuỗi chứa các quy tắc mà chúng tôi muốn xóa, được phân tách bằng dấu không gian.
JavaScript
$ (". input"). quy tắc ("remove", "min max");
Phương pháp điều chỉnh thủ công
JavaScript
var validator = $ ("form"). data ("validator"); validator.settings.rules.objectName = (bắt buộc: true)

Cách tiếp cận này rất hữu ích, nếu bạn đã tạo các quy tắc và đối tượng thông báo, bạn có thể mở rộng các quy tắc trình xác thực bằng chính của mình:

JavaScript
$ .extend (validator.settings, (quy tắc: quy tắc, thông báo: thông báo));

Thông báo xác thực và cách chúng hoạt động

Có ba cách để tùy chỉnh thông báo xác thực

1. Truyền đối tượng "messages" tới phương thức "validate". Đối tượng "thông báo" bao gồm các cặp khóa-giá trị. Chìa khóa là giá trị của thuộc tính "name" của phần tử. Giá trị là một đối tượng chứa mỗi quy tắc và thông điệp của nó.

JavaScript
$ ("biểu mẫu"). xác thực ((quy tắc: (userEmail: (email: true, bắt buộc: true)), tin nhắn: (userEmail: (email: "Vui lòng nhập email của bạn", bắt buộc: "*")))) ;

2. Xác định giá trị của thuộc tính "title" của phần tử

HTML

3. Sử dụng tin nhắn mặc định. Khi quy tắc xác thực được xác định, sẽ có các thông báo mặc định được tích hợp sẵn cho các quy tắc tích hợp.
Lưu ý: Ba phương thức này ghi đè lẫn nhau dựa trên mức độ ưu tiên, mức độ ưu tiên cao nhất là đối tượng "message" được truyền vào và mức độ ưu tiên thấp nhất là thông báo mặc định.

Thêm quy tắc xác thực của riêng bạn

Khi chúng tôi muốn thêm nhiều quy tắc xác thực hơn được xác định theo mặc định, chúng tôi sử dụng phương pháp $ .validator.addMethod

Phương thức này chấp nhận các tham số sau:

  • tên quy tắc;
  • một chức năng thực hiện xác nhận;
  • tin nhắn mặc định.

Hàm thực hiện xác nhận có thể có hai hoặc ba tham số

JavaScript
function validationMethod (value, element) // OR function validationMethod (value, element, params)

Hãy giải thích các tùy chọn này.

Giá trị: Giá trị của phần tử DOM cần được xác thực
Phần tử: Bản thân phần tử DOM
Tham số: những gì chúng tôi truyền dưới dạng giá trị. Đối với ví dụ này, các quy tắc xác thực là những gì các tham số phải bằng nhau.
JavaScript
$ ("form"). validate ((quy tắc: (firstname: (so sánh: (type: "notequal", otherprop: "lastname")))));

trong ví dụ này, các tham số sẽ bằng (type: "notequal", otherprop: "lastname")

Ví dụ về việc thêm quy tắc của riêng bạn:

JavaScript
$ .validator.addMethod ("notnumbers", function (value, element) (return! / * /. test (value);), "Vui lòng không chèn số.")

Chính xác thì điều gì sẽ xảy ra khi chúng tôi gọi phương thức "xác thực"

Khi chúng tôi gọi phương thức xác thực trên một biểu mẫu, có rất nhiều điều khác nhau xảy ra đằng sau hậu trường:

Đối tượng "trình xác thực" được tạo với tất cả các quy tắc và tùy chọn được đính kèm với biểu mẫu.

Phương thức "validate" đính kèm "validator" bằng cách sử dụng "$ .data". Chúng ta có thể lấy nó bằng cách chọn biểu mẫu và gọi hàm jQuery "$ .data" và chuyển nó đến "trình xác nhận". Đối tượng "vaidator" là tất cả siêu dữ liệu xác thực cung cấp cho chúng tôi khả năng truy cập các tùy chọn xác thực bất kỳ lúc nào trong vòng đời của trang.

Sử dụng đối tượng này, chúng ta có thể thay đổi trong thời gian chạy các tùy chọn mà chúng ta đã chuyển cho phương thức xác thực, chẳng hạn như thêm hoặc xóa quy tắc, thay đổi hành vi nếu trường hợp lệ hoặc không hợp lệ hoặc thậm chí giới thiệu bộ chọn bỏ qua.

JavaScript
// lấy trình xác thực var validator = $ ("selector"). data ("validator")

Lưu ý: Khi bạn gọi phương thức "validate" trên một biểu mẫu đã được xác thực, nó sẽ chỉ trả về đối tượng "validator", $ .data cũng được sử dụng và mọi tùy chọn trước đó được chuyển cho phương thức "validate" sẽ bị xóa .

JavaScript
var validator = $ (". selector"). validate (/ * quy tắc sẽ bị bỏ qua * /)

Đính kèm sự kiện biểu mẫu

Điều gì sẽ xảy ra khi chúng tôi nhấn gửi và biểu mẫu được nhập với giá trị không hợp lệ cho trường mà chúng tôi đã đính kèm xác thực. Nếu một trong các trường không hợp lệ, thì plugin xác thực sẽ xem xét nó kỹ hơn để kiểm tra xem nó có hợp lệ hay không dựa trên các sự kiện trên trường này.

Các sự kiện biểu mẫu mà plugin đăng ký là "click", "focusin", "focusout", "keyup", "submit".

Lưu ý: Bạn có thể tắt xác thực trên một số sự kiện bằng cách chuyển chúng dưới dạng khóa trong phương thức xác thực và sai dưới dạng giá trị.

JavaScript
$ (". selector"). validate ((onfocusout: false, onkeyup: false, onclick: false, onsubmit: false));

Xác thực trường phía máy khách là điều mà mọi biểu mẫu đều phải có, không nghi ngờ gì về điều đó. Thứ nhất, người dùng không cần phải chờ đợi, lãng phí dây 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 của mình. Người khách rất hài lòng khi biết trước những gì mình đã làm sai.

Trong hướng dẫn này, chúng ta sẽ học cách viết xác thực biểu mẫu jquery thời gian thực. Nếu bạn muốn xem những gì bạn nhận được, bạn có thể nhấp vào "DEMO" và xem.

Hôm nay chúng ta sẽ học gì?

Làm cách nào để chúng tôi 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:

  1. Chúng ta có thể tạo một 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ể, qua đó chúng ta sẽ tham chiếu đến nó.
  2. Chúng ta có thể bao bọc mỗi trường trong một thẻ P, bên trong đó chúng ta có thể tạo một SPAN sẽ chứa thông tin về việc xác nhận trường.
  3. Bạn cũng có thể bọc trường P bằng một thẻ, bên trong đó bạn có thể "quen" SPAN (sử dụng jquery một cách nhanh chóng).

Đ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 thừa trong biểu mẫu đầu vào mà chúng ta không cần. Phải được quan sát.

Chúng tôi sẽ làm theo cách tôi đã làm cho chính mình. Theo tôi, đây là cái nhất quyết định đúng đắn mặc dù không ai làm. 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 cho tôi trong phần bình luận ở cuối bài.

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

  1. Chúng tôi sẽ viết một biểu mẫu đơn giản, đẹp và với mã ngữ nghĩa rõ ràng, không có các thẻ không cần thiết.
  2. Vì mọi người điền vào từng trường riêng lẻ, 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 đó, chúng ta sẽ biết nó kết thúc ở đâu.
    • Hãy thêm thông tin xác thực trong khối DIV với một ID cụ thể, ở bên phải của một trường cụ thể. Chúng tôi cũng sẽ gán các lớp .correct hoặc .incorrect tương ứng.

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

Cấu trúc dự án

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

  1. index.html
  2. style.css
  3. validate.js

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

Viết HTML

Hãy phá vỡ tất cả ...

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

Đầu tiên, tạo tệp index.html và dán mã cơ bản này vào đó. Bạn thấy những gì chúng tôi kết nối tệp 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 dạng 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 đầu vào và bộ kiểm tra khác nhau. Để phân tách, chúng tôi sử dụng FIELDSET và LABEL, cho các tiêu đề của mỗi phần:

  1. Thông tin cá nhân (tên người dùng, ngày sinh, giới tính, xe).
  2. Email (trường nhập email của người dùng).
  3. Về bản thân ( thông tin ngắn về người dùng).
Xác thực biểu mẫu thời gian thực bằng jQuery
thông tin cá nhân
E-mail
về bạn

Bước 3 - Thêm trường và nút xác nhận

Ok, bây giờ chúng ta 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 đã đặc biệt chọn một số trường khác nhau:

  • Ba trường INPUT (tên người dùng, ngày sinh, địa chỉ email).
  • Các nút RADIO để lựa chọn giới tính.
  • CHECKBOX cho xe của 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ẽ bọc mỗi LABLE và trường đầu vào trong một 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ẽ giống như sau:

Xác thực biểu mẫu thời gian thực bằng jQuery

thông tin cá nhân

E-mail

về bạn

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

Thêm CSS

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

Tạo tệp style.css và dán mã bên dưới vào đó. Bây giờ biểu mẫu với 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 (background: #efefef; margin: 0; padding: 0; border: none; text-align: center; font: normal 13px Georgia, "Times New Roman", Times, serif; color: # 222;) #content ( width: 500px; margin: 0 auto; margin-bottom: 25px; padding: 0; text-align: left;) fieldset (margin-top: 25px; padding: 15px; border: 1px solid # d1d1d1; -webkit-border- bán kính: 7px; -moz-border-radius: 7px; border-radius: 7px;) Chú giải tập hợp trường (phông chữ: bình thường 30px Verdana, Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px #fff; letter-spacing : -1px; color: # 273953;) input, textarea (padding: 3px;) label (cursor: pointer;) .block (display: block;) small (letter-spacing: 1px; font-size: 11px; font- style: italic; color: # 9e9e9e;) .info (text-align: left; padding: 5px; font-size: 11px; color: #fff; position: Absol; display: none; -webkit-border-radius: 5px ; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px # a9a9a9; -moz-box-shadow: -1px 1p x 2px # a9a9a9; hộp-bóng: -1px 1px 2px # a9a9a9; ) .error (background: # f60000; border: 3px solid # d50000;) .correct (background: # 56d800; border: 3px solid # 008000;) .wrong (font-weight: bold; color: # e90000;). bình thường (font-weight: normal; color: # 222;) #send (background: # 3f5a81; width: 100%; border: 5px solid # 0F1620; font: bold 30px Verdana, sans-serif; color: #fafafa; text- shadow: 1px 1px 1px # 0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;) #send: hover (background: # 4d76b1; border: 5px solid # 253750; color: #fff;) #send: active (text-indent: -10px;)

Viết xác thực biểu mẫu jQuery

Đâ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 chúng ta. Mọi thứ cần được lên kế hoạch.

Đang lập kế hoạch

Trước khi chúng tôi viết, hãy tự hỏi bản thân ba câu hỏi:

  1. Chúng ta cần gì từ script này?
  2. Chúng ta muốn làm điều đó như thế nào?
  3. Làm thế nào chúng ta sẽ đạt được điều này?

Điều này có thể hiểu được, chúng tôi muốn script 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 điều này trong thời gian thực (khi người dùng hoàn thành trường nhập liệu) 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 biệt cho từng trường nhập và cho tất cả các biểu mẫu (sẽ được gọi khi nhấn nút "Xác nhận").

Để ngăn việc lặp lại mã, chúng tôi sẽ cần tạo Đối tượng JavaScript cho đ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.uality
  • jVal.vehicle
  • jVal.email
  • jVal.about

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

Phương thức đượ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 hình thức. Khi chúng ta viết phương thức đầu tiên, thì mọi thứ sẽ diễn ra dễ dàng hơn và nhanh hơn.

Bắt đầu

Cơ sở mã rất đơn giản, hoàn toàn tất cả mã jquery sẽ được chứa trong cú pháp này:

$ (tài liệu) .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ư được hiển thị trong ví dụ:

VarjVal = ("fullName": function () ());

Bây giờ chúng ta 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, sau đó chúng tôi sẽ xem xét ý nghĩa của nó:

$ ("body"). append ("

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

Dòng 1: Chúng tôi đang thêm một 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 định nghĩa trong tệp style.css, cũng làm cho nó ẩn với display: none; ID Naschet, đây là để có truy cập nhanh vào khối đó và thao tác với jQuery. Khối DIV này sẽ chứa thông tin về việc xác thực trường.

Dòng 3: Chúng tôi viết kháng nghị cho khối này trong một biến, vì chúng tôi sẽ sử dụng nó một số lượng lớn Một lần.

Dòng 4: Cũng giống như trường hợp trước, chúng ta viết kết nối đến trường tên đầy đủ vào 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 có chứa các thuộc tính trên cùng và bên trái. Chúng tôi sử dụng hàm này cho ele để xác định vị trí của trường đầu vào.

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

NameInfo.css ((trên cùng: pos.top-3, bên trái: pos.left + ele.width () + 15));

Như bạn có thể thấy, chúng tôi 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 của trường đầu vào. Để làm điều này, chúng tôi nâng 3 pixel lên (dòng 2 của mã) và di chuyển 15 pixel sang bên phải của trường (dòng 3 của mã).

Chúng tôi đã viết 50% phương pháp đầu tiên, chúng tôi sẽ đưa nó đến phần cuối. Đã đế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 tốt lắm phải không? Không có gì để sợ...

Dòng 1: Chúng tôi kiểm tra rằng tên do người dùng nhập không ít hơn 6 ký tự.

Dòng 2: Chúng tôi đặ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 tiếp theo.

Dòng 3: Chúng tôi bắt đầu hoạt động trên phần tử nameInfo của chúng tôi (trong đó chúng tôi hiển thị thông tin). Đầu tiên, chúng tôi xóa 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 mà tên phải dài hơn 6 ký tự. Cuối cùng, chúng tôi làm cho thông điệp của chúng tôi hiển thị cho người dùng.

Dòng 4: Chúng tôi bắt đầu hoạt động trên phần tử ele của chúng tôi (biểu mẫu nhập tên người dùng). Loại bỏ lớp bình thường và gán nó cho sai.

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

Dòng 6: Chúng tôi bắt đầu hoạt động trên phần tử nameInfo. Nếu lớp lỗi được chỉ định, hãy loại bỏ nó và chỉ định lớp chính xác. Chúng tôi chèn một "con chim" bên trong để hiểu rằng mọi thứ đều ổn. Và chúng tôi hiển thị thông điệp cho người dùng.

Dòng 7: Chúng tôi hoạt động trên phần tử ele. Loại bỏ lớp sai, nếu có, và áp dụng lớp bình thường.

Chúng tôi đã tạo phương pháp xác nhận đầu tiên của mình! Đã đến lúc kiểm tra nó. Chúng tôi cần đảm bảo rằng phương thức của chúng tôi 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 change (). Dán mã ví dụ bên dưới, bên dưới đối tượng jVal:

$ ("# tên đầy đủ"). 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 đó kết thúc với nó, phương thức fullName sẽ được gọi, phương thức này xác thực trường.

Tệp validate.js của bạn bây giờ phải 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

Mọi thứ sẽ nhanh hơn bây giờ. 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 nó là ngày sinh. Và thực hiện các thay đổi sau:

  • Bất cứ nơi nào nameInfo xảy ra, hãy thay thế 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 biểu thức sinhInfo.css ():
varpatt = / ^ (2) \ - (2) \ - (4) $ / i;
  • Biểu thức if () trước đây của chúng ta phải là:
if (! patt.test (ele.val ()))
  • Thông báo cho trường này sẽ là: nhập ngày ở định dạng đúng

Đây là phương pháp ngày sinh sẽ trông như thế nào sau khi thực hiện những thay đổi này:

"ngày sinh": function () ($ ("body"). append ("

"); var sinhInfo = $ (" # sinhInfo "); var ele = $ (" # sinh nhật "); var pos = ele.offset (); sinhInfo.css ((trên cùng: pos.top-3, left: pos .left + ele.width () + 15)); var patt = / ^ (2) \ - (2) \ - (4) $ / i; if (! patt.test (ele.val ())) ( jVal.errors = true; sinhInfo.removeClass ("đúng"). addClass ("lỗi"). html ("← nhập ngày ở định dạng đúng"). show (); ele.removeClass ("bình thường"). addClass ( "sai");) else (sinhInfo.removeClass ("lỗi"). addClass ("đúng"). 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:

$ ("# ngày sinh"). 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 khác hoạt động. Bạn đã làm rất tốt!

Trở thành xác thực trường

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

  • Đổi tên tất cả nameInfo thành worldInfo
  • Thay vì #fullname, hãy sử dụng #woman cho biến ele
  • Trong biểu thức giới tínhInfo.css (), thay đổi từ trên xuống đầu: 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: đã kiểm tra"). length === 0)
  • Thông điệp tới người dùng sẽ là: bạn là nam hay nữ?

Đây là phương pháp giới tính sẽ trông như thế nào sau những thay đổi:

"giới tính": function () ($ ("body"). append ("

"); var worldInfo = $ (" # worldInfo "); var ele = $ (" # woman "); var pos = ele.offset (); worldInfo.css ((top: pos.top-10, left: pos .left + ele.width () + 60))); if ($ ("input: đã kiểm tra"). length === 0) (jVal.errors = true; worldInfo.removeClass ("đúng"). addClass ("lỗi ") .html (" ← bạn là đàn ông hay phụ nữ? "). show (); ele.removeClass (" bình thường "). addClass (" sai ");) else (worldInfo..removeClass (" lỗi ") .addClass ("đúng"). html ("√"). show (); ele.removeClass ("sai"). addClass ("bình thường");))

Trên dòng 14, chúng tôi kiểm tra xem có bao nhiêu bộ chọn radio được chọn. Nếu 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, hãy đính kèm phương pháp giới tính vào các nút radio:

$ ("đầu vào"). change (jVal.uality);

Xác thực séc - quyền sở hữu xe

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

  • Thay thế tất cả giới tínhInfo bằng xeInfo
  • Thay vì #woman, hãy nhập #ship cho ele.
  • Trong biểu thức xeInfo.css (), giá trị bên trái nên đượ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: đã kiểm tra"). length<= 1)
  • Tin nhắn người dùng: Tôi chắc chắn rằng bạn có ít nhất hai!

Đây là phương thức sẽ trông như thế nào sau khi thay đổi:

"xe": function () ($ ("body"). append ("

<= 1) { jVal.errors = true; vehicleInfo.removeClass("correct").addClass("error").html("← I am sure you have at least two!").show(); ele.removeClass("normal").addClass("wrong"); } else { vehicleInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } }

Ở dòng 14, chúng tôi xác định số lượng phương tiện mà người dùng đã chọn. Nếu ít hơn hai, chúng tôi sẽ hiển thị thông báo lỗi. Nếu số hộp kiểm đã chọn bằng hoặc nhỏ hơn 1, điều đó có nghĩa là có lỗi.

Một lần nữa, chúng tôi nối phương pháp này vào trường xe:

$ ("đầu vào"). change (jVal.vehicle);

Chắc chắn bạn đã mệt mỏi ... Một vài phương pháp nữa để xác thực jQuery chính thức. Đã đến lúc xác thực email.

Xác thực trường email

Sao chép phương thức ngày sinh, đổi tên thành email và thực hiện các thay đổi:

  • Thay đổi tất cả BirthInfo thành emailInfo
  • Thay vì #birthday, hãy viết #email trong giá trị của biến ele
  • Biểu thức chính quy cũ của chúng tôi sẽ là:
varpatt = / ^ [email được bảo vệ]+ [.]. (2,) $ / i;
  • Thông báo cho người dùng: cung cấp cho tôi một địa chỉ email hợp lệ, được không?

Đây là phương thức email sẽ trông như thế nào sau khi thực hiện các thay đổi:

"email": function () ($ ("body"). append ("

"); var emailInfo = $ (" # emailInfo "); var ele = $ (" # email "); var pos = ele.offset (); emailInfo.css ((top: pos. top-3, left: pos .left + ele.width () + 15)); var patt = / ^ [email được bảo vệ]+ [.]. (2,) $ / i; if (! patt.test (ele.val ())) (jVal.errors = true; emailInfo.removeClass ("đúng"). addClass ("lỗi"). html ("← cung cấp cho tôi một địa chỉ email hợp lệ, được không?" ") .show (); ele.removeClass (" bình thường "). addClass (" sai ");) else (emailInfo.removeClass (" lỗi "). addClass (" đúng "). html (" √ "). hiển thị (); ele.removeClass ("sai"). addClass ("bình thường");))

Trên dòng 14, biểu thức chính quy có nội dung sau: một hoặc nhiều ký tự trước @, sau đó cũng là một hoặc nhiều ký tự, rồi chuyển sang. theo sau là 2 hoặc nhiều ký tự. Đây là một ví dụ về một email hợp lệ: [email được bảo vệ]

Và như mọi khi, chúng tôi kết nối phương thức email với trường:

$ ("# email"). change (jVal.email);

Xác thực trường thông tin người dùng

Đối với phương pháp cuối cùng này, hãy sao chép phương thức fullName, đổi tên thành about và thực hiện các thay đổi sau:

  • Thay đổi tất cả nameInfo thành aboutInfo
  • Thay vì #fullname, hãy đặt #about vào giá trị của biến ele
  • Câu lệnh if () trước đây của chúng tôi sẽ là:
if (ele.val (). length< 75)
  • Thông báo lỗi: nào, nói cho tôi biết thêm một chút!

Đây là phương thức sẽ trông như thế nào sau khi thực hiện các thay đổi:

"about": function () ($ ("body"). append ("

< 75) { jVal.errors = true; aboutInfo.removeClass("correct").addClass("error").html("← come on, tell me a little bit more!").show(); ele.removeClass("normal").addClass("wrong").css({"font-weight": "normal"}); } else { aboutInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } }

Chúng tôi nối phương thức này vào trường:

$ ("# khoảng"). change (jVal.about);

Chúng tôi vừa tạo tất cả các phương thức xác thực jQuery. Còn hai việc cần làm: viết phương thức sendIt cuối cùng, xử lý hành động gửi khi biểu mẫu được nhấp vào Gửi.

Viết phương thức sendIt

Phương thức này sẽ được gọi sau tất cả các phương thức xác thực, như phương thức cuối cùng, sau khi nhấp vào "Xác nhận". Nó kiểm tra xem có bất kỳ lỗi xác thực nào không. Tin tốt là, nó đơn giản hơn những cái trước:

"sendIt": function () (if (! jVal.errors) ($ ("# jform"). submit ();)

Nếu biến jVal.errors không đúng, chúng tôi cho phép gửi biểu mẫu đến máy chủ.

Quản lý hành động gửi

Điều cuối cùng còn lại cho chúng tôi là quản lý hành động gửi của nút. Điều này được thực hiện theo cách sau:

$ ("# send"). click (function () (var obj = $ .browser.webkit? $ ("body"): $ ("html"); obj.animate ((scrollTop: $ ("# jform" " ) .offset (). top), 750, function () (jVal.errors = false; jVal.fullName (); jVal.birthDate (); jVal.uality (); jVal.vehicle (); jVal.email () ; jVal.about (); jVal.sendIt ();)); trả về sai;));

Chúng tôi nhận được phần tử được gửi, vào sự kiện nhấp chuột. Vì các trình duyệt khác nhau cảm nhận việc cuộn lên đầu trang khác nhau, chúng ta cần quyết định vị trí cuộn (dòng 2). Chúng tôi cuộn lên đầu (dòng 3). Tiếp theo, chúng ta thay đổi biến jVal.errors thành false để dữ liệu được gửi thành công. Tiếp theo, chúng ta gọi lần lượt tất cả các phương thức xác nhận. Sau đó, chúng tôi trả về false, có nghĩa là chúng tôi ngăn không cho dữ liệu được gửi đi trước khi chúng tôi kiểm tra tính hợp lệ.

Sản phẩm hoàn thiện

Bây giờ tập lệnh xác thực biểu mẫu jQuery của chúng tôi đã hoàn tất. Nó trông như thế này:

$ (document) .ready (function () (var jVal = ("fullName": function () ($ ("body"). append ("

"); var nameInfo = $ (" # nameInfo "); var ele = $ (" # fullname "); var pos = ele.offset (); nameInfo.css ((top: pos. top-3, left: pos .left + ele.width () + 15)); 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"); } }, "birthDate" : function (){ $("body").append("
"); var sinhInfo = $ (" # sinhInfo "); var ele = $ (" # sinh nhật "); var pos = ele.offset (); sinhInfo.css ((trên cùng: pos.top-3, left: pos .left + ele.width () + 15)); var patt = / ^ (2) \ - (2) \ - (4) $ / i; if (! patt.test (ele.val ())) ( jVal.errors = true; sinhInfo.removeClass ("đúng"). addClass ("lỗi"). html ("← nhập ngày ở định dạng đúng"). show (); ele.removeClass ("bình thường"). addClass ( "sai");) else (sinhInfo.removeClass ("lỗi"). addClass ("đúng"). html ("√"). show (); ele.removeClass ("sai"). addClass ("bình thường") ;)), "giới tính": function () ($ ("body"). append ("
"); var worldInfo = $ (" # worldInfo "); var ele = $ (" # woman "); var pos = ele.offset (); worldInfo.css ((top: pos.top-10, left: pos .left + ele.width () + 60))); if ($ ("input: đã kiểm tra"). length === 0) (jVal.errors = true; worldInfo.removeClass ("đúng"). addClass ("lỗi ") .html (" ← bạn là nam hay nữ? "). show (); ele.removeClass (" bình thường "). addClass (" sai ");) else (giớiInfo.removeClass (" lỗi "). addClass ("đúng"). html ("√"). show (); ele.removeClass ("sai"). addClass ("bình thường");)), "xe": function () ($ ("body" ) .append ("
"); var carInfo = $ (" # carInfo "); var ele = $ (" # ship "); var pos = ele.offset (); carInfo.css ((top: pos.top-10, left: pos .left + ele.width () + 40)); if ($ ("input: check"). length<= 1) { jVal.errors = true; vehicleInfo.removeClass("correct").addClass("error").html("← I\"m sure you have at least two!").show(); ele.removeClass("normal").addClass("wrong"); } else { vehicleInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } }, "email" : function() { $("body").append("
"); var emailInfo = $ (" # emailInfo "); var ele = $ (" # email "); var pos = ele.offset (); emailInfo.css ((top: pos. top-3, left: pos .left + ele.width () + 15)); var patt = / ^ [email được bảo vệ]+ [.]. (2,) $ / i; if (! patt.test (ele.val ())) (jVal.errors = true; emailInfo.removeClass ("đúng"). addClass ("lỗi"). html ("← cung cấp cho tôi một địa chỉ email hợp lệ, được không?" ") .show (); ele.removeClass (" bình thường "). addClass (" sai ");) else (emailInfo.removeClass (" lỗi "). addClass (" đúng "). html (" √ "). hiển thị (); ele.removeClass ("sai"). addClass ("bình thường");)), "about": function () ($ ("body"). append ("
"); var aboutInfo = $ (" # aboutInfo "); var ele = $ (" # about "); var pos = ele.offset (); aboutInfo.css ((top: pos.top-3, left: pos .left + ele.width () + 15)); if (ele.val (). length< 75) { jVal.errors = true; aboutInfo.removeClass("correct").addClass("error").html("← come on, tell me a little bit more!").show(); ele.removeClass("normal").addClass("wrong").css({"font-weight": "normal"}); } else { aboutInfo.removeClass("error").addClass("correct").html("√").show(); ele.removeClass("wrong").addClass("normal"); } }, "sendIt" : function (){ if(!jVal.errors) { $("#jform").submit(); } } }; // ====================================================== // $("#send").click(function (){ var obj = $.browser.webkit ? $("body") : $("html"); obj.animate({ scrollTop: $("#jform").offset().top }, 750, function (){ jVal.errors = false; jVal.fullName(); jVal.birthDate(); jVal.gender(); jVal.vehicle(); jVal.email(); jVal.about(); jVal.sendIt(); }); return false; }); $("#fullname").change(jVal.fullName); $("#birthday").change(jVal.birthDate); $("input").change(jVal.gender); $("input").change(jVal.vehicle); $("#email").change(jVal.email); $("#about").change(jVal.about); });

Sau những lời nói

Chúng ta làm được rồi! Được rồi, bạn đã làm được! Tôi hy vọng bạn thích hướng dẫn này và học được điều gì đó mới. Nếu bạn có câu hỏi về xác thực jQuery, hãy hỏi họ trong phần nhận xét. Cảm ơn bạn đã chú ý và quan tâm đến trang web của chúng tôi! Chúc các bạn thành công.

Bài viết liên quan:

2022, leally.ru - Hướng dẫn của bạn về thế giới máy tính và Internet