如何设置在输入表单中输入多少字母的范围？答案

【问题标题】：How to set a range for how much letters are being typed in in an input form in react?如何设置在输入表单中输入多少字母的范围？
【发布时间】：2022-11-08 23:49:53
【问题描述】：

我目前正在制作密码强度检查器，我想检查密码的长度并确定密码的强度。但我不知道如何检查密码的长度，使其类似于“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

【问题讨论】：

密码是一个字符串，所以它有一个属性length，告诉你它有多少个字符。此外，您在StrengthCheck 中的检查不会像您认为的那样工作，password.includes(slicedLetters || capsLetters) 不会根据slicedLetters 和capsLetters 检查密码，而是选择这两个中的第一个，即真实且运行@ 987654327@只有它

标签： javascript reactjs

【解决方案1】：

您可以使用属性 maxLength={} 来获得最大长度。

为了检查长度以进行测量，您可以执行 value.length 或其他操作

【讨论】：