初学react.js实现简单的输入框动态验证

class PhoneNum extends React.Component {

        constructor(props) {

            super(props);

            this.state = {

                value: '',

                tip: '请输入正确的手机号码！'

            };

            this.handleChange = this.handleChange.bind(this);

            this.handleSubmit = this.handleSubmit.bind(this);

        }

        handleChange(event) {

            this.setState({ value: event.target.value });

            console.log('提交的电话号码: ' + this.state.value);

            var regex = /^((\+)?86|((\+)?86)?)0?1[3458]\d{9}$/;

            if (event.target.value) {

                if (regex.test(event.target.value)) {

                    this.setState({ tip: '手机号码输入正确' });

                    // callback('账号输入正确');

                } else {

                    this.setState({ tip: '请输入正确的手机号码！' });

                    // callback('请输入正确的手机号码！');

                }

            }
            event.preventDefault();

        }
        handleSubmit(event) {

        }



        render() {

            return (

                <form onSubmit={this.handleSubmit}>

                    <label>

                        电话号码:

                        <input type="number" value={this.state.value} onChange={this.handleChange} />

                    </label>

                    <div>{this.state.tip}</div>

                </form>

            );

        }

    }

    ReactDOM.render(

        <PhoneNum/>,

        document.querySelector("#app")

    );

实现效果:

手机号码输入错误:

 

手机号码输入正确: