資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在 ReactJS 中建立密碼檢查列表？
如今，應用程式使用一次性密碼或魔法連結進行身份驗證，但我們不能忽略使用使用者名稱和密碼的身份驗證。
每當我們允許使用者使用使用者名稱和密碼註冊時，我們應該確保使用者輸入的密碼足夠強大，這樣駭客就無法破解。
在本教程中，我們將學習如何在 ReactJS 中驗證密碼的安全級別。
建立自定義驗證演算法
我們可以建立一個自定義驗證演算法來檢查密碼是強還是弱。我們可以為小寫字母、大寫字母和數字建立正則表示式。
之後，我們可以使用 match() 方法將密碼字串與正則表示式匹配。如果任何密碼字串與任何正則表示式都不匹配，我們可以顯示密碼較弱的訊息。
語法
使用者可以按照以下語法使用正則表示式透過建立自定義演算法來驗證密碼。
var lowerCase = /[a-z]/g; var upperCase = /[A-Z]/g; var numbers = /[0-9]/g; let bool = new_pass.match(regex)
在上面的語法中，我們有不同的正則表示式。我們對每個正則表示式都使用了 match() 方法，並在 bool 變數中獲得了結果。
演算法
步驟 1 – 建立小寫字母、大寫字母和數字的正則表示式。
步驟 2 – 使用 match() 方法將密碼與小寫正則表示式匹配。如果 match() 方法返回 false，則設定錯誤訊息。
步驟 3 – 將數字和大寫正則表示式與密碼匹配，並根據其返回的布林值設定錯誤訊息。
步驟 4 – 接下來，最後檢查密碼的長度。如果長度小於 10，也設定錯誤訊息。
示例 1
在下面的示例中，我們建立了密碼輸入。每當使用者更改密碼值時，它都會呼叫 handlePassword() 函式。在 handlePassword() 函式中，我們建立了各種正則表示式，並使用 match() 方法將它們與密碼字串匹配。
在輸出中，使用者可以看到，如果密碼不符合任何條件，它將相應地顯示錯誤訊息。
import React, { useState } from "react"; const App = () => { const [password, setPassword] = useState("Abc.@678"); const [errorMessage, setErrorMessage] = useState(""); function handlePassword(event) { let new_pass = event.target.value; setPassword(new_pass); // regular expressions to validate password var lowerCase = /[a-z]/g; var upperCase = /[A-Z]/g; var numbers = /[0-9]/g; if (!new_pass.match(lowerCase)) { setErrorMessage("Password should contains lowercase letters!"); } else if (!new_pass.match(upperCase)) { setErrorMessage("Password should contain uppercase letters!"); } else if (!new_pass.match(numbers)) { setErrorMessage("Password should contains numbers also!"); } else if (new_pass.length < 10) { setErrorMessage("Password length should be more than 10."); } else { setErrorMessage("Password is strong!"); } } return ( <div> <h2> {" "} Validate the password by creating the custom algorithm in ReactJS.{" "} </h2> <input type = "text" value = {password} onChange = {handlePassword} /> <div style = {{ color: "red" }}> {errorMessage} </div> </div> ); }; export default App;
輸出
使用 React 密碼檢查列表 NPM 包
ReactJS 最好的一點是它包含各種庫；我們可以透過安裝它直接在我們的應用程式中使用它。react-password-checklist 庫允許我們根據各種條件檢查密碼的強度。
例如，它驗證密碼的最小和最大長度、大寫字母、數字等。開發人員需要在 PasswordChecklist 元件中傳遞 props，它將相應地驗證密碼。
執行以下命令以在我們的應用程式中安裝 react-password-checklist。
npm i react-password-checklist
語法
使用者可以按照以下語法使用 react-password-checklist NPM 包來驗證密碼。
<PasswordChecklist
rules={["capital", "match", "specialChar", "minLength", "number"]}
minLength={8}
value={password}
valueAgain={matchPassword}
/>
在上面的語法中，我們使用了 PasswordChecklist 元件並傳遞了 props 來驗證密碼。
示例 2
在下面的示例中，我們匯入了 react-password-checklist 庫並將其用作元件。我們以陣列格式將規則作為 prop 傳遞以驗證密碼。此外，我們將密碼繫結到 value，並將 passwordMatch 繫結到 PasswordCheckList 元件中的 valueAgain。
在輸出中，使用者可以觀察到訊息之前的交叉符號，該規則不符合密碼字串。
import React, { useState } from "react"; import PasswordChecklist from "react-password-checklist"; const App = () => { const [password, setPassword] = useState("Abc.@678"); const [matchPassword, setMatchPassword] = useState("ABC.@678"); const [errorMessage, setErrorMessage] = useState(""); function handleSetPassword(event) { setPassword(event.target.value); } function handleSetMatchPassword(event) { setMatchPassword(event.target.value); } return ( <div> <h2> {" "} Validate the password using the <i> react-password-checklist </i> in ReactJS.{" "} </h2> <div> Enter the password: </div> <input type = "text" value = {password} onChange = {handleSetPassword} /> <div> Enter the password Again: </div> <input type = "text" value = {matchPassword} onChange = {handleSetMatchPassword} /> <PasswordChecklist rules = {["capital", "match", "specialChar", "minLength", "number"]} minLength = {8} value = {password} valueAgain = {matchPassword} /> </div> ); }; export default App;
輸出
示例 3
在下面的示例中，我們為每個密碼檢查規則設定了自定義驗證訊息。使用者可以看到我們如何將訊息物件作為 PasswordChecklist 元件的 prop 傳遞。在訊息物件中，我們使用規則作為鍵，訊息作為其值。
import React, { useState } from "react"; import PasswordChecklist from "react-password-checklist"; const App = () => { const [password, setPassword] = useState("Abc.@678"); const [matchPassword, setMatchPassword] = useState("ABC.@678"); const [errorMessage, setErrorMessage] = useState(""); function handleSetPassword(event) { setPassword(event.target.value); } function handleSetMatchPassword(event) { setMatchPassword(event.target.value); } return ( <div> <h2> {" "} Validate the password using the <i> react-password-checklist </i> in ReactJS.{" "} </h2> <div> Enter the password: </div> <input type = "text" value = {password} onChange = {handleSetPassword} /> <div> Enter the password Again: </div> <input type = "text" value = {matchPassword} onChange = {handleSetMatchPassword} /> <PasswordChecklist rules = {[ "capital", "match", "specialChar", "minLength", "lowercase", "number", ]} minLength = {10} value = {password} valueAgain = {matchPassword} messages = {{ minLength: "The minimum length of the password should be 10.", specialChar: "The password should contain at least one special character.", number: "The password should contain at least one numeric letter.", capital: "The password should contain at least one uppercase letter.", match: "Password and password again should match.", lowercase: "The password should contain at least one lowercase letter.", }} /> </div> ); }; export default App;
輸出
6000+ 次瀏覽
