碼強度檢查是很多網站登錄注冊界面經常用到的功能,本例主要講解如何實現該功能!效果圖如下:
實現代碼:
html:
css:
js:
碼的安全強度進行判斷是在JavaScript腳本中,應用正則表達式來完成的。
avascript可以立即對密碼進行強度檢查,而無需與服務器通信或在瀏覽器上運行腳本時刷新頁面。
互聯網開始是一種連接多臺計算機并在它們之間架起交互橋梁的方式,而不管它們之間的距離和設備類型有多大。
互聯網的一種共同語言已經形成,它使不同的網絡能夠交流和共享數據,從而形成我們現在所居住的相互連接的世界。今天,我們在互聯網上可以做許多事情,無論是銀行、購物、約會,更多的時候,我們都在漫不經心地刷抖音視頻。
眾所周知,這些網站擁有敏感的用戶數據,一旦被錯誤的人訪問,可能會給網站用戶和相關公司帶來巨大的破壞。當然,為了避免這個問題,網站要求你在第一次訪問網站時添加一個強密碼。
密碼越來越奇怪了
隨著計算機越來越強大,破解密碼的能力也越來越強。因此,建議您在密碼中添加不同類型的字符。
這也反映在新登錄進程的表單字段中,因為它們聲明必須添加諸如大寫單詞(A)、小寫單詞(m)、數字(7)、特殊字符(_、&、%、/)和最小總字符數(8-15)等字符。
但是,這些表單域如何評估密碼的強度,并確定您是否成功地勾選了所有條件,因為它沒有在本地服務器上存儲您每次嘗試創建的新密碼?
如何在表單字段上立即發生而不延遲或刷新網頁?
讓我們看看如何實現這種無縫交互。
首先,讓我們簡單介紹一下網站是如何工作的。網站由一組單獨的網頁組成,這些網頁相互連接以顯示網站的不同部分。網頁使用文本、圖像、視頻、鏈接、交互字段和按鈕來與您(碰巧登陸該域的人)進行通信。
就像我們身體的視覺和功能表現(頭發的顏色,蛋白質如何被分解成氨基酸)是由基因代碼(DNA)組成的,網站的視覺和功能表現(標題的顏色是什么,它如何推薦相似的產品)也是用數字代碼(HTML,CSS,JavaScript、PHP等)組成。
網站托管在共享服務器上
當您在瀏覽器(頭條、百度等)上輸入網址,瀏覽器從web服務器所在的位置獲取組成網站的代碼,并在屏幕上顯示這些信息。每次重新加載屏幕或單擊網站的新頁面時,都會執行此過程。
請注意,當您登錄到一個新網站,并開始創建新登錄名和密碼的過程時,只有單擊“注冊”按鈕,網頁才會重新加載。網頁在不與服務器通信的情況下檢查密碼的強度,因為代碼通過您正在使用的web瀏覽器,并在您的計算機存儲上執行。之所以能執行該操作,是因為有一段用一種叫做JavaScript的語言編寫一小段程序代碼。
javascript使網站具有交互性
Javascript是一種面向對象的編程語言,它與HTML和CSS一起構成了構建互聯網的核心技術。它用于向網站添加交互性,主要用于管理面向客戶端的網頁行為,這意味著它負責網頁與您的通信,反之亦然。
對于網頁上的即時交互(例如,單擊按鈕時的動畫、檢查用戶名是否已存在等),Javascript在用于訪問網站而不是服務器的web瀏覽器上運行。這種快速的交互可以為一個骨架式的站點添加許多字符,使其更為用戶友好,對訪問者來說是一種難忘的體驗。
Javascript可以編程來監視用戶要在哪些字段上輸入數據。可以為用戶可能輸入的任意數量的字段設置特定的邏輯,Javascript會相應地響應這些字段。
在設置新密碼的情況下,可以為要求用戶形成密碼的字段添加條件,包括:
已編程的腳本將繼續監視輸入的密碼字段,并運行它的字符列表,這些字符必須添加到您的輸入中。如果其中任何一個丟失,腳本將顯示一條錯誤消息,說明您未能在密碼中添加哪些字符。
Javascript在瀏覽器上運行時啟用密碼檢查。
它還會根據密碼的復雜性來衡量密碼的強度;使用的字符越多,破解密碼就越困難。
盡管這種方法被廣泛使用,但許多網站都選擇使用單點登錄(SSO)系統進行用戶訪問。SSO使第三方網站能夠使用來自微信、QQ、Google、Facebook、Twitter等的用戶帳戶,進行身份驗證和訪問者的安全登錄,而無需為該網站專門創建新帳戶,從而消除了保存用戶日志的麻煩。
這很直觀;隨著你訪問的需要認證的網站數量的增加,你需要記住的密碼數量也會增加,誰喜歡這樣做?
然而,這種密碼驗證方法并不會完全消失,因為許多網站還希望為其用戶(網上銀行、股票交易等)提供一個獨立的入口,因此您不得不繼續吃核桃,以保持足夠強大的記憶力,來記住這些多字符密碼。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。