reactjs React -将电子邮件验证添加到空输入验证

zpf6vheq 于 2023-06-22 发布在 React

关注(0)|答案(3)|浏览(106)

在React中，我希望将电子邮件验证（检查@和.com）添加到当前检查空输入字段的表单中。
我found this，它完成了这项工作，但不知道如何将它连接到onSubmit沿着我的其他验证。
下面是link to this project's codepen的完整代码。
设置输入和错误的初始状态：

constructor() {
super();
this.state = {
  inputs: {
    name: '',
    email: '',
    message: '',
  },
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

}
JS处理输入，onBlur

updateInput = e => {
this.setState({
  inputs: {
    ...this.state.inputs,
    [e.target.name]: e.target.value,
  },

  errors: {
    ...this.state.errors,
    [e.target.name]: false,
  },
});
};

handleOnBlur = e => {
const { inputs } = this.state;
if (inputs[e.target.name].length === 0) {
  this.setState({
    errors: {
      ...this.state.errors,
      [e.target.name]: true,
    },
  });
}
};

reactjs

来源：https://stackoverflow.com/questions/56676342/react-adding-email-validation-to-empty-input-validation

3条答案

按热度按时间

z4bn682m1#

在不重构太多代码的情况下，我们可以将updateInput()函数更新为：

updateInput = event => {
    const { name, value } = event.target;

    if (name === "email") {
      this.setState({
        inputs: {
          ...this.state.inputs,
          [name]: value
        },
        errors: {
          ...this.state.errors,
          email:
            value.includes("@") &&
            value.slice(-4).includes(".com")
              ? false
              : true
        }
      });
    } else {
      this.setState({
        inputs: {
          ...this.state.inputs,
          [name]: value
        },
        errors: {
          ...this.state.errors,
          [name]: false
        }
      });
    }
  };

另见沙盒：https://codesandbox.io/s/conditional-display-input-errors-vfmh5

赞(0）回复(0）举报 2023-06-22

olhwl3o22#

一种可能的方法是向代码中添加条件，如下所示

if((e.target.name === "email") && !this.validateEmail(inputs[e.target.name]) && (inputs[e.target.name].length !== 0 )   ){
     this.setState({
        errors: {
          ...this.state.errors,
          [e.target.name]: true,
        },
      }); 
    }        
 so after generally you will have something like this that add the validate function

validateEmail (email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return re.test(email)
  } 

then your  unblur function will look like this

handleOnBlur = e => {
    const { inputs } = this.state;

     if (inputs[e.target.name].length === 0) {
       this.setState({
        errors: {
          ...this.state.errors,
          [e.target.name]: true,
        },
       });
      }
     if((e.target.name === "email") && !this.validateEmail(inputs[e.target.name]) && (inputs[e.target.name].length !== 0 )   ){
      this.setState({
        errors: {
          ...this.state.errors,
          [e.target.name]: true,
        },
      }); 
    }

  };

赞(0）回复(0）举报 2023-06-22

vsaztqbk3#

如果使用React，只需修改输入Tag，并在Tag的末尾添加required关键字。

<input
     className='p-3 flex w-full rounded-md text-black'
     type='email'
     name='Email'
     placeholder='Enter Email'
        required/>

它还应该在form标记和type='submit' v的button内

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs React -将电子邮件验证添加到空输入验证

3条答案

相关问题

热门标签

最新问答