Question

我想在提交表单之前使用html字段的html'required'属性设置更多条件。有没有一种方法可以手动拦截/更改其检查的条件？就我而言，我想要求字段必须是数组中的值。

Answer 1

由于您使用的是React（以及JSX），因此您可以按照以下方式进行操作：

const myComp = (props) => {
  const [isRequired, setIsRequired] = useState(true);

  if(your logic for when isRequired should be true here){
    setIsRequired(false)
  }
  return (
    <div>
      <form required={isRequired} />
    </div>
)
}

您可以在if中检查要检查的任何数据，可以有多个if，多个检查，一系列检查，无论您想要什么。我将其默认设置为必填，但您可以根据需要进行设置。甚至对于默认的isRequired值都有特定的逻辑。

我在这里使用required html属性，但是您也可以拦截onSubmit表单事件并在那里进行自己的检查，并向用户解释剩下要做的事情。

Answer 2

您可以挂钩onsubmit事件

<form onsubmit="return checkYourCondition()">
<form>


function checkYourCondition(){
    //return true or false depending on your condition 
    return true;
}

Answer 3

您可以生成一个包含所有数组值的RegEx，并将input的pattern属性设置为此RegEx。

使用此解决方案，如果所需输入无效，您将具有浏览器的默认行为。（例如突出显示输入，通知用户...）

Answer 4

这是一个漫长的过程，但非常有用。您可以在on change中任何input标签上进行form事件，

<input type="text" className="form-control" onChange={(event) => this.handleUserInput(event)} name="fname"/>


handleUserInput(e) {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value}, 
            () => { this.validateField(name, value) });
} 



validateField(fieldName, value) {
    let fnameValid = this.state.fnameValid;
    switch(fieldName) {
      case 'fname':
         fnameValid = value!=="" && /^([a-zA-Z]+)$/.test(value) && value.length >= 2; //here you can check as many condition as you want using `&&` operator.
        break;
      case 'more input name here':
       ... // More input validation
        break;
      default:
        break;
    }
  }

Ref

修改表单元素所需

4 个答案: