如何验证用户键盘输入的输入值？答案

【问题标题】：How can I validate an input's value on user keyboard entry?如何验证用户键盘输入的输入值？
【发布时间】：2019-05-13 15:56:50
【问题描述】：

如何在用户输入或更改时验证表单的输入值？我正在尝试阅读state，但它有点晚/不是实时的。

我正在考虑使用类变量/属性并对其进行变异，但我担心它会冒犯 React 的主体。

有没有合适的方法在 React 中创建像 this 这样的实时表单验证？

【问题讨论】：

标签： reactjs forms validation real-time onchange

【解决方案1】：

验证的使用如此广泛，以至于我们可以通过 react 找到许多很好的方法来做到这一点。我喜欢使用以下内容：

您可以为每个输入创建一个更复杂的对象，而不是只保存状态输入的值。让我们开始定义一个包含 2 个输入的表单：name 和 age。第一步将描述状态中的表单。类似的东西：

state = {
    form:{
        name:{
            value : '',
            valid : true,
            rules:{
                minLength : 3
            }
        },
        age:{
            value : '',
            valid : true,
            rules:{
                isNumber : true
            }
        }
    }
}

我们有它！我们现在有 2 个在初始渲染时有效的输入，并且有自己的验证规则（isNumber，minLength）。现在我们需要编写一个动态验证状态的函数。那我们就写吧：

onChangeHandler = (key, value) =>{
    this.setState(state =>({
        ...state,
        form:{
            ...state.form,
            [key]:{
                ...state.form[key],
                value,
                valid : validate(value, state.form[key].rules)
            }
        }
    }))
}

现在我们有一个在 state 中描述的表单和一个更新状态 onChange 并在每次调用时验证输入值的处理程序。现在唯一要做的就是编写您的 validate() 函数，然后您就可以开始了。

validate = (value, rules) => {
let valid = true

for (let key in rules) {
    switch (key) {

        case 'minLength':
            valid = valid && minLengthValidator(value, rules[key])
            break

        case 'isNumber':
            valid = valid && isNumberValidator(value)
            break

        default: break
    }
}

    return valid
}

现在是验证器...

minLengthValidator = (value, rule) => (value.length >= rule)
isNumberValidator = value => !isNaN(parseFloat(value)) && isFinite(value)

完成！现在像这样调用你的输入：

render(){
    const { form } = this.state
    return(
        <TextField value={form.name.value} onChange={e => this.onChangeHandler('name',e.target.value)} />
    )
}

每次输入更改都会触发验证功能，现在您可以进行实时表单验证，取决于您根据valid 属性应用各自的样式。

【讨论】：

【解决方案2】：

我们必须定义一个 validateProperty(input) 并在我们的 onChange 方法中使用它。这是一个如何实现它的基本示例。首先定义您的状态。假设我有一个包含用户名和密码输入的表单。

state = { account: { username: "", password: "" }, errors: {} };

validateProperty = (input) => {
    if (input.name === "username") {
      if (input.value.trim() === "") return "username is required";
    }
    if ((input.name = "password")) {
      if (input.value.trim() === "") return "password is required";
    }
  };

现在我们必须在 handleChange 上使用它

e.currentTarget 返回输入字段，我将其命名为输入并进行对象解构

handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors }; 
    const errorMessage = this.validateProperty(input);
    if (errorMessage) errors[input.name] = errorMessage;
    else delete errors[input.name];
    const account = { ...this.state.account };
    account[input.name] = input.value; //currentTarget returns input field
    this.setState(() => ({ account, errors }));
  };

我为每个输入字段添加了“名称”属性。所以 errors[input.name] 将是 errors[e.currentTarget.name] if name="username" 用户名字段，如果 name="password" 密码字段。

【讨论】：