如何在提交时验证表单？答案

【问题标题】：How to validate form on submit?如何在提交时验证表单？
【发布时间】：2020-08-10 16:33:45
【问题描述】：

我正在尝试在我的 React 应用程序中验证表单 onSubmit。我想添加一些功能，例如，当其中一个条件返回 false 时，例如红色轮廓将添加到该输入中，并且该输入内部将是带有该错误的占位符。

这是在主文件中呈现的组件之一。通过单击设置警报按钮调用此组件。这并不重要，但重要的是，我将 getInfo() 函数从主组件发送到该组件作为道具。我需要在验证返回 true 时调用此函数

表单由 3 个输入字段和一个按钮组成，但我不需要检查第一个。

由于我的应用是闹钟，当你点击设置闹钟按钮时会弹出这个表单，我需要检查是否

第一个输入不是空的，如果它的值不超过 24（在这个输入中你设置闹钟的小时数）第二个输入不为空，如果它的值不超过 60（在这个输入中你设置了分钟的警报）我的想法是为这些值创建状态并创建应该更新状态的函数。函数被调用 onChange 那个特定的输入。

const [validate,setValidate] = useState({
    message:'',
    hours:'',
    minutes:''
}) 

function updateHours(e){
    let value = e.target.value
    setValidate(prevState => ({
        ...prevState,
       hours:value
    }))
}

function updateMinutes(e){
    let value = e.target.value;
    setValidate(prevState => ({
        ...prevState,
        minutes:value
    }))
}

到目前为止，一切正常。然后我尝试创建将验证这些值并返回结果的新函数。这个函数会在提交时调用，如果返回true，则表示一切正常，将发送表单。

let getInfo = props.getInfo;

function validateForm(){
if(validate.hours > 24){
    alert('enter correct hours !')
    return false;
}

if(validate.minutes > 60){
    alert('enter correct minutes !')
    return false;
}

return getInfo;
}

我已经尝试在 Google 上搜索如何在提交时执行此操作，但我只能找到这种方法，但它不起作用。它的行为就像没有调用任何函数。

<form onSubmit="return validateForm">
 <FontAwesomeIcon 
    icon={faTimesCircle} 
    className="closeIcon"
    onClick={() => setAlarm(false)} />

 <h3>Please set your alarm</h3>

 <label htmlFor="text">Message</label>
 <input type="text" id="text" autoComplete="off" autoFocus="on" />

 <div className="flex">
   <div className="inputNumber">
      <label htmlFor="hours">Hour</label>
      <input type="number" id="hours" name="hours" onChange={updateHours} />
   </div>
                            
   <div className="inputNumber">
      <label htmlFor="minutes">Minute</label>
      <input type="number" id="minutes" name="minutes" onChange={updateMinutes} />
   </div>
</div>
<button onClick={()=>setAlarm(false)}>SET ALARM</button>

有没有人遇到过这种问题，或者你能给我建议如何处理它？此外，我对一些更好的方法持开放态度。谢谢你。

【问题讨论】：

标签： javascript html reactjs forms validation

【解决方案1】：

我知道它看起来有点像但尝试过这样的事情？无需返回函数，只需调用它即可。

function validateForm(){
    if(validate.hours > 24 || validate.minutes > 60) {
        if(validate.hours > 24) alert('enter correct hours !')

        if(validate.minutes > 60) alert('enter correct minutes !')
    }
    else getInfo();
}

如果对您没有帮助，您能否提供给我们reproducible example以便更好地理解:)（您可以使用codesandbox.io）

【讨论】：

我今天会尝试 :) 但我想我已经尝试过了，它不起作用。我会在评论部分告诉你，并为你提供代码和框:) 谢谢

【解决方案2】：

我发现我几乎从不依赖 react 中的默认表单提交，而是通常会调用一些 API。我希望这就是您将要做的事情，所以我会推荐一个考虑到这一点的解决方案。

首先，验证功能。它应该阻止默认表单提交，检查您的表单值并设置错误状态。如果一切正常，那么它应该提交操作。

function validateForm(e) {
  e.preventDefault(); //stop the default browser behavior
  if(validate.hours > 24){
    alert('enter correct hours !')
    return;
  }

  if(validate.minutes > 60){
    alert('enter correct minutes !')
    return;
  }

  performMyApiCall();
}

第二，html。请记住，onSubmit 是 React 组件上的 React 属性。你需要给它一个功能。该函数将带一个参数e，即事件详情。

<form onSubmit={validateForm}>
  //snip
</form>

这应该可以帮助您手动设置验证。也就是说，除非我做一些不寻常的事情，否则我会使用现有的包来进行表单验证。我使用material-ui作为前端库，所以经常求助react-material-ui-form-validator。

【讨论】：