데이터 유효성 검사는 웹 애플리케이션이 클라이언트의 데이터를 받아들이는 중요한 단계입니다. 결국 고객 데이터를 사용하기 전에 예상 형식을 준수하는지 확인해야 합니다. 웹 애플리케이션에서는 ASP.NET, JSP 등과 같은 플랫폼별 도구를 사용하도록 선택하거나 클라이언트 측 JavaScript를 활용할 수 있습니다. JavaScript의 정규식은 데이터 유효성 검사 작업을 단순화할 수 있습니다.
정규식
정규식은 텍스트의 패턴을 표현할 수 있는 패턴 일치 도구로, 정규식을 텍스트 데이터 유효성 검사를 위한 강력한 도구로 만듭니다. 패턴 일치 외에도 정규식을 사용하여 텍스트를 바꿀 수도 있습니다. 정규식에 대한 지원은 UNIX 시스템에서 Perl을 사용하는 동안 처음 접한 이후 계속해서 확장되었습니다.
참고: 주변에 다른 개발자가 많다면 정규식을 RegEx 또는 RegExp라고 부를 수 있습니다. 정규식은 강력하기는 하지만 구문은 다소 "신비"하고 숙달하는 데 시간이 걸립니다. 정규식 사용에 대한 몇 가지 기본 지식을 살펴보겠습니다.
기본 구문
정규식 구문은 적용하기가 매우 복잡할 수 있으며 이 주제를 설명하려면 책 한 권이 필요할 수도 있지만, 여러분이 이해하는 데 도움이 되는 몇 가지 기본 지식을 설명하겠습니다. 정규식에 대한 사전 이해.
기본 개념은 문자열의 시작점과 끝점을 지정할 수 있는 앵커입니다. 캐럿(^)은 문자열의 시작점을 지정하는 데 사용되며 달러 기호($)는 끝점을 나타냅니다. . 쿼리 문자열에 캐럿 또는 달러 기호를 포함해야 하는 경우 이스케이프 문자()가 캐럿 또는 달러 기호보다 우선합니다. 다음 예에서는 문자열에 단어 검색이 나타날 때마다 해당 단어를 일치시킵니다.
^search$
또한 문자 그룹을 검색할 수도 있으며 [ 및 ]와 같이 대괄호 안에 넣으면 일치하는 문자가 이 문자 그룹에 속해야 합니다. 예를 들어 [12345] 범위에서 1부터 5까지 일치하는 숫자를 찾는 것입니다. 이 정규식은 [1-5]로도 쓸 수 있습니다.
여러 번 나타날 수 있는 문자나 선택적 문자를 지정해야 하는 경우가 많습니다. 물음표(?)는 해당 문자가 선택 사항임을 의미하고 더하기 기호(+)는 해당 문자가 한 번 나타날 수 있음을 의미합니다. 또는 여러 번, 별표(*)는 해당 문자가 나타나지 않거나 여러 번 나타날 수 있음을 의미합니다.
이제 이러한 간단한 정규식을 JavaScript에 적용하는 방법을 살펴보겠습니다.
JavaScript 지원
JavaScript는 버전 1.2에서 정규 표현식에 대한 지원을 추가했으며 Internet Explorer 4 및 Netscape 4부터 시작하는 브라우저 지원, 모든 Firefox 버전 및 대부분의 최신 브라우저에는 JavaScript 지원이 포함됩니다. 정규식은 JavaScript 문자열과 RegExp를 통해 사용할 수 있습니다.
문자열 사용
모든 JavaScript 문자열은 세 가지 메서드를 통해 정규식을 지원할 수 있습니다. 이 세 가지 메서드는 match(), replacement() 및 search()이며, 개체 테스트() 메서드도 허용합니다. 당신은 테스트합니다. 다음은 match(), replacement() 및 search() 메서드에 대한 정보입니다.
match(): 정규식 일치에 사용됩니다. 여러 일치 항목이 발생하면 일치하는 모든 결과가 포함된 배열이 반환됩니다. 일치하는 데이터가 포함된 복사본입니다. 일치하는 값이 없으면 null 값이 반환됩니다.
replace(): 정규식 일치 및 일치하는 모든 값을 새 하위 문자열로 바꾸는 데 사용됩니다. 이 메서드의 첫 번째 매개 변수는 정규식이고 두 번째 매개 변수는 문자열 교체에 사용됩니다.
search(): 정규식과 지정된 문자열 사이에 일치하는 값을 검색하는 데 사용됩니다. 일치하는 값이 발생하면 해당 문자열의 인덱스 값이 반환됩니다. 반환됩니다.
JavaScript는 정규식을 생성하고 사용할 수 있는 RegExp 개체도 제공합니다.
RegExp
RegExp 개체에는 정규식 패턴이 포함되어 있습니다. 이 개체의 메서드와 속성을 사용하여 문자열을 일치시킬 수 있습니다. RegExp 개체의 인스턴스를 생성하는 방법에는 두 가지가 있습니다. 정규식 텍스트 모드의 리터럴 모드를 사용하는 경우 두 번째 매개변수는 선택사항입니다. 이 매개변수는 검색이 전역(g)인지, 대소문자를 구분하지 않는지(i), 전역 및 대소문자를 구분하지 않는지(gi) 여부를 지정할 수 있습니다. 다음 예에서는 생성자를 사용하여 RegExp 개체를 만듭니다. 이 예에서는 검색 개체의 대소문자가 무시됩니다.
testRegExp = new RegExp("^search$","I")표시된 것처럼 리터럴 메서드(슬래시 부분)를 사용하여 동일한 인스턴스를 만들 수 있습니다. 아래:
testRegExp = /^search$/i
RegExp 객체에는 수많은 메소드가 포함되어 있지만 그 중 test라는 하나만 소개합니다. 이 메서드는 지정된 문자열에 대해 정규식 일치를 수행하고 성공하면 true를 반환하고 실패하면 false를 반환합니다. 이 메서드는 기본적으로 문자열 일치를 정규화할 수 있습니다. 이 방법을 사용하는 방법을 보여줍니다.
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中文网！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
