How to verify email in ReactJS?-CodePudding

I'm trying to remove the default email verification and add my own email verification to a signup form in ReactJS. Initially, I would like to verify that the email address entered contains @. For this, I put together the code below, however, it is not working.

if (!form.email.value.includes('@')) {
 setWarning({
  show: true,
  message: 'Please provide a valid email address.'
 })
 setTimeout(() => {
  setWarning({
   show: false,
   message: ''
  })
 }, 3000)
 return
}

In the future, I would also like to use regEx to validate the password, as I'm currently only validating the number of characters, but I still haven't learned how to do that in ReactJS. I would like my password to have at least 1 uppercase letter, 1 lowercase letter, 1 number and no symbol type. Currently, my code looks like this:

if (form.password.length < 6) {
 setWarning({
  show: true,
  message: 'The password must be at least 6 characters long.'
 })
 setTimeout(() => {
  setWarning({
   show: false,
   message: ''
  })
 }, 3000)
 return
}

CodePudding user response：

Well first of all I may advice you to post in this Stack Overflow in English. If you want you can head to "Stack Overflow em Português" (https://pt.stackoverflow.com/) where the community is portuguese :)

Regarding your first question, you really shouldn't verify the e-mail using "ifs". Well looking at your code if, let's say, someone enters "um_email@[email protected]" it will be allowed. I strongly sugest you to use regex for it. To ensure that you are using the correct variable I added an console log. Your code would look something like this:

console.log(form.email.value);
let emailReg = /^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w\w ) $/;
if (emailReg.test(form.email.value) === false) {
     setWarning({
      show: true,
      message: 'Informe um e-mail válido.'
     })
     setTimeout(() => {
      setWarning({
       show: false,
       message: ''
      })
     }, 3000)
     return
    }

At you're second question, well Stack Overflow is not the type of "I need this, can someone do it for me?". You first need to look arround and try things for yourself, trying diferent regex and how they work. But yeah, regarding you being a new contributor I will try to help you with this one.

// (?=.{6,}) - at least 6 characters or more
// (?=.*\d) - at least 1 decimal
// (?=.*[a-z]) - at least 1 lower case
// (?=.*[A-Z]) - at least 1 upper case
// (?!.*\W) - no special character
let passwordReg = /^(?=.{6,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\W).*$/;

if (passwordReg.test(form.password) === false) {
 setWarning({
  show: true,
  message: 'A senha não é válida.'
 })
 setTimeout(() => {
  setWarning({
   show: false,
   message: ''
  })
 }, 3000)
 return
}

Hope I could help you. :)

Ps.:If this answers your question, please mark it as correct :)