验证 ReactJS 密码确认答案

【问题标题】：Validate ReactJS password confirmation验证 ReactJS 密码确认
【发布时间】：2021-07-24 02:01:24
【问题描述】：

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

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>

【问题讨论】：

onclick={validarSenha}

标签： javascript reactjs function passwords

【解决方案1】：

您好，可能的原因是您使用了getElementsByName，它表示它将以数组的形式返回值，而您需要特定元素的值，因此请始终尝试使用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>

【讨论】：

【解决方案2】：

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

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)}}

【讨论】：