Hướng dẫn này sẽ chỉ cho bạn cách tạo biểu mẫu hỗ trợ JavaScript để kiểm tra xem người dùng đã điền vào biểu mẫu chính xác chưa trước khi biểu mẫu được gửi đến máy chủ. Điều này được gọi là xác nhận mẫu. Trước tiên, chúng tôi sẽ giải thích lý do tại sao xác thực biểu mẫu là một điều hữu ích, sau đó xây dựng một biểu mẫu mẫu đơn giản, giải thích mọi thứ trong quá trình thực hiện. Cuối cùng, có một bài tập nhỏ để giữ cho bạn bận rộn

Xác thực mẫu là gì?

Xác thực biểu mẫu là quá trình kiểm tra xem biểu mẫu đã được điền chính xác chưa trước khi nó được xử lý. Ví dụ: nếu biểu mẫu của bạn có một hộp để người dùng nhập địa chỉ email của họ, bạn có thể muốn trình xử lý biểu mẫu của mình kiểm tra xem họ đã điền địa chỉ chưa trước khi bạn xử lý phần còn lại của biểu mẫu

Có hai phương pháp chính để xác thực các biểu mẫu. phía máy chủ [sử dụng tập lệnh CGI, ASP, v.v.] và phía máy khách [thường được thực hiện bằng JavaScript]. Xác thực phía máy chủ an toàn hơn nhưng thường khó viết mã hơn, trong khi xác thực phía máy khách [JavaScript] cũng dễ thực hiện hơn và nhanh hơn [trình duyệt không phải kết nối với máy chủ để xác thực biểu mẫu, vì vậy người dùng tìm thấy . ]

Xác thực biểu mẫu phía máy khách [thường có nhúng JavaScript trong trang Web]

Xác thực biểu mẫu phía máy chủ [thường được thực hiện bởi tập lệnh CGI hoặc ASP]

Trong hướng dẫn này, chúng ta sẽ xây dựng một biểu mẫu đơn giản với xác thực JavaScript phía máy khách. Sau đó, bạn có thể điều chỉnh biểu mẫu này theo yêu cầu của riêng mình

Một hình thức đơn giản với xác nhận

Hãy xây dựng một biểu mẫu đơn giản với tập lệnh xác thực. Biểu mẫu sẽ bao gồm một trường văn bản có tên là “Tên của bạn” và một nút

Please Enter Your Name

Your Name: 

0. Tập lệnh xác thực của chúng tôi sẽ đảm bảo rằng người dùng nhập tên của họ trước khi biểu mẫu được gửi đến máy chủ

Mở trang này để xem nó hoạt động. Hãy thử nhấn nút Gửi chi tiết mà không điền bất cứ thứ gì vào trường “Tên của bạn”

Bạn có thể muốn mở mã nguồn của biểu mẫu này trong một cửa sổ riêng để bạn có thể tham khảo nó trong suốt hướng dẫn

Bạn có thể thấy rằng trang bao gồm một hàm JavaScript có tên là

Please Enter Your Name

Your Name: 

1 thực hiện xác thực biểu mẫu, theo sau là chính biểu mẫu đó. Hãy nhìn vào hình thức đầu tiên

Hình thức

Phần đầu tiên của biểu mẫu là thẻ

Please Enter Your Name

Your Name: 

2

Biểu mẫu được cung cấp một

Please Enter Your Name

Your Name: 

  

3 của

Please Enter Your Name

Your Name: 

4. Điều này là để chúng tôi có thể tham chiếu biểu mẫu theo tên từ chức năng xác thực JavaScript của chúng tôi

Biểu mẫu sử dụng phương pháp

Please Enter Your Name

Your Name: 

5 để gửi dữ liệu tới tập lệnh CGI giả trên ELATED. máy chủ của com cảm ơn người dùng. Trong thực tế, tất nhiên bạn sẽ gửi dữ liệu đến tập lệnh CGI, trang ASP, v.v. [e. g. một bưu phẩm mẫu]

Cuối cùng, thẻ

Please Enter Your Name

Your Name: 

2 bao gồm thuộc tính

Please Enter Your Name

Your Name: 

7 để gọi hàm xác thực JavaScript của chúng tôi,

Please Enter Your Name

Your Name: 

1, khi nhấn nút “Gửi chi tiết”.

Please Enter Your Name

Your Name: 

9 cho phép chúng tôi trả lại giá trị

0 hoặc

1 từ chức năng của chúng tôi tới trình duyệt, trong đó

0 có nghĩa là “tiếp tục và gửi biểu mẫu tới máy chủ”, và

1 có nghĩa là “không gửi biểu mẫu”. Điều này có nghĩa là chúng tôi có thể ngăn biểu mẫu được gửi nếu người dùng không điền đúng cách

Phần còn lại của biểu mẫu nhắc người dùng nhập tên của họ vào trường biểu mẫu có tên là

4 và thêm nút gửi "Gửi chi tiết"

Please Enter Your Name

Your Name: 

  

Bây giờ, hãy xem chức năng xác thực biểu mẫu JavaScript thực hiện công việc thực tế là kiểm tra biểu mẫu của chúng ta

Hàm

Please Enter Your Name

Your Name: 

1

Chức năng xác thực biểu mẫu,

Please Enter Your Name

Your Name: 

1, được nhúng trong phần tử

7 gần đầu trang

Dòng đầu tiên [_______11_______8] cho trình duyệt biết rằng chúng tôi đang viết một số JavaScript và nhận xét HTML [

9] trong dòng thứ hai ẩn tập lệnh khỏi các trình duyệt cũ hơn không hiểu JavaScript

Tiếp theo, chúng ta bắt đầu hàm

Please Enter Your Name

Your Name: 

1, sau đó đặt một biến có tên là

function validate_form [ ]
{
    valid = true;

1 thành giá trị

0

function validate_form [ ]
{
    valid = true;

Chúng tôi sử dụng biến

function validate_form [ ]
{
    valid = true;

1 này để theo dõi xem biểu mẫu của chúng tôi đã được điền chính xác hay chưa. Nếu một trong các lần kiểm tra của chúng tôi không thành công, chúng tôi sẽ đặt

function validate_form [ ]
{
    valid = true;

1 thành

1 để biểu mẫu không được gửi

5 dòng tiếp theo kiểm tra giá trị của trường

4 của chúng tôi để đảm bảo rằng nó đã được điền vào

    if [ document.contact_form.contact_name.value == "" ]
    {
        alert [ "Please fill in the 'Your Name' box." ];
        valid = false;
    }

Nếu trường trống, người dùng sẽ được cảnh báo bằng một hộp cảnh báo và biến

function validate_form [ ]
{
    valid = true;

1 được đặt thành

1

Tiếp theo, chúng tôi trả lại giá trị của biến

function validate_form [ ]
{
    valid = true;

1 cho trình xử lý sự kiện

    if [ document.contact_form.contact_name.value == "" ]
    {
        alert [ "Please fill in the 'Your Name' box." ];
        valid = false;
    }

0 [được mô tả ở trên]. Nếu giá trị là

0 thì biểu mẫu sẽ được gửi đến máy chủ;

    return valid;

Cuối cùng, chúng ta kết thúc hàm

Please Enter Your Name

Your Name: 

1 bằng dấu ngoặc nhọn và kết thúc nhận xét HTML và phần tử

    if [ document.contact_form.contact_name.value == "" ]
    {
        alert [ "Please fill in the 'Your Name' box." ];
        valid = false;
    }

4

}

//-->

Đó là tất cả để xác thực biểu mẫu JavaScript đơn giản. Ví dụ của chúng tôi rất đơn giản vì nó chỉ kiểm tra một trường. Hãy mở rộng ví dụ này bằng một hàm phức tạp hơn để kiểm tra nhiều trường biểu mẫu. Chúng ta cũng sẽ xem cách kiểm tra các loại trường khác, chẳng hạn như hộp kiểm, nút radio và danh sách thả xuống

Một hình thức phức tạp hơn

Hãy xem xét một biểu mẫu được xác thực phức tạp hơn với một số loại trường biểu mẫu khác nhau

Mở trang này để xem nó hoạt động. Hãy thử nhấn nút Gửi chi tiết mà không cần điền vào biểu mẫu và xem điều gì sẽ xảy ra

Một lần nữa, bạn có thể muốn mở mã nguồn của biểu mẫu này trong một cửa sổ riêng để bạn có thể tham khảo nó khi chúng tôi nói chuyện với bạn

Giống như ví dụ trước của chúng ta, trang này có một biểu mẫu tên là

    if [ document.contact_form.contact_name.value == "" ]
    {
        alert [ "Please fill in the 'Your Name' box." ];
        valid = false;
    }

5 và một hàm tên là

Please Enter Your Name

Your Name: 

1. Ngoài trường văn bản trước đó, biểu mẫu còn có các nút radio, danh sách thả xuống và hộp kiểm

Hàm

Please Enter Your Name

Your Name: 

1 hiện có thêm 3 kiểm tra, một kiểm tra cho mỗi trường mới của chúng tôi

Xác thực các nút radio

Sau khi hộp văn bản

4 đã được chọn, các nút radio

    if [ document.contact_form.contact_name.value == "" ]
    {
        alert [ "Please fill in the 'Your Name' box." ];
        valid = false;
    }

9 được xác thực

    if [ [ document.contact_form.gender[0].checked == false ]
    && [ document.contact_form.gender[1].checked == false ] ]
    {
        alert [ "Please choose your Gender: Male or Female" ];
        valid = false;
    }

Mã này kiểm tra xem một trong hai nút radio [“Nam” hoặc “Nữ”] đã được nhấp hay chưa. Nếu cả hai đều không được nhấp vào [

    return valid;

0], người dùng sẽ được cảnh báo và

function validate_form [ ]
{
    valid = true;

1 được đặt thành

1

Xác thực danh sách thả xuống

Tiếp theo, danh sách thả xuống “Tuổi” được kiểm tra xem người dùng đã chọn tùy chọn chưa. Trong biểu mẫu, chúng tôi đã đặt tên cho tùy chọn đầu tiên trong danh sách thả xuống là

    return valid;

3. Sau đó, JavaScript của chúng tôi có thể kiểm tra xem tùy chọn nào đã được chọn khi người dùng gửi biểu mẫu. Nếu tùy chọn đầu tiên được chọn, chúng tôi biết người dùng chưa chọn tùy chọn “thực” và có thể cảnh báo họ

    if [ document.contact_form.age.selectedIndex == 0 ]
    {
        alert [ "Please select your Age." ];
        valid = false;
    }

Lưu ý rằng các giá trị cho

    return valid;

4 bắt đầu từ 0 [đối với tùy chọn đầu tiên]

Xác thực các hộp kiểm

Cuối cùng, hộp kiểm “Điều khoản và Điều kiện” được xác thực. Chúng tôi muốn người dùng đồng ý với Điều khoản và Điều kiện tưởng tượng của chúng tôi trước khi họ gửi biểu mẫu, vì vậy chúng tôi sẽ kiểm tra để đảm bảo rằng họ đã nhấp vào hộp kiểm

    if [ document.contact_form.terms.checked == false ]
    {
        alert [ "Please check the Terms & Conditions box." ];
        valid = false;
    }

Bởi vì chúng tôi đặt biến

function validate_form [ ]
{
    valid = true;

1 của mình thành

1 trong bất kỳ trường hợp nào ở trên, nếu một hoặc nhiều lần kiểm tra của chúng tôi không thành công, biểu mẫu sẽ không được gửi đến máy chủ. Nếu người dùng chưa hoàn thành nhiều trường, thì họ sẽ thấy một hộp cảnh báo xuất hiện cho từng trường bị thiếu

Bây giờ bạn đã biết cách viết tập lệnh xác thực biểu mẫu có thể xử lý nhiều trường biểu mẫu, bao gồm hộp văn bản, nút radio, danh sách thả xuống và hộp kiểm

Một điểm cần lưu ý về xác thực JavaScript là nó luôn có thể bị phá vỡ bởi người dùng vô hiệu hóa JavaScript trong trình duyệt của họ, vì vậy, để xác thực an toàn, bạn sẽ cần viết mã xác thực trong tập lệnh phía máy chủ của mình. Tuy nhiên, để sử dụng hàng ngày, JavaScript là một cách nhanh chóng và dễ dàng để kiểm tra biểu mẫu của bạn trước khi chúng được gửi đến máy chủ của bạn

Một bài tập. xác thực "một trường tại một thời điểm"

Tập lệnh ví dụ của chúng tôi hoạt động bằng cách xác thực tất cả các trường biểu mẫu cùng một lúc. Điều này có thể hơi khó hiểu đối với người dùng, đặc biệt nếu họ bỏ lỡ nhiều trường, vì họ sẽ nhận được rất nhiều hộp cảnh báo xuất hiện và họ có thể quên mất trường nào cần điền

Như một bài tập, hãy thử sửa đổi tập lệnh để chỉ nhắc người dùng một trường tại một thời điểm. Ví dụ: nếu họ bỏ lỡ các trường “Tên” và “Giới tính” và nhấn “Gửi chi tiết”, ban đầu nó sẽ chỉ nhắc họ về trường “Tên”. Sau đó, sau khi họ điền vào trường “Tên” và nhấn lại “Gửi chi tiết”, nó sẽ nhắc họ về trường “Giới tính”

Để hoàn thiện, hãy thử làm cho tập lệnh di chuyển con trỏ đến trường cần điền mỗi lần [Gợi ý. sử dụng phương pháp

    return valid;

7 để làm điều này]

Xác thực mẫu là gì?

Mục đích của xác nhận mẫu là gì?

Ví dụ về xác thực biểu mẫu cơ bản trong JavaScript là gì?

Các loại xác thực biểu mẫu khác nhau trong JavaScript là gì?