验证 ReactJS 密码确认

Question

我做了一个密码比较验证，但它不起作用，你能帮忙吗？我不知道反应的形式是否不同，但我没有找到类似的事情。

function validarSenha(){
    let senha = document.getElementsByName('senha').value;
    let senha2 = document.getElementsByName('senha2').value;
 
    if(senha!= senha2) {
        alert("Senhas diferentes!");
        return false; 
    }
    return true;
}

<div class="form-row d-flex justify-content-center align-items-center container">
  <div class="form-group col-md-3">
    <label for="inputPassword" id="fieldRegister">Senha:</label>
    <input type="password" class="form-control" id="inputPassword" minLength="6" maxLength="8"
           placeholder="(Máx 6 a 8 dígitos)" name="senha" required
           value={password}
           onChange={e=> setPassword(e.target.value)}
    />
  </div>
  <div class="form-group col-md-4">
    <label for="inputPassword" id="fieldRegister">Confirmar senha:</label>
    <input type="password" class="form-control" name="senha2" id="inputPassword2" minLength="6" maxLength="8" placeholder="Confirme sua senha" required/>
  </div>

</div>
<div class="form-row d-flex justify-content-center align-items-center container">
  <button type="submit" id="button" class="btn btn-primary mb-3 col-md-2" onClick={validarSenha()}>Cadastrar</button>
</div>

Answer 1

getElementsByName()方法returns文档中指定名称的所有元素的集合，需要使用下面的方法获取值

document.getElementsByName('senha')[0].value;

你的onClick定义是错误的，你应该传递一个函数声明而不是实现函数

//no pass any value to function
onClick={validarSenha}
//pass the value to function
onClick={(e)=>{validarSenha(e.target.value)}}

Answer 2

您好，可能的原因是您正在使用 getElementsByName，它表示它将 return 数组形式的值，而您需要特定元素的值，因此请始终尝试使用 getElementById，请在下面找到正确答案

function validarSenha(){
    let senha = document.getElementById('inputPassword').value;
    let senha2 = document.getElementById('inputPassword2').value;
 
    if(senha!= senha2) {
        alert("Senhas diferentes!");
        return false; 
    }
    return true;
}

<div class="form-row d-flex justify-content-center align-items-center container">
                   <div class="form-group col-md-3">
                       <label for="inputPassword" id="fieldRegister">Senha:</label>
                       <input type="password" class="form-control" id="inputPassword" minLength="6" maxLength="8" 
                            placeholder="(Máx 6 a 8 dígitos)" name="senha" required
                            value={password}
                            onChange={e=> setPassword(e.target.value)}
                        />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputPassword" id="fieldRegister">Confirmar senha:</label>
                        <input type="password" class="form-control" name="senha2" id="inputPassword2" minLength="6" maxLength="8" placeholder="Confirme sua senha" required/>
                    </div>
                    
                 </div>
                 <div class="form-row d-flex justify-content-center align-items-center container">
                    <button type="submit" id="button" class="btn btn-primary mb-3 col-md-2" onClick={validarSenha()}>Cadastrar</button>
                </div>

验证 ReactJS 密码确认

Validate ReactJS password confirmation

javascript

passwords

function

reactjs