在 React js 中验证表单

Question

我正在尝试在我的 React 应用程序中验证表单 onSubmit。

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

时，我需要调用此函数

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

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

• 第一个输入不为空，如果它的值不超过 24（在此输入中设置闹钟小时数）
• 第二个输入不为空，如果它的值不超过 60（在这个输入中你设置闹钟的分钟数）

我的想法是为这些值创建 States 并创建应该更新状态的函数。特定输入的函数称为 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
    }))
}

到目前为止，一切正常。然后我尝试创建将验证这些值并返回结果的新函数。这个函数将被调用onSubmit，如果返回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>
</form>

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

Answer 1

首先我应该说，由于浏览器自己验证了一切，所以不需要自己在网络平台上进行验证。见Constraint Validation API。我知道这感觉很奇怪，因为大多数开发人员都是自己做的。不过我认为没有任何必要。

您要做的是约束值，但不验证，并根据您的需要使用各种属性；类型、模式、最小、最大、最小长度、最大长度、必需等。

您将被一些属性（validity 等）、方法（checkValidity 等）、属性（type、pattern、min、max 等）、伪类装备（:invalid、:valid 等）和事件（invalid 等），如果用户输入对您的约束有效。

使用这些您将有原因，以及何时无效，以及设置自定义无效状态消息或样式的机会。顺便说一句，无论您使用 React 之类的框架还是其他任何框架，它都仍然可以使用。