password check without using regex in reactjs

Question

I'm trying to validate the password without using regex but it didn't work what I'm trying to do is the password must contain at least one uppercase letter, one lowercase letter, one number, and one alphanumeric character. but without using Regex

here is my code

    import * as React from "react";
import { useForm } from "react-hook-form";

function Form() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="password"
        placeholder="password"
        name="password"
        ref={register({required:true,minLength:8, maxLength:16, upperCase:'true' , lowerCase:'true' )}
      />
      <input type="email" placeholder="email" name="Email" ref={register} />
      <br />
     
      Birthday
      <input
        type="date"
        placeholder="birthday"
        name="birthday"
        ref={register}
      />
      <br />
      <input type="submit" />
    </form>
  );
}

export default Form;

I have looked at many sites but I couldn't find any solutions!

Paul Barrié · Accepted Answer · 2021-02-11 22:37:54Z

1

Yes, you can simply loop over your string and compare each character (which are numbers represented in the ASCII table). Then you can simply check the counts according to the constraints you want to set.

const password="MyPA55w()rd";

let upper_count = 0;
let lower_count = 0;
let number_count = 0;
let symbol_count = 0
for(let i = 0; i < password.length; i++) {
  let c = password.charAt(i);

  if( 'A' <= c && c <= 'Z') {
    upper_count +=1;
  }else if( 'a' <= c && c <= 'z') {
    lower_count +=1;
  }else if( '0' <= c && c <= '9') {
    number_count +=1;
  } else {
    symbol_count += 1;
  }
}

console.log(`Number of capital letter: ${upper_count}`);
console.log(`Number of lower letter: ${lower_count}`);
console.log(`Number of numbers: ${number_count}`);
console.log(`Number of symbols: ${symbol_count}`);

PS: there are also interseting tools like Formik and Yup that allows to you to check return fields in forms.

edited Feb 11, 2021 at 22:37

answered Feb 11, 2021 at 14:00

Paul Barrié

3504 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aman Over a year ago

Thanks a lot how can i prevent the user from using his birth year in the password?

Paul Barrié Over a year ago

Check if password.Includes(year)

score 0 · Accepted Answer · 2021-02-11 14:03:16Z

0

this one kind of solution is for js vanilla, not for react spezified: if you don't want to use regex (regex is really nice, you should learn regex) you can create a character map for each charset that you want to check. then iterate through your password and see if the current character is in one of these character maps. additional you can create theese character maps automatically using ascii tables/codes

edited Feb 11, 2021 at 14:03

answered Feb 11, 2021 at 13:48

user8086037

2 Comments

aman Over a year ago

thank you, but it is required to not use regex! can you please share an example of your solution?

user8086037 Over a year ago

no sorry, you will learn it better, when you do it by yourself

Collectives™ on Stack Overflow

password check without using regex in reactjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related