Comment utiliser JavaScript et les expressions régulières pour la validation des données

La validation des données est une étape importante pour que les applications Web acceptent les données des clients. Après tout, vous devez vous assurer que les données client sont conformes au format attendu avant de les utiliser. Dans les applications Web, vous pouvez choisir d'utiliser des outils spécifiques à la plate-forme tels que ASP.NET, JSP, etc., ou vous pouvez profiter du JavaScript côté client. Les expressions régulières en JavaScript peuvent simplifier le travail de validation des données.

Expression régulière
L'expression régulière est un outil de correspondance de modèles qui vous permet d'exprimer des modèles dans le texte, faisant des expressions régulières un outil puissant pour valider les données textuelles. En plus de la correspondance de modèles, les expressions régulières peuvent également être utilisées pour remplacer du texte. Depuis que j'ai rencontré pour la première fois des expressions régulières lors de l'utilisation de Perl sur un système UNIX, la prise en charge des expressions régulières n'a cessé de se développer.
Remarque : si vous côtoyez de nombreux autres développeurs, les expressions régulières peuvent être appelées RegEx ou RegExp. Bien que les expressions régulières soient puissantes, leur syntaxe est un peu « mystérieuse » et prend un certain temps à maîtriser. Jetons un coup d'œil à quelques connaissances de base sur l'utilisation des expressions régulières.

Syntaxe de base
L'application de la syntaxe des expressions régulières peut être très complexe, et il faudrait même un livre entier pour expliquer ce sujet, mais je vais vous expliquer certaines des connaissances de base pour vous aider à avoir une idée préliminaire compréhension des expressions régulières.
Un concept de base est l'ancre, qui permet de spécifier les points de début et de fin d'une chaîne. Le caret (^) est utilisé pour spécifier le point de départ de la chaîne et le signe dollar ($) indique le point de fin. . Si vous devez inclure un signe caret ou dollar dans la chaîne de requête, vous pouvez utiliser une séquence d'échappement () qui est prioritaire sur le signe caret ou dollar. L'exemple suivant correspondra au mot recherché chaque fois qu'il apparaît dans une chaîne.

^search$
De plus, vous pouvez également rechercher un groupe de caractères, il suffit de les mettre entre crochets, comme [ et ], les caractères correspondants doivent appartenir à ce groupe de caractères, un exemple consiste à trouver les nombres correspondants de 1 à 5 dans la plage de [12345]. Cette expression régulière peut également être écrite sous la forme [1-5].
Souvent, vous devrez peut-être spécifier un caractère qui peut apparaître plusieurs fois, ou un caractère facultatif. Le point d'interrogation (?) signifie que le caractère est facultatif et le signe plus ( ) signifie que le caractère peut apparaître une ou plusieurs fois. plus de fois, l'astérisque (*) signifie que le personnage ne peut pas apparaître ou apparaître plusieurs fois.
Voyons maintenant comment appliquer ces expressions régulières simples à JavaScript.

Prise en charge de JavaScript
JavaScript a ajouté la prise en charge des expressions régulières dans la version 1.2, la prise en charge des navigateurs à partir d'Internet Explorer 4 et Netscape 4, toutes les versions de Firefox et la plupart des navigateurs modernes Inclut la prise en charge de JavaScript. Les expressions régulières peuvent être utilisées via des chaînes JavaScript et RegExp.

Utilisation de chaînes
Chaque chaîne JavaScript peut prendre en charge les expressions régulières via trois méthodes, ces trois méthodes sont match(), replace() et search(), et le test de l'objet La méthode () permet également à vous de faire des tests. Voici des informations sur les méthodes match(), replace() et search() :
match() : utilisé pour la correspondance d'expressions régulières. Si plusieurs correspondances se produisent, un tableau contenant tous les résultats correspondants est renvoyé. une copie contenant des données correspondantes ; s'il n'y a pas de valeur correspondante, une valeur nulle est renvoyée.

replace() : utilisé pour la correspondance d'expression régulière et le remplacement de toutes les valeurs correspondantes​​par de nouvelles sous-chaînes. Le premier paramètre de cette méthode est l'expression régulière et le deuxième paramètre est utilisé pour le remplacement.

search() : utilisé pour rechercher une valeur correspondante entre une expression régulière et une chaîne spécifiée. Si une valeur correspondante se produit, la valeur d'index de la chaîne est renvoyée. S'il n'y a pas de valeur correspondante, -1. est retourné.

JavaScript fournit également l'objet RegExp pour créer et utiliser des expressions régulières.

RegExp
L'objet RegExp contient un modèle d'expression régulière. Les méthodes et propriétés de cet objet peuvent être utilisées pour faire correspondre des chaînes. Il existe deux manières de créer une instance d'un objet RegExp : en utilisant le constructeur ou. En utilisant le mode littéral du mode texte d'expression régulière, le deuxième paramètre est facultatif et peut spécifier si la recherche est globale (g), insensible à la casse (i) ou les deux insensibles à la casse (gi). L'exemple suivant utilise le constructeur pour créer un objet RegExp. Dans cet exemple, la casse de l'objet recherché est ignorée :

testRegExp = new RegExp("^search$","I")

Vous pouvez créer la même instance en utilisant la méthode littérale (en italique La partie en la barre), comme indiqué ci-dessous :

testRegExp = /^search$/i

L'objet RegExp contient un grand nombre de méthodes, mais nous n'en présentons qu'une seule, test. Cette méthode effectuera une correspondance d'expression régulière sur la chaîne spécifiée, renvoyant vrai en cas de succès et faux en cas d'échec. Cette méthode peut être appliquée aux chaînes littérales ou aux variables de chaîne. Fondamentalement, elle vous permet de régulariser une correspondance d'expression, l'exemple suivant. montre comment utiliser cette méthode :

testRegExp = /search/i; 
if (testRegExp.test("this is a search string") { 
document.write("The string was found."); 
} else { 
document.write("No match found."); 
} 
We can place it in a Web page to test: 
<html><head> 
<title>RegExp test</title> 
</head><body> 
<script language="javascript"> 
testRegExp = /search/i; 
if (testRegExp.test("this is a search string")) { 
alert("The string was found."); 
} else { 
alert("No match found."); 
} 
</script></body></html>

实际操作
现在是讲解更加完整的例子的时候了，在列表A中的网页包含了JavaScript方法来验证文本框中输入的值，这段JavaScript代码将搜索包含我的姓氏和我的两个名字的字符串(忽略大小写)，如果找到了我的名字，则通过字符串对象的替换方法(search)将其替换为一个短名字。第二个文本框是用于接受时间值的，一个正则表达式在此对输入的时间进行合法性验证(数字是通过冒号分割的)。这个简单的例子说明了如何在您的客户端代码中加入正则表达式来进行匹配和替换：

<html><head> 
<title>RegExp validation</title> 
<script language="JavaScript"> 
function validate() { 
var doc = document.test; 
varvalName = new RegExp("^(Tony|Anthony) Patton", "i"); 
if (doc.Name.value.match(valName) == null) { 
alert("Name was not found."); 
} else { 
doc.Name.value = doc.Name.value.replace(valName, "T. Patton"); 
} 
varvalTime = new RegExp("^([0-1][0-9]|[2][0-3]):([0-5][0-9])$"); 
if (doc.time.value.match(valTime) == null) { 
alert("Please enter correct time format (hh:ss)"); 
} } 
</script></head> 
<body><form name="test"> 
Name: <input type="text" name="Name" value=""><br> 
Time: <input type="text" name="time" value=""><br> 
<input type="button" name="test" value="test" onClick="validate();"> 
</form></body></html>

强大而复杂 
正则表达式的功能确实很强大，但是使用起来也并不简单，因此，应当循序渐进地学习，当然，它确实值得您花上一些时间来学习如何正确使用。正则表达式为JavaScript (以及其他的语言)操作文本，通用软件进行表单验证提供了一个简单而优雅的方法。

更多如何使用JavaScript和正则表达式进行数据验证相关文章请关注PHP中文网！