React表单验证

在写表单验证时，经过不断完善使得表单失去焦点时会提示错误信息。

为防止用户的恶搞，即提示错误信息时依然点击注册按钮，此时弹出弹框提示“请完善用户信息”。 

下面为表单验证1.0版本，2.0版本没有展示出来。 

//输入框文字判断
      validatorInput = (data) =>{
         // 使用方法判断是否为空
       let errors = {};

         if(data.username.length<2||data.username.length>8){
                 errors.username='用户名长度为2~8位'
         }
        if(data.username.length<2){
                     errors.username = '用户名长度小于2';
                }else if(data.username.length>8){
                     errors.username='用户名长度大于8'
         }
    
        if(!validator.isEmail(data.email)){
             errors.email = '邮箱格式不正确';
        }
    
        if(validator.isEmpty(data.password)){
             errors.password = '密码不能为空';
         }
    
        if(!validator.equals(data.password,data.passwordConfirmation)){
             errors.passwordConfirmation = '两次密码不相同';
         }
    
         return{ 
            
            isValid:!isEmpty(errors),
             errors
         }
           
        
    // }

//提交事件
   //提交事件
    onSubmit=(e)=>{
        
         e.preventDefault();
        // console.log(this.state.username)
        //  console.log(this.state.username.length)
       
        // var result = this.validatorInput(this.state)
        // this.setState({
        //     errors:result.errors
        // })
        // console.log(this.state)
        当点击注册事件，有一个input不符合要求时会弹出弹框
        if(this.state.errorsUsername||
            this.state.errorsEmail
            ||this.state.errorsPassword
            ||this.state.errorsPasswordConfirmation){
            alert('请完善用户信息')
        }
        
    }