Comment valider les caractères spéciaux dans une zone de texte et afficher les caractères spéciaux entrés dans le message d'erreur?

Question

Il y a une zone de texte et un bouton qui valide l'entrée dans la zone de texte.
Que s'il ne doit pas valider la présence de caractères illégaux dans le formulaire.
Supposons que je suis entré dans le mot suivant "Lorem #% ipsum ^"

En cliquant sur le bouton, deux choses doivent se produire

• Si SRE des caractères spéciaux comme # $%^&, alors la forme la soumission devrait échouer.
• Un message d'erreur devrait apparaître comme « Vous avez utilisé les caractères illégaux #,% et^dans votre forme »

Quelle est la meilleure méthode?
P.S: Je voudrais une solution ne impliquant pas jquery.

Answer 1

Vous pouvez le faire:

var invalidChars = str.match(/[^\w ]/g), output = ''; 
if (invalidChars) { 
    invalidChars = invalidChars.unique(); 
    var lastInvalidChar = invalidChars.pop(); 
    output = 'You have used the illegal character' + (invalidChars.length > 0 ? 's' : '') + ' ' + 
     invalidChars.join(', ') + (invalidChars.length > 0 ? ' and ' : '') + lastInvalidChar; 
} 

Ici match et l'expression régulière /[^\w ]/g est utilisée pour obtenir tous les caractères qui ne sont ni des caractères de texte, ni un espace. Le tableau de caractères invalides est ensuite nettoyé des doublons en utilisant la méthode personnalisée unique (voir ci-dessous). Ensuite, le dernier caractère invalide est retiré du tableau pour l'ajouter si nécessaire avec un "et" à la fin de la sortie. Les caractères invalides restants (s'il y en a) sont ensuite joints avec des virgules et combinés avec le dernier caractère invalide.

Depuis JavaScript n'a pas unique méthode intégrée pour supprimer les doublons, vous pouvez utiliser cette méthode:

Array.prototype.unique = function() { 
    var index = {}; 
    for (var i=0; i<this.length; ++i) { 
     if (!index.hasOwnProperty(this[i])) { 
      index[this[i]] = this[i]; 
     } 
    } 
    var clean = []; 
    for (var prop in index) { 
     if (index.hasOwnProperty(prop)) { 
      clean.push(index[prop]); 
     } 
    } 
    return clean; 
}; 

Notez que cette mise en œuvre est le type-safe que les valeurs sont utilisées comme noms de propriétés et ont donc eu recours en chaînes. Donc ["3",3].unique() renvoie ["3"] d'où "3".toString() === (3).toString().

Answer 2

var myString = document.getElementById("myInputField").value; // gets the sentence 
var invalidChars = myString.replace(/[^#%\^]*/g, ""); //gets the chars | "#%^" in your case 
var response = ""; 

for(var i = 0; i < invalidChars.length; i+){ 
    response += (i > 0? (i == invalidChars-1 ? " and ": ", "):"") + invalidChars[i]; 
} 

if (response != "") { 
    alert("Your data contains invalid characters " + response); 
} 

Pour plus d'informations sur js regexes vérifier

http://www.regular-expressions.info/javascript.html