So verwenden Sie JavaScript und reguläre Ausdrücke zur Datenvalidierung

Die Datenvalidierung ist ein wichtiger Schritt für Webanwendungen, um Daten von Kunden zu akzeptieren. Schließlich müssen Sie sicherstellen, dass Kundendaten dem erwarteten Format entsprechen, bevor Sie sie verwenden. In Webanwendungen können Sie plattformspezifische Tools wie ASP.NET, JSP usw. verwenden oder die Vorteile von clientseitigem JavaScript nutzen. Reguläre Ausdrücke in JavaScript können die Arbeit der Datenvalidierung vereinfachen.

Regulärer Ausdruck
Regulärer Ausdruck ist ein Mustervergleichstool, mit dem Sie Muster in Text ausdrücken können, wodurch reguläre Ausdrücke ein leistungsstarkes Tool zur Validierung von Textdaten sind. Neben dem Mustervergleich können auch reguläre Ausdrücke zur Textersetzung verwendet werden. Die Unterstützung für reguläre Ausdrücke hat sich weiter ausgeweitet, seit ich ihnen zum ersten Mal bei der Verwendung von Perl auf einem UNIX-System begegnet bin.
Hinweis: Wenn Sie in der Nähe vieler anderer Entwickler sind, heißen reguläre Ausdrücke möglicherweise RegEx oder RegExp. Obwohl reguläre Ausdrücke leistungsstark sind, ist ihre Syntax etwas „mysteriös“ und es dauert einige Zeit, sie zu beherrschen. Werfen wir einen Blick auf einige Grundkenntnisse zur Verwendung regulärer Ausdrücke.

Grundlegende Syntax
Die Anwendung der Syntax regulärer Ausdrücke kann sehr kompliziert sein, und es würde sogar ein ganzes Buch erfordern, um dieses Thema zu erklären, aber ich werde einige der Grundkenntnisse erläutern, um Ihnen dabei zu helfen, eine zu erhalten Vorläufiges Verständnis regulärer Ausdrücke.
Ein Grundkonzept ist der Anker, mit dem Sie den Start- und Endpunkt einer Zeichenfolge angeben können. Das Caret-Zeichen (^) wird verwendet, um den Startpunkt der Zeichenfolge anzugeben, und das Dollarzeichen ($) gibt den Endpunkt an . Wenn Sie ein Caret- oder Dollarzeichen in die Abfragezeichenfolge einfügen müssen, können Sie eine Escape-Sequenz verwenden. Das Escape-Zeichen () hat Vorrang vor dem Caret- oder Dollarzeichen. Das folgende Beispiel stimmt mit der Wortsuche überein, wann immer sie in einer Zeichenfolge vorkommt.

^search$
Darüber hinaus können Sie auch nach einer Gruppe von Zeichen suchen, indem Sie sie einfach in eckige Klammern setzen, z. B. [ und ], die übereinstimmenden Zeichen müssen zu dieser Zeichengruppe gehören, ein Beispiel Es besteht darin, passende Zahlen 1 bis 5 im Bereich von [12345] zu finden. Dieser reguläre Ausdruck kann auch als [1-5] geschrieben werden.
Oft müssen Sie möglicherweise ein Zeichen angeben, das mehrmals vorkommen kann, oder ein optionales Zeichen. Das Fragezeichen (?) bedeutet, dass das Zeichen optional ist, und das Pluszeichen (+) bedeutet, dass das Zeichen einmal vorkommen kann oder Mehrfach: Das Sternchen (*) bedeutet, dass das Zeichen möglicherweise nicht oder mehrmals erscheint.
Jetzt wollen wir sehen, wie man diese einfachen regulären Ausdrücke auf JavaScript anwendet.

JavaScript-Unterstützung
JavaScript hat in Version 1.2 Unterstützung für reguläre Ausdrücke hinzugefügt, Browserunterstützung ab Internet Explorer 4 und Netscape 4, alle Firefox-Versionen und die meisten modernen Browser. Enthält JavaScript-Unterstützung. Reguläre Ausdrücke können über JavaScript-Strings und RegExp verwendet werden.

Verwenden von Zeichenfolgen
Jede JavaScript-Zeichenfolge kann reguläre Ausdrücke über drei Methoden unterstützen. Diese drei Methoden sind match (), replace () und search (), und die Methode () ermöglicht auch den Test des Objekts Sie, um Tests durchzuführen. Im Folgenden finden Sie Informationen zu den Methoden match(), replacement() und search():
match(): Wird für den Abgleich regulärer Ausdrücke verwendet. Wenn mehrere Übereinstimmungen auftreten, wird ein Array mit allen übereinstimmenden Ergebnissen zurückgegeben eine Kopie mit übereinstimmenden Daten; wenn kein übereinstimmender Wert vorhanden ist, wird ein Nullwert zurückgegeben.

replace(): Wird zum Abgleichen regulärer Ausdrücke und zum Ersetzen aller übereinstimmenden Werte durch neue Teilzeichenfolgen verwendet. Der erste Parameter dieser Methode ist der reguläre Ausdruck, und der zweite Parameter wird zum Ersetzen verwendet.

search(): Wird verwendet, um nach einem übereinstimmenden Wert zwischen einem regulären Ausdruck und einer angegebenen Zeichenfolge zu suchen. Wenn ein übereinstimmender Wert auftritt, wird der Indexwert der Zeichenfolge zurückgegeben, wenn kein übereinstimmender Wert vorhanden ist wird zurückgegeben.

JavaScript stellt außerdem das RegExp-Objekt zum Erstellen und Verwenden regulärer Ausdrücke bereit.

RegExp
Das RegExp-Objekt enthält ein reguläres Ausdrucksmuster. Die Methoden und Eigenschaften dieses Objekts können zum Abgleichen von Zeichenfolgen verwendet werden. Es gibt zwei Möglichkeiten, eine Instanz eines RegExp-Objekts zu erstellen: mithilfe des Konstruktors oder Bei Verwendung des Literalmodus des Textmodus für reguläre Ausdrücke ist der zweite Parameter optional und kann angeben, ob die Suche global (g), ohne Berücksichtigung der Groß-/Kleinschreibung (i) oder sowohl global als auch ohne Berücksichtigung der Groß-/Kleinschreibung (gi) erfolgt. Das folgende Beispiel verwendet den Konstruktor, um ein RegExp-Objekt zu erstellen. In diesem Beispiel wird die Groß-/Kleinschreibung des Suchobjekts ignoriert:

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

Sie können dieselbe Instanz mit der Literalmethode erstellen (in Kursivschrift). die Leiste), wie unten gezeigt:

testRegExp = /^search$/i

Das RegExp-Objekt enthält eine große Anzahl von Methoden, aber wir stellen nur eine davon vor, test. Diese Methode führt einen regulären Ausdrucksabgleich für die angegebene Zeichenfolge durch und gibt im Erfolgsfall „true“ zurück. Diese Methode kann auf Literalzeichenfolgen oder Zeichenfolgenvariablen angewendet werden, wie im folgenden Beispiel dargestellt demonstriert die Verwendung dieser Methode:

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中文网！