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")
? ? );实现效果:
手机号码输入错误:
?
手机号码输入正确:
?