1
votes

comment vérifier si la chaîne contient un nombre avec react

Je suis en train de créer un site Web de validation utilisateur, je veux que chaque entrée vérifie si la chaîne qui a été entrée:

Avoir une première lettre majuscule
ne contient pas de chiffres
ne contient pas "$% ^ & * ()"

J'ai fait la première tâche, mais je ne peux pas faire la dernière.

J'ai essayé ! isNaN (firstName) === true et ça ne marchera pas

import React, { Component } from 'react';

class Profile extends Component {
  state = {
    details: {
      firstName: '',
      lastName: '',
      ID: '',
      Email: ''
    },
    error: false,
    complete: false
  };

  OnSubmit = e => {
    e.preventDefault();
    const { firstName } = this.state.details;
    if (
      firstName.charAt(0) !== firstName.charAt(0).toUpperCase() &&
      !isNaN(firstName) === true
    ) {
      this.setState({ error: true });
    } else {
      this.setState({ complete: true });
    }
  };

  OnChange = e => {
    e.preventDefault();
    this.setState({
      details: { ...this.state.details, [e.target.name]: e.target.value }
    });
  };

  render() {
    return (
      <div>
        <div className="container text-center mt-4" style={{ width: '500px' }}>
          <form className="px-4 py-3" onSubmit={this.OnSubmit}>
            <div className="form-group">
              {this.state.error === true ? (
                <p className="text-danger">
                  Some of the details are wrong check the fields above
                </p>
              ) : null}
              <label>First Name:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="firstName"
              />
            </div>
            <div className="form-group">
              <label>Last Name:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="lastName"
              />
            </div>
            <div className="form-group">
              <label>ID Number:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="ID"
              />
            </div>
            <div className="form-group">
              <label>Email:</label>
              <input
                type="text"
                className="form-control"
                onChange={this.OnChange}
                name="Email"
              />
            </div>
            <button type="submit" className="btn btn-secondary mt-3">
              Check
            </button>
          </form>
        </div>
      </div>
    );
  }
}

export default Profile;

reactjs

2 commentaires

il est maintenant lié à la réaction que vous devez gérer avec js

la solution à votre réponse est REGEX - geeksforgeeks.org/write-regular-expressions

6 Réponses :

3
votes

Vous pouvez utiliser regex.

!firstName.match(/\d/)

\ d vérifie les nombres

0 commentaires

1
votes

Commencez par fractionner firstName , puis vérifiez le nombre dans ce tableau

OnSubmit = e => {
    e.preventDefault();
    const { firstName } = this.state.details;
    let firstNameArr = firstName.split('');

    for(value of firstName.split('')){
        if (!isNaN(value) {
          this.setState({ error: true });
        } else {
          this.setState({ complete: true });
        }       
    }
  };

0 commentaires

0
votes

Voici comment je procéderais:

const test1 = "%2mfas1k";
const test2 = '123';
const test3 = 'test';

function test(str) {
  const match = str.match(/\d+/g);
  const isArray = Array.isArray(match);
  if(isArray) return match.map(Number);
  return false
}

// If test return a result not falsy, contains a number
console.log(test(test1)); // [2, 1]
console.log(test(test2)); // [123]
console.log(test(test3)); // false

0 commentaires

0
votes

Voici un exemple de travail, j'ai divisé chaque partie dans son propre vérificateur pour le rendre plus facile à comprendre.

   let string = "Asdfsdf$32";
        let special_characters = ['$','%','^','&','*','(',')'];

        let string_array = string.split('');

        // Upper case check
        if(string[0] === string[0].toUpperCase()) {
            console.log("First letter is uppercase")
        } else {
            console.log("First letter is not uppercase")
        }

        // No numbers check
        if(string.match(/\d/)) {
            console.log("Digit Found")
        } else {
            console.log("No Digit Found")
        }

        // Special Characters
        if(string_array.find(item => special_characters.includes(item))) {
            console.log("Special Character Found")
        } else {
            console.log("No Special Character Found")
        }

0 commentaires

4
votes

function validateName(name) {
  var isValidName = true;
  if(/[!@#$%^&*(),.?":{}|<>]/g.test(name) || !/^[A-Z]/.test(name) || /\d+/g.test(name)) {
    isValidName = false;
  }
  return isValidName;
}

validateName("David")

0 commentaires

0
votes

export function checkDigit(username){

    if(username.match(/\d/)) {
        console.log("Digit Found")
        return true;
    }else {
        return false;
    }
}


       let username = this.state.name;

        if(checkDigit(username)){
            showInfoAlert(NAME_VALIDATION_DIGIT)
            return
        }

0 commentaires