자바스크립트 양식 검증 - 정규식 발견_자바스크립트 기술

추천 도서: Javascript 양식 유효성 검사 길이

Javascript 양식 확인-제출 양식

Javascript 양식 유효성 검사 - 정규식 첫 소개

이전 기사에서는 Javascript 양식 유효성 검사 - 정규 표현식의 첫 소개를 소개했습니다. 이번 기사에서는 Javascript 양식 유효성 검사 - 정규 표현식의 베일을 벗기는 내용을 소개합니다. 세부 사항.

메타 문자를 사용하여 해당 문자 유형을 일치시키세요

정규식 생성은 정규식이 "/" 쌍 안에 표시된다는 점을 제외하면 문자열 리터럴 생성과 약간 비슷합니다.

첫 번째 수준 메타 문자는 정규식에서 문자와 숫자를 연결하는 데 사용됩니다

"."는 개행 문자를 제외한 모든 문자와 일치합니다.

"d"는 모든 숫자와 일치합니다

"w"는 모든 알파벳 또는 숫자와 일치합니다

"s"는 공백과 일치합니다

"^" 문자열은 패턴으로 시작해야 합니다

"$" 문자열은 패턴으로 끝나야 합니다

메타 문자는 리터럴 문자를 나타낼 뿐만 아니라 정규 표현식을 구성하는 데 사용되는 기호입니다.

예: 여기에 세 명의 문자가 있습니다

"A","7","%"

/w/는 "A", "7"과 일치할 수 있습니다

/^d/는 "7"과 일치할 수 있습니다

/d/는 "7"과 일치할 수 있습니다

/./는 "A", "7", "%"와 일치할 수 있습니다

하지만 여러 문자가 포함된 문자열은 어떻습니까?

"2nite","007","catch22",

/^d/는 "2nite", "007"(모두 숫자로 시작)과 일치할 수 있습니다.

/ddd/는 "007"(한 줄에 숫자 3개)과 일치합니다.

/^cat/는 "catch22"(고양이 문자로 시작)와 일치할 수 있습니다.

/dd$/는 "catch22"와 일치합니다(두 개의 숫자로 끝나야 함)

예: 미국 우편번호를 일치시키면 우편번호 형식은 #####-####입니다

/^ddddd-dddd$/

한정자를 사용하여 문자 발생 횟수 지정

한정자는 정규 표현식에서 하위 패턴이 나타나는 횟수를 제어하는 ​​데 사용됩니다

한정자 앞에 하위 패턴이 오고, 한정자는 하위 패턴에 적용되어 패턴에 하위 패턴이 나타나는 횟수를 제어합니다.

"*" 한정자 앞의 하위 패턴은 0회 이상 나타나야 합니다

"+" 한정자 앞의 하위 패턴이 1번 이상 나타나야 합니다

"?" 한정자 앞의 하위 패턴은 0회 또는 1회 나타나야 합니다.

"{n}" 한정자 앞의 하위 패턴은 정확히 N 번 나타나야 합니다

"()"는 문자 및/또는 메타 문자를 수집하여 하위 패턴이 됩니다

우편번호도 예시로 사용

/^d{5}-d{4}$/

메타문자만 사용한 표현보다 한정자를 사용한 표현이 더 정확함을 알 수 있습니다

/w*/는 빈 문자열
을 포함하여 모든 영숫자 문자와 일치합니다.

/.+/ 두 번 이상 나타나는 문자열과 일치합니다(비어 있지 않은 문자열과 일치하는 데 사용됨)

/(Hot)??Donuts/는 Hot 또는 Donuts와 일치할 수 있습니다

*정규식에서 특별한 의미를 지닌 문자를 찾고 싶을 때 백슬래시를 사용할 수 있습니다

예를 들어 $:$* 일치

정규식을 사용하여 데이터 확인

JavaScript의 정규식은 정규식을 사용하여 데이터를 확인하는 핵심 요소인 RegExp 개체로 표현됩니다. 즉, 지정된 패턴이 문자열에 존재하는지 확인하는 test() 메서드입니다.

예:

정규 표현식 객체 리터럴은 자동으로 RegExp 객체를 생성합니다

if(!regex.test(inputFiled.value)) 
{ 
//在正则表达式上调用text方法 
//如果符合合正则表达式的要求,返回true 
//如果不符合正则表达式的要求,返回false 
}

코드 예시

다음으로 문자열 형식을 확인하는 데 사용되는 구체적인 방법을 작성하세요

//regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
if(helpText!=null)
helpText.innerHTML=helpMessage;
return false;
}
else{
if(helpText!=null)
helpText.innerHTML="";
}
return true;
}
function validateDate(inputFild,helpText)
{
if(!validateNonEmpty(inputFild,helpText)//先检查参数是非空的
{
return false;
}
return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}

자, 이번 글은 여기서 마치겠습니다. Script House 웹사이트를 응원해주신 모든 분들께 감사드립니다!