Javascript 表单验证react js node js存在问题

所以我刚刚用node js和react js准备好一个表单，当我试着用Postman添加一个用户时，它与验证和其他一切都很好地工作，但后来我尝试将它链接到我的字体端，但它没有工作，问题是如果我输入真实的数据，它将被添加到我的数据库中，并移动到下一页，当我输入错误的数据时，它不会被添加到我的后端，但它仍然会移动到下一页

node js userModel.js 
const mongoose = require('mongoose')
const bcrypt = require('bcrypt')
const saltRounds = (10)
const schema = mongoose.Schema



const userSchema = new mongoose.Schema({
    nom: {
        type: String,
        required: true
    },
    prenom: {
        type: String,
        required: true,
        trim: true // read the spaces
    },
    email: {
        type: String,
        required: true,
        validate: {
            validator: function ValidateEmail(v) {
                if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v)) //w{2,3} lazemha tkoun fila5er .org .com .tn ya3ni . w ba3édha 7aja tetkawén par 2 ou 3 caractéres
                {
                    return (true)
                }
                console.log("You have entered an invalid email address!")
                return (false)
            }
        }
    },
    password: {
        type: String,
        required: true,
        validate: {
            validator: function password1(number){
          var phoneno =/^[A-Za-z]\w{7,14}$/;
          if(phoneno.test(number)){
              return true
            } else {
                console.log("invalid password");
                return false}
            }
        }
    },
    phone: {
        type: String,
        required: true
        /*validate: {
            validator: function phonenumber(number) {
                var phoneno = /^\d{10}$/; //il faut utiliser un nombre a 10 chiffres sans virgule,ni espace
                if (phoneno.test(number)) {
                    return true
                } else {
                    console.log("invalid number");
                    return false
                }
            }
        }*/
    }
    //order: [{
    //type: schema.Types.ObjectId,
    //ref: 'order'
    //}],
    //photo: {
        //type: String
    //}
});

userSchema.pre('save', function(next) {
    this.password = bcrypt.hashSync(this.password, saltRounds);
    next();
})

module.exports = mongoose.model('user', userSchema)

react js gate.js

import axios from 'axios';
import React, { Component } from 'react'



class Gate extends Component {
    constructor(){
        super()
        this.state={
            name:'',
            lastname:'',
            email:'',
            phone:'',
            password:''
        }  
    }
    validate = ()=>{
        var isError = false;
        const errors = {
            emailErr:'',
            passwordErr:'',
        }
        const regex2=/^[A-Za-z]\w{7,14}$/;
        const regex1=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if((this.state.password === '')||(this.state.password.length>10)||!regex2.test(this.state.password)){
            isError = true;
            errors.passwordErr = 'verifier votre password'
        }
        if((this.state.email === '')||(this.state.email.length>5)||!regex1.test(this.state.email)){
            isError= true;
            errors.emailErr = 'verifier votre email'
        }
        if(isError){
            this.setState({
                ...this.state,
                ...errors
            })
        }

    }
    envoyer(){
    
        let err = this.validate()
        if(!err){
            axios.post("http://localhost:3050/users/addUser",{
                nom:this.state.name,
                prenom:this.state.lastname,
                email:this.state.email,
                password:this.state.password,
                phone:this.state.phone
            })
            .then(res=>{
                console.log('data',res.data)
                window.location.href='/app/dashboard'
            })
        }
        
    }


    render() {
        console.log(this.state.name)
        console.log(this.state.email)
        console.log(this.state.password)

        return ( 
        <div>
            <form action="">
            <label for="fname">First name:</label><br/>
            <input type="text" id="fname" name="fname" onChange={event=>this.setState({name:event.target.value})} /><br/>
            <label for="lname">Last name:</label><br/>
            <input type="text" id="lname" name="lname" onChange={event=>this.setState({lastname:event.target.value})} /><br/>
            <label for="Email">Email:</label><br/>
            <input type="email" id="email" name="email" onChange={event=>this.setState({email:event.target.value})} />
            {<div style={{fontSize:12,color:'red'}}>{this.state.emailErr}</div>}
            <label for="phone">phone:</label><br/>
            <input type="text" id="phone" name="lname" onChange={event=>this.setState({phone:event.target.value})} /><br/>
            <label for="password">password:</label><br/>
            <input type="password" id="password" name="lname" onChange={event=>this.setState({password:event.target.value})} />
            {<div style={{fontSize:12,color:'red'}}>{this.state.passwordErr}</div>}
            <br/>
            
            <input type="submit" value="Sign In" onClick={()=>{this.envoyer()}} />
            </form>
        </div>
        );
    }
}


export default Gate
           

从“axios”导入axios；
从“React”导入React，{Component}
类门扩展组件{
构造函数（）{
超级（）
这个州={
名称：“”，
姓氏：“”，
电子邮件：“”，
电话：''，
密码：“”
}  
}
验证=（）=>{
var-isError=false；
常量错误={
电子邮件错误：“”，
密码错误：“”，
}
常量regex2=/^[A-Za-z]\w{7,14}$/；
常量regex1=/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+）*（\.\w{2,3}）+$/；
if（（this.state.password==''）| |（this.state.password.length>10）| |！regex2.test（this.state.password））{
isError=真；
errors.passwordErr='verifier votre password'
}
if（（this.state.email==''）||（this.state.email.length>5）||！regex1.test（this.state.email））{
isError=真；
errors.emailErr='verifier votre email'
}
如果（isError）{
这是我的国家({
…这个州，
…错误
})
}
}
特使（）{
让err=this.validate（）
如果（！err）{
axios.post（“http://localhost:3050/users/addUser",{
nom:this.state.name，
prenom:this.state.lastname，
电子邮件：this.state.email，
密码：this.state.password，
电话：这个。州。电话
})
。然后（res=>{
console.log（'data'，res.data）
window.location.href='/app/dashboard'
})
}
}
render（）{
console.log（this.state.name）
console.log（this.state.email）
console.log（this.state.password）
报税表（
名字：

this.setState（{name:event.target.value}）}/>

姓氏：

this.setState（{lastname:event.target.value}）}/>

电子邮件：

this.setState（{email:event.target.value}）}/>
{{this.state.emailErr}}
电话：

this.setState（{phone:event.target.value}）}/>

密码：

this.setState（{password:event.target.value}）}/>
{{this.state.passwordErr}}


{this.envoyer（）}}/>
);
}
}
导出默认门

---

请帮帮我

从验证方法返回错误

这里的工作示例=>

import React，{Component}来自“React”；
类门扩展组件{
构造函数（）{
超级（）；
此.state={
姓名：“，
姓氏：“，
电邮：“，
电话：“，
密码：“”，
电子邮件错误：“”，
密码错误：“
};
}
验证=（）=>{
常量错误={
emailErr:null，
密码错误：null
};
常量regex2=/^[A-Za-z]\w{7,14}$/；
常量regex1=/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+）*（\.\w{2,3}）+$/；
如果（this.state.password.length>10）{
errors.passwordErr=“verifier votre password”；
}
if（！regex1.test（this.state.email））{
errors.emailErr=“verifier votre email”；
}
返回错误；
};
特使=e=>{
e、 预防默认值（）；
const errors=this.validate（）；
if（errors.emailErr | | errors.passwordErr）{
this.setState（{…errors}）；
}否则{
log（“要发送的数据”，this.state）；
}
//如果（！err）{
//axios
//.post（“http://localhost:3050/users/addUser", {
//nom:this.state.name，
//prenom:this.state.lastname，
//电子邮件：this.state.email，
//密码：this.state.password，
//电话：这个。州。电话
//     })
//。然后（res=>{
//console.log（“数据”，res.data）；
//window.location.href=“/app/dashboard”；
//     });
// }
};
render（）{
返回(
名字：


this.setState（{name:event.target.value}）
/>


姓氏：


this.setState（{lastname:event.target.value}）
/>


电邮：


this.setState（{email:event.target.value，emailErr:null}）
}
/>
{
{this.state.emailErr}
}
电话：


this.setState（{phone:event.target.value}）
/>


密码：


this.setState（{password:event.target.value，passwordErr:null}）
}
/>
{
{this.state.passwordErr}
}


);
}
}
导出默认门；

我认为这几乎就是问题所在。你好，我试过了，但没有成功。。表单停止提交假数据和真数据如果我输入错误的数据，表单将不会提交，并且不会向数据库添加任何内容，但是如果输入真数据，数据将添加到数据库中，但它将保持在同一页面如果我输入错误的数据，表单将不会提交，并且不会向数据库添加任何内容。这就是你想要的，对吗？如果输入true validated，数据将被添加到数据库中，但它将保持在同一页面上。在这种情况下,，

import React, { Component } from "react";

class Gate extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      lastname: "",
      email: "",
      phone: "",
      password: "",
      emailErr: "",
      passwordErr: ""
    };
  }

  validate = () => {
    const errors = {
      emailErr: null,
      passwordErr: null
    };

    const regex2 = /^[A-Za-z]\w{7,14}$/;
    const regex1 = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

    if (this.state.password.length > 10) {
      errors.passwordErr = "verifier votre password";
    }

    if (!regex1.test(this.state.email)) {
      errors.emailErr = "verifier votre email";
    }

    return errors;
  };

  envoyer = e => {
    e.preventDefault();

    const errors = this.validate();

    if (errors.emailErr || errors.passwordErr) {
      this.setState({ ...errors });
    } else {
      console.log("data to be send", this.state);
    }
    // if (!err) {
    //   axios
    //     .post("http://localhost:3050/users/addUser", {
    //       nom: this.state.name,
    //       prenom: this.state.lastname,
    //       email: this.state.email,
    //       password: this.state.password,
    //       phone: this.state.phone
    //     })
    //     .then(res => {
    //       console.log("data", res.data);
    //       window.location.href = "/app/dashboard";
    //     });
    // }
  };

  render() {
    return (
      <div>
        <form>
          <label for="fname">First name:</label>
          <br />
          <input
            type="text"
            id="fname"
            name="fname"
            onChange={event => this.setState({ name: event.target.value })}
          />
          <br />
          <label for="lname">Last name:</label>
          <br />
          <input
            type="text"
            id="lname"
            name="lname"
            onChange={event => this.setState({ lastname: event.target.value })}
          />
          <br />
          <label for="Email">Email:</label>
          <br />
          <input
            type="email"
            id="email"
            name="email"
            onChange={event =>
              this.setState({ email: event.target.value, emailErr: null })
            }
          />
          {
            <div style={{ fontSize: 12, color: "red" }}>
              {this.state.emailErr}
            </div>
          }
          <label for="phone">phone:</label>
          <br />
          <input
            type="text"
            id="phone"
            name="lname"
            onChange={event => this.setState({ phone: event.target.value })}
          />
          <br />
          <label for="password">password:</label>
          <br />
          <input
            type="password"
            id="password"
            name="lname"
            onChange={event =>
              this.setState({ password: event.target.value, passwordErr: null })
            }
          />
          {
            <div style={{ fontSize: 12, color: "red" }}>
              {this.state.passwordErr}
            </div>
          }
          <br />

          <input type="submit" value="Sign In" onClick={this.envoyer} />
        </form>
      </div>
    );
  }
}

export default Gate;