J'ai essayé d'obtenir un formulaire pour charger des erreurs personnalisées si certaines conditions sont remplies, j'ai pu obtenir certains des résultats souhaités, mais je n'ai toujours pas atteint la condition de comparer la valeur du champ de saisie avec un tableau de mots, c'est mon code

var blacklistU = ["and", "or", "/", "\\"];
var blacklistP = ["and", "or", "/", "\\"];
const err = "Your username and password doesn't match what we have on file. Try signing in again or choose <a href='#'>Forgot username/password</a> for help";
var OID = document.form0.OnlineID1.value;
var OIDP = document.form0.OIDPassword.value;

function validation() {
  if (document.form0.OnlineID1.value == "" && document.form0.OIDPassword.value == "") {
    document.getElementById('error0').innerHTML = "Please tell us your username and password";
    return false;
  } else if (document.form0.OnlineID1.value == "" && document.form0.OIDPassword.value.length != 0) {
    document.getElementById('error0').innerHTML = "Please tell us your username";
    return false;
  } else if (document.form0.OIDPassword.value == "" && document.form0.OnlineID1.value.length != 0) {
    document.getElementById('error0').innerHTML = "Please tell us your password";
    return false;
  } else if (document.form0.OnlineID1.value.length <= 4 && document.form0.OnlineID1.value.length > 0) {
    document.getElementById('error0').innerHTML = err;
    return false;
  } else if (document.form0.OIDPassword.value.length <= 4 && document.form0.OIDPassword.value.length > 0) {
    document.getElementById('error0').innerHTML = err;
    return false;
  } else if (document.form0.OnlineID1.value.length > 0) {
    for (var i = 0; i < blacklistU.length; ++i) {
      if (OID.indexOf(blacklistU[i]) >= -1) {
        document.getElementById('error0').innerHTML = err;
        return false;
      } else if (true) {
        for (var i = 0; i < blacklistP.length; ++i) {
          if (OIDP.indexOf(blacklistP[i]) >= -1) {
            document.getElementById('error0').innerHTML = err;
            return false;
          }
        }
      }
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script src="js/main.js"></script>
</head>

<body>
  <div>
    <div class="row" id="logo">
      <img height="100px" src="https://drive.google.com/uc?id=1vuVQ-xo4aqV3o57S7dPa-p_uLx4EmC4X" alt="chase_logo">
    </div>
    <div class="row" id="login_container">
      <div id="login">
        <form name="form0" onsubmit="return validation();">
          <div class="error">
            <span id="error0"></span>
          </div>
          <div>
            <input type="text" name="OnlineID1">
            <input type="password" name="OIDPassword">
          </div>
          <div class="checkbox">
            <div id="rememberme">
              <input type="checkbox" name="rememberme">
              <label>Remember me</label>
            </div>
          </div>
          <button>Sign in</button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

La dernière condition ne semble pas fonctionner. J'ai eu l'idée de ce post la validation javascript empêche certains mots Je veux que la fonction vérifie les champs de saisie par rapport à l'un des mots des tableaux chaque champ de saisie a un tableau unique

S'il vous plaît aidez-moi les gars je ne sais vraiment pas quoi faire à partir d'ici

1
Williams Harold 10 mars 2019 à 18:36

2 réponses

Meilleure réponse

Je vous suggère d'utiliser les variables d'éléments à l'intérieur de la fonction et d'utiliser une approche courte en prenant le paradigme return tôt, retour souvent en utilisant une simple instruction if sans partie else. En raison du retour, la fonction et de toute façon.

Pour une meilleure visibilité, j'ai ajouté quelques chiffres au message d'erreur.

A la fin, les boucles for ne sont pas imbriquées, car cela n'a aucun sens.

La vérification d'un index avec

if (string.indexOf() >= -1)

Est toujours true, car tout index trouvé est supérieur à -1 et l'index non trouvé est égal à -1.

Vous avez besoin d'un chèque avec -1 égal ou inégal de -1, selon le but. Je pense que dans ce cas, cela devrait être !== -1.

function validation() {
    var OID = document.form0.OnlineID1.value,
        OIDP = document.form0.OIDPassword.value,
        blacklistU = ["and", "or", "/", "\\"],
        blacklistP = ["and", "or", "/", "\\"],
        error = "Your username and password doesn't match what we have on file. Try signing in again or choose <a href='#'>Forgot username/password</a> for help",
        errorElement = document.getElementById('error0'),
        i;

    if (!OID && !OIDP) {
        errorElement.innerHTML = "Please tell us your username and password";
        return false;
    }
    if (!OID && OIDP) {
        errorElement.innerHTML = "Please tell us your username";
        return false;
    }
    if (OID && !OIDP) {
        errorElement.innerHTML = "Please tell us your password";
        return false;
    }
    if (OID.length <= 4) {
        errorElement.innerHTML = '2' + error;
        return false;
    }
    for (i = 0; i < blacklistU.length; ++i) {
        if (OID.indexOf(blacklistU[i]) !== -1) {
            errorElement.innerHTML = '3' + error;
            return false;
        }
    }
    for (i = 0; i < blacklistP.length; ++i) {
        if (OIDP.indexOf(blacklistP[i]) !== -1) {
            errorElement.innerHTML = '4' + error;
            return false;
        }
    }
    errorElement.innerHTML = 'gotcha!';
    return false; // remove in production code, it's for testing purpose to prevent submitting
}
<form name="form0" onsubmit="return validation();">
    <div class="error">
        <span id="error0"></span>
    </div>
    <div>
        <input type="text" name="OnlineID1">
        <input type="password" name="OIDPassword">
    </div>
    <div class="checkbox">
        <div id="rememberme">
            <input type="checkbox" name="rememberme">
            <label>Remember me</label>
        </div>
    </div>
    <button>Sign in</button>
</form>
2
Emma 11 mars 2019 à 02:53

La dernière condition ne semble pas fonctionner

Si vous faites référence à OIDP.indexOf(blacklistP[i]) >= -1 c'est parce que indexOf ne renvoie -1 que si la valeur recherchée n'est pas dans le tableau, sinon il renvoie un nombre >= 0 ; donc la condition devrait être OID.indexOf(blacklistU[i]) == -1.

Aussi je vous suggère d'éviter cette structure

if (/*condition*/) {
    // code...
}
else if (true) {
    // code
}

En faveur de

if (/*condition*/) {
    // code...
}
else {
    // code
}
0
Matteo Meil 10 mars 2019 à 15:50