Xác thực biểu mẫu đơn giản mà không cần JS. Chúng tôi đang viết một tập lệnh để xác thực các biểu mẫu tùy chỉnh bằng jQuery. Áp dụng quy tắc xác thực dựa trên tư cách thành viên của lớp
Có nhiều bài viết về cách viết các quy tắc của riêng bạn cho plugin xác thực jQuery, nhưng rất ít bài viết giải thích công việc nội bộ 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 "Tìm hiểu về xác thực kín đáo của Asp.NET MVC"
1. Chạy plugin xác thực jQuery từ bên trong
Những gì chúng ta học được từ bài viết này:
1. Cách xác thực biểu mẫu.
2. Thông báo xác thực và cách chúng hoạt động.
3. Thêm quy tắc xác thực của riêng bạn.
4. Chính xác thì điều gì sẽ xảy ra khi chúng ta gọi phương thức xác thực.
Có 2 cách chính để xác thực một biểu mẫu.1. Sử dụng tên lớp làm quy tắc
Chúng tôi thêm vào trường cần được xác thực, thuộc tính html"class" và điều này sẽ cho phép xác thực.
Vì vậy, nếu muố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
$(document).ready(function() ( $("form").validate(); ));
Bằng cách này bạn có thể thêm nhiều quy tắc vào một số 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 chấp nhận đối số.
Chúng tôi đang sử dụng thuộc tính "class" html cho một mục đích không dành cho nó.
Nhưng nó rất dễ cài đặt.
Việc 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(( name: ( bắt buộc: true, minlength: 2 ), zip: ( bắt buộc: true, 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 là "zip", thì quy tắc sẽ á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 chính xác 5 ký tự.
HTML
Thông tin: Sử dụng tin nhắn riêngđối với một quy tắc "bắt buộc" cụ thể trong quy tắc ghép, chúng ta 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("newrequired", $.validator.methods.required, "tên mới là bắt buộc");
Hoặc chúng ta có thể sử dụng thuộc tính "title" html, 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ó bất kỳ đối số nào.
2. Thêm các quy tắc dưới dạng đối tượng JSON vào phương thức valid() Nhìn qua tên, bạn hẳn đã đoán được rằng phương thức xác thực này chấp nhận một đối tượng json, vì vậy chúng ta có thể xác định các trường mà chúng ta cần xác thực và các quy tắc xác thực cho chúng.HTML
JavaScript
$("form").validate(( quy tắc: ( userEmail: ( email: true, bắt buộc: true ) ) ));
Lưu ý: Khi chúng ta chuyển đối tượng "quy tắc" cho hàm "xác thực", 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ó 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 có các đối số như minlength, remote, EqualTo, v.v.
Kiểm soát tuyệt vời và có thể cấu hình thủ công đối với mọi thứ.
Nhưng người dùng phải làm chức năng riêng biệt"xác thực" với các tùy chọn khác nhau cho từng hình thức.
JavaScript
$(".input").rules("add", ( bắt buộc: đúng, tin nhắn: ( bắt buộc: đúng ) ))
JavaScript
$(".input").rules("remove", "min max");
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 xác thực bằng quy tắc của riêng mình:
JavaScript
$.extend(validator.settings, ( quy tắc: quy tắc, tin nhắn: tin nhắn ));
1. Truyền đối tượng “messages” cho phương thức “validate”. Đối tượng "tin nhắn" bao gồm các cặp khóa\giá trị. Khóa là giá trị thuộc tính "tên" 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
$("form").validate(( 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ị 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 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 "thông báo" được truyền 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 tùy chỉnh Khi chúng tôi muốn thêm nhiều quy tắc xác thực hơn những quy tắc được xác định theo mặc định, chúng tôi sử dụng phương thức$.validator.addMethod
Phương thức này lấy 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.
JavaScript
Phương thức xác thực hàm (giá trị, phần tử) // HOẶC Phương thức xác thực hàm (giá trị, phần tử, tham số)
Hãy để tôi giải thích các thông số này.
Value: giá trị của phần tử DOM sẽ được xác thực
Phần tử: chính phần tử DOM
Tham số: những gì chúng tôi chuyển dưới dạng giá trị. Đối với ví dụ này, các quy tắc xác thực là các thông số phải bằng nhau.
JavaScript
$("form").validate(( quy tắc: ( firstname: ( so sánh: ( type: "notequal", otherprop: "họ" ) ) ) ));
trong ví dụ này, các thông 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ố.")
Khi chúng ta 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 phía sau:
Đố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 "xác thực" đính kèm "trình xác thực" 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 thực". Đối tượng "vaidator" là tất cả siêu dữ liệu để xác thực, cho phép chúng tôi truy cập các tùy chọn xác thực bất kỳ lúc nào vòng đời trang.
Bằng cách 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 sang 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 một 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 "xác thực" trên một biểu mẫu đã được xác thực, nó sẽ chỉ trả về đối tượng "trình xác thực", $.data cũng được sử dụng và tất cả các tùy chọn trước đó được truyền bởi phương thức "xác thực" sẽ bị xóa.
JavaScript
var validator = $(".selector").validate(/* quy tắc sẽ bị bỏ qua */)
Điều gì sẽ xảy ra khi chúng ta bấm gửi và biểu mẫu sẽ được nhập giá trị không chính xácđối với 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 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 tính năng xác thực cho một số sự kiện nhất định bằng cách chuyển chúng dưới dạng khóa trong phương thức xác thực và giá trị sai.
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ộ."
Đây là một chủ đề rất khó chịu đối với bất kỳ lập trình viên nào. Càng nhiều trường trong biểu mẫu, tập lệnh xác thực càng lớn và phức tạp hơn hình thức jquery. Đã có lúc các lập trình viên thực hiện xác thực trong PHP. Việc xác nhận như vậy trông khá cồng kềnh. Nhược điểm của việc xác thực PHP này là bạn luôn cần sử dụng phiên hoặc cookie. Trong trường hợp này, trang được tải lại liên tục, điều này tạo ra các yêu cầu không cần thiết tới cơ sở dữ liệu.
Việc xác thực trong jquery dễ thực hiện hơn nhiều. Có một số plugin jqueryđể xác thực các trường biểu mẫu. Tôi sẽ chỉ cho bạn một cách rất đơn giản. Bạn có thể sửa đổi nó và thêm séc mang nhãn hiệu của riêng bạn. Nói một cách hình tượng, các lỗi sẽ được đặt trong một mảng. Mảng này sau đó sẽ biến thành một chuỗi vững chắc. Bạn sẽ thấy một số lỗi ở đầu ra cùng một lúc.
Dán đoạn mã sau vào tài liệu html. Xin lưu ý rằng bạn có một nút và 3 trường.
biểu mẫu ( lề:10px; đường viền: 1px màu xám đậm; ) đầu vào ( lề:5px; đường viền: 1px màu xám đậm; )
// biểu mẫu xác thực jquery $("input").click(function ()( // thu thập dữ liệu vào một mảng var title = $("input").val().trim(); var text = $("input ").val().trim(); var cat = $("input").val().trim(); //xử lý dữ liệu var error_arr = ; if(title.length == 0) error_arr.push ("description"); if(text.length == 0) error_arr.push("text"); if(cat.length == 0) error_arr.push("category"); ) .length > 0)( cảnh báo("Bạn chưa điền các trường sau:\n" + error_arr.join(", ")); // chặn chuyển sang trang khác return false; )else( console.log("Không có lỗi!"); ) ));
Chúng ta hãy xem chính tập lệnh xác thực biểu mẫu. Đầu tiên, dữ liệu được thu thập thành các biến. Hãy chắc chắn để xóa dữ liệu khỏi không gian. " " cũng là một biểu tượng. Tiếp theo, dữ liệu được kiểm tra sự hiện diện của các ký tự. Bạn có thể thêm séc mang nhãn hiệu của riêng bạn. Bạn thậm chí có thể sử dụng biểu thức chính quy. Tất cả phụ thuộc vào nhiệm vụ trước mắt. Sau đó là bước kiểm tra cuối cùng để tìm lỗi. Nếu có ít nhất một lỗi, cảnh báo sẽ hiển thị lỗi. Hãy chú ý tham gia(). Hàm này thu thập tất cả các phần tử của một mảng và xuất chúng dưới dạng một chuỗi được phân tách. Đọc về mảng trên trang Mảng trong javascript. Tôi không sử dụng vòng lặp hoặc hàm each(). Nó dễ dàng hơn)). Nếu không có lỗi thì tập lệnh sẽ chuyển bạn đến trang mới và dữ liệu sẽ được gửi đi. Trong trường hợp xảy ra lỗi xác thực, sẽ không có chuyển đổi sang trang khác. Bạn sẽ thấy cảnh báo và hiển thị tất cả các lỗi (Bạn chưa điền vào các trường sau: mô tả, văn bản, danh mục).
Lời tác giả: Khi bạn thu thập thông tin từ người dùng bằng biểu mẫu, việc sử dụng ít nhất một số loại xác thực dữ liệu là điều bắt buộc. Nếu bạn không chú ý đến khoảnh khắc này, điều này có thể dẫn đến mất khách hàng, hỏng dữ liệu trong cơ sở dữ liệu (DB) và thậm chí xuất hiện các lỗ hổng bảo mật trên trang web của bạn. Trong lịch sử, việc xác thực mẫu luôn là vấn đề đau đầu. Điều này dễ thực hiện hơn ở phía máy chủ nhờ các khung chính thức sẽ thực hiện mọi thứ cho bạn, nhưng về phía máy khách, điều này thường kết thúc nhất sử dụng JavaScript các thư viện tốn nhiều công sức để tích hợp.
May mắn thay, HTML5 cung cấp một số tính năng có thể giải quyết hầu hết các vấn đề về xác thực biểu mẫu của bạn. Các biểu mẫu trong HTML5 hiện có hỗ trợ tích hợp để xác thực thông qua việc sử dụng các thuộc tính đặc biệt và các loại phần tử đầu vào mới. Điều này cũng cung cấp cho bạn nhiều quyền kiểm soát hơn đối với kiểu dáng biểu mẫu của mình thông qua CSS.
Hãy xem ví dụ trực tuyến về xác thực biểu mẫu và đọc tiếp để có bảng tóm tắt nhanh về những kiến thức cơ bản về xác thực biểu mẫu trong HTML5.
Các loại đặc biệt Yếu tố đầu vàoHTML5 giới thiệu một số loại phần tử đầu vào mới. Chúng có thể được sử dụng để tạo các trường đầu vào chỉ chấp nhận loại nhất định dữ liệu. Dưới đây là các loại mới xuất hiện trong HTML5:
Để sử dụng một trong các loại mới, hãy chỉ định tên của nó làm giá trị của thuộc tính loại:
< input type = "email" / > |
Nếu trình duyệt không hỗ trợ loại này phần tử đầu vào thì phần tử hiện tại sẽ hoạt động giống như trường nhập văn bản thông thường. Bạn cũng có thể hữu ích khi biết rằng một số loại trường (chẳng hạn như “email” và “tel”) dẫn đến kết quả mở thiêt bị di động bàn phím đặc biệt Với bộ giới hạn phím thay vì bố cục QWERTY đầy đủ. Hơn thông tin chi tiết Bạn có thể tìm thấy thông tin về tất cả các loại phần tử đầu vào trên trang web MDN -.
Phần bắt buộcChỉ cần thêm thuộc tính "bắt buộc" vào phần tử đầu vào, chọn hoặc vùng văn bản sẽ cho trình duyệt biết rằng nó có của lĩnh vực này phải có một ý nghĩa nào đó. Hãy nghĩ về nó giống như dấu hoa thị màu đỏ* mà chúng ta thấy trên hầu hết các mẫu đăng ký.
< input type = "checkbox" name = "terms" required > |
Vấn đề ở đây là hầu như mọi thông tin đều đáp ứng được yêu cầu này, tức là, ví dụ: bạn có thể vượt qua xác thực bằng cách chỉ cần đặt một khoảng trắng (chúng tôi sẽ chỉ cho bạn cách tránh điều này).
Khi bạn chỉ định thuộc tính bắt buộc trên các trường như email hoặc url, trình duyệt sẽ mong đợi có một mẫu nhất định để có thể xác thực thông tin, nhưng việc xác thực này rất nhẹ nhàng và bỏ lỡ địa chỉ email như “z@zz” (đọc tiếp để tìm hiểu cách giải quyết vấn đề này).
Hạn mứcChúng ta có thể cài đặt hạn chế cơ bản, chẳng hạn như chiều dài tối đa hoặc giá trị tối thiểu và tối đa cho trường số. Để giới hạn độ dài của phần tử đầu vào hoặc vùng văn bản, hãy sử dụng thuộc tính "maxlength". Điều này được thực hiện để thường không thể nhập một chuỗi dài hơn giá trị của thuộc tính “maxlength”. Nếu bạn cố gắng chèn một dòng vượt quá giới hạn, biểu mẫu sẽ đơn giản cắt nó đi.
Thiết kế nội thấtCác lớp giả CSS3 cho phép chúng ta định kiểu bất kỳ trường biểu mẫu nào tùy thuộc vào trạng thái của nó. Dưới đây là các lớp giả:
Nó có nghĩa là Phần bắt buộc Của bạn có thể trông theo một cách, những cái tùy chọn có thể trông khác, v.v. Trong bản demo của chúng tôi, chúng tôi đã kết hợp các bộ chọn "hợp lệ" và "không hợp lệ" với lớp giả "tiêu điểm" để tô màu các trường biểu mẫu là màu đỏ và màu xanh lá cây, khi người dùng chọn chúng và bắt đầu nhập nội dung nào đó vào chúng.
đầu vào:focus:không hợp lệ, textarea:focus:không hợp lệ( border:solid 2px #F5192F; ) đầu vào:focus:valid, textarea:focus:valid( border:solid 2px #18E109; màu nền:#fff; )
đầu vào: tiêu điểm: không hợp lệ, vùng văn bản : tiêu điểm : không hợp lệ ( đường viền : 2px #F5192F; đầu vào: tiêu điểm: hợp lệ, vùng văn bản : tiêu điểm : hợp lệ ( đường viền : liền khối 2px #18E109; nền - màu : #fff; |
Bạn có thể nhận thấy rằng khi bạn cố gắng gửi biểu mẫu điền sai, các chú giải công cụ sẽ xuất hiện. Bằng cách đặt thuộc tính "title" cho các trường của mình, chúng tôi có thể thêm các gợi ý bổ sung về những giá trị mà quy tắc xác thực của chúng tôi mong đợi người dùng cung cấp.
Xin lưu ý rằng các trình duyệt khác nhau hiển thị chú giải công cụ một cách khác nhau. TRONG trình duyệt Chrome nghĩa thuộc tính tiêu đề sẽ xuất hiện bên dưới nội dung chính của thông báo lỗi và sẽ có kích thước nhỏ hơn font hơn văn bản lỗi. Trình duyệt Firefox sẽ không hiển thị văn bản của bạn cho chú giải công cụ trừ khi bạn sử dụng thuộc tính "mẫu", thuộc tính này sẽ được sử dụng cho thông tin mẫu.
Bạn có thể xem ví dụ về những gì chúng ta có thể đạt được trong ví dụ dưới đây. Ví dụ này cũng bao gồm xác thực để nhập email chính xác. Dưới đây tôi sẽ hiển thị hai tùy chọn cho tập lệnh có và không có xác thực email.
Như bạn có thể thấy, cho đến khi tất cả các trường được điền, tập lệnh sẽ không cho phép bạn gửi biểu mẫu và bạn phải nhập địa chỉ chính xác vào trường e-mail. Đầu tiên, tôi sẽ chỉ cho bạn cách thực hiện kiểm tra đơn giảnđể điền vào các trường mà không có kiểm tra email. Điều gì sẽ xảy ra nếu biểu mẫu của bạn không có trường này và bạn chỉ cần kiểm tra trường văn bản để nó không trống và các thông báo trống sẽ không đến email của bạn.
Để thực hiện kế hoạch của mình, trước tiên chúng ta cần tạo biểu mẫu. Bạn có thể đã có nó, nhưng nếu bạn muốn đưa vật liệu này vào đó, bạn sẽ cần phải điều chỉnh nó cho phù hợp với hình dạng của mình. Tôi sẽ hiển thị mọi thứ bằng ví dụ của riêng tôi. Biểu mẫu của tôi sẽ không gửi bất cứ thứ gì, bài viết này không có trình xử lý gửi thư để không làm phức tạp tài liệu. Trình xử lý gửi email là một câu chuyện khác. Đầu tiên, mã HTML của chính biểu mẫu.
Bạn có thể thấy từ mã rằng biểu mẫu của chúng tôi bao gồm ba trường - tên, email và trường kiểm tra. Còn một số nữa điểm quan trọng, điều này sẽ cần thiết trong mọi trường hợp đối với vận hành chính xác kịch bản. Hãy thực hiện theo thứ tự.
- id="file_form" - ID cho biểu mẫu của chúng tôi. ID là bắt buộc, nó cũng sẽ được sử dụng trong tập lệnh.
- - khối bắt buộc. Đây là vùng chứa để hiển thị các thông báo lỗi từ tập lệnh. khối này có thể được đặt bên ngoài biểu mẫu. Hãy cho anh ấy mọi phong cách. Trong ví dụ, đây là văn bản màu đỏ biểu thị trường trống.
- onclick="frmotpr();" - một sự kiện sẽ khởi chạy một chức năng từ tập lệnh của chúng tôi khi nhấp vào nút. Sự kiện này đã được thêm vào nút GỬI. Dòng áp chót trong mã.
- Tất cả các trường cũng được gán ID và lớp. Chúng cũng sẽ cần thiết cho tập lệnh xác thực của chúng tôi. ID cho trường e-mail đặc biệt quan trọng đối với tập lệnh trong tương lai của chúng tôi, tập lệnh này sẽ kiểm tra tính chính xác của e-mail đã nhập.
Bây giờ để làm cho nó bình thường vẻ bề ngoài vào biểu mẫu của chúng tôi, hãy thêm một số kiểu CSS. Nếu bạn sử dụng chúng trên trang web của mình, hãy thêm chúng vào tệp kiểu của bạn.
#file_form( width:300px; nền:#fff; đệm:15px; lề:3px; -webkit-border-radius:25px; -moz-border-radius:25px; bán kính đường viền:25px; box-shadow:0 0 10px rgba(0,0,0,.1); đường viền:1px Solid #36c; .in_pl( width:90%; lề-dưới:15px; phần đệm:10px 15px; bán kính đường viền:25px; đường viền:none; hộp -shadow:0 0 5px rgba(0,0,0,.2) inet; nền:#fff; ) .in_pl:focus( nền:#fff; ) #sub_f( đệm:5px 15px; viền:none; viền - bán kính:25px; bóng hộp:0 0 2px 1px rgba(0,0,0,.2); nền:#36c; con trỏ:con trỏ;) .fl_fr( width:100%; text-align:center; font- kích thước:15px; màu:#333; con trỏ: con trỏ; viền:none; lề-dưới:10px; ) #messenger( text-align:center; display:none; color:#f00; lề:15px 0; nền:rgba(255,0,0,.2);)
Các kiểu này đặt tham số cho chính biểu mẫu, trường và nút. Tôi sẽ không mô tả tất cả các dòng và chức năng của từng dòng, có các hướng dẫn CSS về điều đó. Tôi sẽ chỉ liệt kê hai điều quan trọng nhất.
- #messenger là kiểu cho cùng một khối có đầu ra tin nhắn. Tham số chínhđối với lớp này nó là display:none. Tức là ban đầu chúng ta ẩn khối.
- .notvalid là các kiểu cho lớp sẽ được tập lệnh của chúng tôi gán cho trường không được điền hoặc điền không chính xác. Tôi sẽ đề cập đến lớp này một lần nữa dưới đây.
Bây giờ chúng ta có mẫu đã hoàn thành hoặc bạn đã định cấu hình biểu mẫu của mình theo hướng dẫn của tôi, đã thêm ID vào đó, của tôi hoặc của bạn, khối bắt buộc và sự kiện nút, chúng ta có thể bắt đầu kết nối tập lệnh.
Vì tập lệnh của chúng tôi hoạt động với sử dụng jQuery, nó cần được kết nối thư viện jQuery. Nếu nó chưa được kết nối trước đó, hãy làm như vậy bằng cách thêm dòng này:
Bạn có thể đọc vị trí và cách thêm thư viện một cách chính xác trong bài viết -.
Sau thư viện, không phải trước nó mà sau thư viện, chúng ta cần kết nối tập lệnh xác thực biểu mẫu đã chờ đợi từ lâu. như tôi đã viết trước đó, tùy chọn đầu tiên sẽ là kiểm tra trường này để hoàn thành mà không kiểm tra tính chính xác của email đã nhập. Bản thân kịch bản đã có lượt xem tiếp theo:
