데이터 유효성 검사를 위해 JavaScript 및 정규식을 사용하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

데이터 유효성 검사를 위해 JavaScript 및 정규식을 사용하는 방법

高洛峰

Jan 14, 2017 am 09:55 AM

데이터 유효성 검사는 웹 애플리케이션이 클라이언트의 데이터를 받아들이는 중요한 단계입니다. 결국 고객 데이터를 사용하기 전에 예상 형식을 준수하는지 확인해야 합니다. 웹 애플리케이션에서는 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中文网！

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

Python vs. JavaScript : 사용 사례 및 응용 프로그램 비교Apr 21, 2025 am 12:01 AM

Python은 데이터 과학 및 자동화에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 데이터 처리 및 모델링을 위해 Numpy 및 Pandas와 같은 라이브러리를 사용하여 데이터 과학 및 기계 학습에서 잘 수행됩니다. 2. 파이썬은 간결하고 자동화 및 스크립팅이 효율적입니다. 3. JavaScript는 프론트 엔드 개발에 없어서는 안될 것이며 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축하는 데 사용됩니다. 4. JavaScript는 Node.js를 통해 백엔드 개발에 역할을하며 전체 스택 개발을 지원합니다.

JavaScript 통역사 및 컴파일러에서 C/C의 역할Apr 20, 2025 am 12:01 AM

C와 C는 주로 통역사와 JIT 컴파일러를 구현하는 데 사용되는 JavaScript 엔진에서 중요한 역할을합니다. 1) C는 JavaScript 소스 코드를 구문 분석하고 추상 구문 트리를 생성하는 데 사용됩니다. 2) C는 바이트 코드 생성 및 실행을 담당합니다. 3) C는 JIT 컴파일러를 구현하고 런타임에 핫스팟 코드를 최적화하고 컴파일하며 JavaScript의 실행 효율을 크게 향상시킵니다.

자바 스크립트 행동 : 실제 예제 및 프로젝트Apr 19, 2025 am 12:13 AM

실제 세계에서 JavaScript의 응용 프로그램에는 프론트 엔드 및 백엔드 개발이 포함됩니다. 1) DOM 운영 및 이벤트 처리와 관련된 TODO 목록 응용 프로그램을 구축하여 프론트 엔드 애플리케이션을 표시합니다. 2) Node.js를 통해 RESTFULAPI를 구축하고 Express를 통해 백엔드 응용 프로그램을 시연하십시오.

JavaScript 및 웹 : 핵심 기능 및 사용 사례Apr 18, 2025 am 12:19 AM

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

See all articles