react实现手机号码验证

Regular.jsx 

import React from "react";
class Regular extends React.Component{
    constructor(){
        super();
        this.state={
            tel:'',
            info:'',
            flag: false
        }
    }
    number=(e)=>{
        const {name, value} = e.target;
        var {info} = this.state;
        var phoneReg = /1(3|8)[0-9]{9}$/;
        // 当输入的值少于11位
        if (value.length < 11) {
            info = "正在输入...";
        } else {
            if (phoneReg.test(value)) {
                info = "格式正确";
            } else {
                info = "格式不正确,请输入重新输入";
            }
        }
        this.setState({
            // ES6计算属性名称
            [name]:value,
            info,
            // test用来判断字符串是否符合正则表达式规则，符合规则flag则返回true，不符合返回false
            flag: phoneReg.test(value),
        })
    }
    sumbit(e) {
        const {flag} = this.state
        if (flag) {
            alert('验证成功')
        } else {
            // 当验证失败就可以不用提交 preventDefault阻止默认提交
            e.preventDefault();
            alert('验证失败')
        }
    }
    render() {
        const { tel,info} = this.state
        return (
            <form>
            <h2>react手机号码验证</h2>
                <label>手机号码(+86):</label><br/>
                <input type="text" name="tel" value={tel} onChange={(e) => this.number(e)} />
                <input type="text" name="info" className="css-input-info" value={info} readOnly/><br/><br/>
                <input type="submit" value="Submit" onClick={(e) => this.sumbit(e)}/>
            </form>
        )
    }
}
export default Regular