时间戳

首页 > 解决方案 > 无法使用 Bootstrap 验证 React 中的数字

reactjs - 无法使用 Bootstrap 验证 React 中的数字

问题描述

我正在尝试验证使用 React 呈现的 HTML 输入字段是否只接受数字。我目前尝试这样做。

为了验证输入字段只接受数字，必须做什么？

phone: {
    elementLabel: 'Phone Number',
    elementType: 'input',
    elementConfig: {
        type: "number",
        placeholder: 'Phone Number',
        name: "phone",
        id: "phone",
        min: "0",
        pattern: "[0-9]*",
    },
    value: '',
    form_value: "",
    validation: {},
    valid: false,
    touched: false,
    className: "form-control",
    changed: (event) => this.inputChangedHandler(event,
    "phone"),
    blured: (event) => this.inputBlurHandler(event,
    "phone")
},

render(){
<div>
<Input {...this.state.name}/>
</div>
}

inputChangedHandler = (event, inputIdentifier) => {
        const updatedForm = {
            ...this.state
        };
        const updatedFormElement = {
            ...this.state[inputIdentifier]
        };
        Utils.updateElementValue(updatedFormElement, event, inputIdentifier);
        updatedFormElement.touched = true;
        updatedForm[inputIdentifier] = updatedFormElement;

        let formIsValid = true;
        for (let inputIdentifier in updatedForm) {
            if (updatedForm[inputIdentifier].elementType) {
                formIsValid = updatedForm[inputIdentifier].valid && formIsValid;
            }
        }
        this.setState({ [inputIdentifier]: updatedFormElement, formIsValid: formIsValid });
    }

这也是我的更改处理程序，看起来在从控件获取输入时未验证 Number。在使用它时，我想要只输入数字，甚至不输入任何特殊字符的验证。

编辑1：

我使用以下版本：

标签： reactjsbootstrap-4

解决方案

我认为您使用的模式是错误的。它应该^[0-9]*$接受任意数量的数字，包括不接受任何数字。

推荐阅读