如何設定在輸入表單中輸入多少字母的范圍？-有解無憂

我目前正在制作密碼強度檢查器，我想檢查密碼的長度并確定密碼的強度。但我不知道如何檢查密碼的長度，使其類似于“5 到 10 個單詞之間”或“20 到 30 個單詞之間”

import React from "react";
import { useState } from "react";

const Password = () => {

    const [password, setPassword] = useState("")

    const HandleInputChange = (event) => {
        setPassword(event.target.value)
    }

    const letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
    const capsLetters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    const specialChar = ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"]

    const slicedLetters = letters.slice(...letters)
    const slicedCapsLetters = capsLetters.slice(...capsLetters)
    const slicedNumbers = numbers.slice(...numbers)
    const slicedSpecialChar =   specialChar.slice(...specialChar)

    const [passwordStrength, setPasswordStrength] = useState()

// I am working with this function 
    const StrengthCheck = () => {
        if(password.includes(slicedLetters || capsLetters)) {
            setPasswordStrength("Very Weak")
        } else if(password.includes(slicedLetters && slicedNumbers || slicedCapsLetters)) {
            setPasswordStrength("Weak")
        } else if(password.includes(slicedLetters && slicedNumbers && slicedSpecialChar || slicedCapsLetters)) {
            setPasswordStrength("Medium")
        } else if(password.includes(slicedLetters && slicedCapsLetters && slicedSpecialChar || slicedNumbers)) {
            setPasswordStrength("Strong")
        } else if(password.includes(slicedLetters && slicedCapsLetters && slicedNumbers && slicedSpecialChar)) {
            setPasswordStrength("Very Strong")
        } else {
            setPasswordStrength("Invalid Password to Check!")
        }
    }

    return(
        <div>
            <h1>Password Strength Checker</h1>
            <h3>Your Password</h3>
            <input type={"text"} value={password} onChange={HandleInputChange}/>
            <button onClick={StrengthCheck}>Confirm</button>
            <h3>Password display:</h3>
            <input type={"password"} value={password}/>
            <br/>
            <br/>
            <hr/>
            Your password strength is: <b>{passwordStrength}</b>
        </div>
    )
}

export default Password

uj5u.com熱心網友回復：

有很多方法可以做到這一點。您的 StrengthCheck 函式的形狀并不完美，考慮到長度，您可以創建一個類似這樣的陣列，

const LengthChecker = [10,20,30,40,50]

在此之后，您可以通過以下方式進行檢查，

var length = text.length;
var _index;
LengthChecker.map((item, index) => {
 if(length < item){
  _index = index;
    break;
}
}
});
console.log(LengthChecker(_index)

uj5u.com熱心網友回復：

您可以使用屬性 maxLength={} 來獲得最大長度。

為了檢查長度以進行測量，您可以執行 value.length 或其他操作

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529670.html

標籤：javascript反应

上一篇：如何通過獲取React中特定元素的id來創建串列？

下一篇：使用路由后反應看不到任何東西