如何创建一个表单验证，声明输入值不应该为空并且应该> 0？

【问题标题】：how to create a form validation which states that input value shouldn't be empty and it should be > 0?如何创建一个表单验证，声明输入值不应该为空并且应该> 0？
【发布时间】：2022-01-07 16:24:52
【问题描述】：

我想在提交之前做一个逻辑，说明输入值不应该是任何空值，并且应该大于 0。

    <Form className  = "workout-form">
     <div className ="form-row">
              <label className ="form__label" value>Duration</label>
              <input type = 'number' value = {duration} min = '0' onChange = {(e) => setDuration(e.target.value)} class = 'duration' placeholder="min" required/>
            </div>
 <button className ="form-btn" onClick = {submitWorkout}>Add Workout</button>
</Form>

【问题讨论】：

标签： validation input label submit react-forms

【解决方案1】：

一种方法是创建一个表单验证函数，当我们要提交表单时将调用该函数，当表单正确完成时，您然后调用该函数来提交表单信息。表单控制函数示例

function formValidation(){
    duration = document.getElementById('durationField').value;
    
    if(duration > 0 && duration != ""){
         //call the submit function
         //submitWorkout()
    }

}

//function to submit the form
function submitWorkout(){
    //content of the function
}

为此，您必须将 id 属性添加到输入字段并将其设置为 durationField，如下所示：

<input type = 'number' id='durationField' value = {duration} min = '0' onChange = {(e) => setDuration(e.target.value)} class = 'duration' placeholder="min" required/>

【讨论】：