React表单验证

最新推荐文章于 2025-07-03 20:52:37 发布

像费曼%

最新推荐文章于 2025-07-03 20:52:37 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_53052268/article/details/125969621

React 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在React.js中进行表单验证的方法，当表单失去焦点时能即时显示错误信息。为了防止用户在看到错误后仍尝试提交，实现了在点击注册按钮时弹出提示‘请完善用户信息’的弹框。文章主要展示了表单验证的1.0版本实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

下面为表单验证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('请完善用户信息')
        }
        
    }