Question

我刚刚开始我的冒险之旅。
我只想进行数字验证。我找到了很多解决方案，但是没有用。从这里我得到了解决方案Only numbers. Input number in React
我不知道这是怎么回事

这是我找到的带有附加解决方案的代码。

import React, { Component } from 'react';
import validator from 'validator';

export default class GetApp extends Component {
    state = {
        // creditId: '',
        err: false,
        name: '',
        firstName: '',
        lastName: '',
        pesel: '',
        productName: '',
        value: ''
    }
    constructor(props) {
        super(props);
        this.state = {
            creditId: ''
        }
    }
    onChange = (e) => {
        //this.setState({ creditId: e.target.value });
    }
    handleChange(evt) {
        const creditId = (evt.target.validity.valid) ? evt.target.value : this.state.creditId;
        this.setState({ creditId });
    }

    handleSubmit = event => {
        event.preventDefault();

        fetch(`http://localhost:8200/credit/getCredit/${this.state.creditId}`)
            .then(res => {
                if (res.ok) {
                    return res
                }
            }).then(res => res.json())
            .then(data => {
                this.setState({
                    err: false,
                    name: data.credit.name,
                    firstName: data.customer.firstName,
                    lastName: data.customer.lastName,
                    pesel: data.customer.pesel,
                    productName: data.product.productName,
                    value: data.product.value
                })
            })
            .catch(err => {
                console.log(err);
                this.setState({
                    err: true
                })
            })
    }
    render() {
        let content = null;
        if (!this.state.err && this.state.creditId) {
            content = (
                <div>
                    <p>Name: {this.state.name}</p>
                    <p>First Name: {this.state.firstName}</p>
                    <p>Last Name: {this.state.lastName}</p>
                    <p>PESEL: {this.state.pesel}</p>
                    <p>Product Name: {this.state.productName}</p>
                    <p>Value: {this.state.value}</p>
                </div>
            )
        }
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="container">
                    <h2>Get Credit</h2>
                    <label>Credit Number:</label>
                    <input type='text' name="creditId" value={this.state.creditId} pattern="[0-9]*" onInput={this.handleChange.bind(this)} />
                    <div>
                        <button type="submit">Submit</button>
                        <p>{this.state.err ? `Dont search: ${this.state.creditId}` : content}</p>
                        <div>
                        </div>
                    </div>
                </div>
            </form>

        )
    }
}

感谢帮助

Answer 1

您还可以将输入类型更改为number https://www.w3schools.com/tags/att_input_type_number.asp。除了数字（0-9）字符外，这将不允许用户设置其他任何内容，而且更加严格。

JS验证输入

1 个答案: