Hướng dẫn javascript login page without database - trang đăng nhập javascript không có cơ sở dữ liệu

Đối với thông báo lỗi, chúng tôi chỉ chơi xung quanh với kích thước và kiểu dáng của nó. Do lưu ý rằng ban đầu 6 của nó được đặt thành 0, nghĩa là không hiển thị. Giá trị này sẽ được thay đổi bằng JavaScript khi người dùng nhập thông tin đăng nhập không hợp lệ.

Chúng tôi cũng thay đổi hiển thị một nửa của văn bản trong thông báo lỗi. Nếu bạn nhìn lại phần tử tin nhắn trong HTML, chúng tôi có:

Invalid username and/or password

Lưu ý rằng phần tử 7 kết thúc một nửa văn bản. 7 khá hữu ích khi bạn chỉ muốn tạo kiểu một phần của văn bản trong một phần tử. Bởi vì chúng tôi muốn thông báo lỗi được chia thành hai dòng văn bản, tên người dùng không hợp lệ, và và và/hoặc mật khẩu, chúng tôi làm cho nửa thứ hai hiển thị như một dòng văn bản mới bằng cách đặt màn hình đó của ____ 47 thành defer0 [defer1 ].

Bây giờ chúng ta chỉ cần đi qua các quy tắc ____ 16 16, hàng thứ ba của lưới , để kết thúc CSS [dòng 71 cho đến khi kết thúc]. Chúng tôi bắt đầu bằng cách sử dụng bố cục lưới lần cuối cùng để biến

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

Sau đó, chúng tôi tạo kiểu cho các lĩnh vực hình thức. Vì chúng tôi muốn cả hai trường [tên người dùng và mật khẩu] trông giống nhau, chúng tôi tạo một quy tắc duy nhất chọn lớp được cung cấp cho cả hai phần tử, defer9. Thay vì chọn từng phần tử riêng lẻ bằng ID của nó chỉ để lặp lại CSS, chúng tôi viết CSS một lần trong một lớp và sau đó đưa lớp đó cho cả hai phần tử.

Đối với các sửa đổi phong cách, đó là một số thay đổi nhỏ để làm cho hai yếu tố

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

Cuối cùng, chúng tôi thay đổi kiểu của nút đăng nhập để làm cho nó trông đẹp hơn. Không có gì mới ở đây, ngoại trừ 6 thay đổi con trỏ thành một con trỏ khi di chuột qua nút.

Được rồi, chúng tôi đã vượt qua HTML và chúng tôi vừa hoàn thành CSS. Bây giờ chúng tôi đang ở trong ngôi nhà kéo dài với JavaScript.

JavaScript

Để bắt đầu, chúng tôi nhận được tất cả các yếu tố mà chúng tôi sẽ cần làm việc với việc sử dụng JavaScript: Mẫu đăng nhập, nút đăng nhập và thông báo lỗi đăng nhập. Chúng tôi làm điều đó bằng cách gọi phương thức 7, chuyển nó là ID của phần tử chúng tôi đang tìm kiếm. Ngoài ra, vì các giá trị của ba biến đó sẽ không thay đổi, nghĩa là, các biến sẽ luôn đề cập đến các yếu tố chính xác, thì chúng tôi khai báo cả ba là 8.

Sau đó, chúng tôi tạo một trình nghe sự kiện cho nút đăng nhập, loại 9. Nói cách khác, mỗi lần nhấp vào nút đăng nhập, hàm được xác định sau 0 sẽ được thực thi. Hàm nhận được một tham số mà chúng tôi gọi là 1, đây là sự kiện chuột đại diện cho nút nhấp chuột [đặt tên cho nó 1 chỉ là một quy ước của các loại, hãy gọi nó là bất cứ điều gì bạn thích].

Bên trong chức năng, chúng tôi bắt đầu bằng cách ngăn chặn hành vi mặc định của việc nhấp vào nút Đăng nhập [đó là gửi dữ liệu biểu mẫu]. Trong cuộc biểu tình này, chúng tôi không muốn gửi dữ liệu, chúng tôi chỉ muốn xác nhận nó bằng JavaScript, do đó 3 để ngăn chặn việc gửi.

Sau đó, chúng tôi lấy các giá trị đầu vào của người dùng trong các trường biểu mẫu 4 và

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

function check[form] { /*function to check userid & password*/
            /*the following code checkes whether the entered userid and password are matching*/
            if[form.userid.value == "johnsmith" && form.pswrd.value == "password123"] {
                window.open['dashboard.html']/*opens the target page while Id & password matches*/
            }
            else {
                alert["Error Password or Username"]/*displays error message*/
            }
        }

Bây giờ kết thúc chạm vào. Bất cứ khi nào người dùng nhấp vào nút Đăng nhập, chúng tôi sẽ truy xuất bất kỳ giá trị nào đã được nhập vào các trường biểu mẫu. Nhưng chúng ta cần phải làm điều gì đó với những thông tin đó. Sau đó, chúng tôi sẽ viết một khối if/other để thực thi một đoạn mã nếu thông tin đăng nhập là hợp lệ hoặc một đoạn khác nếu chúng không hợp lệ. Chúng ta cũng cần một điều kiện, phải không? Hãy cùng làm cho điều kiện đó xác nhận thực tế của thông tin đăng nhập. Để đơn giản, xác thực đó sẽ kiểm tra xem tên người dùng được gõ có phải là người dùng hay không và mật khẩu là Web Web_Dev. Trong cú pháp JavaScript, điều này có nghĩa là

6

Trong đó 7 là và toán tử chỉ định rằng chúng ta cần cả tên người dùng để bằng với người dùng trên mạng và mật khẩu bằng với Web Web_Dev.

Nếu thông tin đăng nhập thực sự hợp lệ, thì chúng tôi sẽ hiển thị một hộp thoại cảnh báo với thông báo mà người dùng đã đăng nhập với Sucess và tiếp theo tải lại trang [một lần nữa, chỉ vì sự đơn giản]. Nhưng nếu tên người dùng hoặc mật khẩu không hợp lệ, thì chúng tôi sẽ thay đổi thuộc tính 6 của thông báo lỗi đăng nhập [9] để hiển thị và cho người dùng biết thông tin đăng nhập của họ không hợp lệ. Chúng ta có thể thực hiện thay đổi CSS này trong JavaScript bằng cách truy cập