JavaScript 메모 양식 및 정규 표현식

高洛峰
풀어 주다: 2016-11-26 09:57:17
원래의
1264명이 탐색했습니다.

정규식은 텍스트 문자열의 유효성을 검사하고 형식을 지정하는 매우 강력한 방법입니다. 정규식을 사용하면 수십 줄의 코드가 필요한 복잡한 작업을 한두 줄의 JavaScript 코드로 완료할 수 있습니다.
정규식은 하나 이상의 텍스트 문자열을 설명하는 특수 기호로 작성된 패턴입니다. 프로그래밍에서 가장 까다로운 부분 중 하나로 간주되는 경우가 많지만, 혼란스러운 정규식을 의미 있는 작은 덩어리로 분해하면 구문은 이해하기 어렵지 않습니다.
다음은 정규식을 사용하여 이메일 주소를 확인하는 예입니다.
[html]
>
이메일 확인


이메일 확인



  


         

input type="submit" 값 ="제출" />




script01.css
]
본문 {

색상: #000;

배경색: #FFF
}

input.invalid {
배경색: #FF9; > 테두리: 2px 빨간색 삽입;
}

label.invalid {
색상: #F00;
글꼴 두께:
}

script01.js
[javascript]
window.onload = initForms; 
 
function initForms() { 
    for (var i=0; i        document.forms[i].onsubmit = function() {return validForm ();} 
    } 

 
function validForm() { 
    var allGood = true; 
    var allTags = document.getElementsByTagName("*"); 
 
    for (var i=0; i        if (!validTag(allTags[i])) { 
            allGood = false; 
        } 
    } 
    return allGood; 
 
    function validTag(thisTag) { 
        var outClass = ""; 
        var allClasses = thisTag.className.split(" "); 
     
        for (var j=0; j            outClass += validBasedOnClass(allClasses[j]) + " "; 
        } 
     
        thisTag.className = outClass; 
     
        if (outClass.indexOf("invalid") > -1) { 
            validLabel(thisTag.parentNode); 
            thisTag.focus(); 
            if (thisTag.nodeName == "INPUT") { 
                thisTag.select(); 
            } 
            false를 반환합니다. 
        } 
        true를 반환합니다. 
        
        function validBasedOnClass(thisClass) { 
            var classBack = ""; 
        
            스위치(thisClass) { 
               사례 "": 
               사례 "잘못됨": 
                   break; 
               케이스 "이메일": 
                   if (allGood && !validEmail(thisTag.value)) classBack = "invalid"; 
               기본값: 
                   classBack += thisClass; 
            } 
            return classBack; 
        } 
                
        function validEmail(email) { 
            var re = /^w+([.-]?w+)*@w+ ([.-]?w+)*(.w{2,3})+$/; 
 
           return re.test(이메일); 
        } 
         
        function informalLabel(parentTag) { 
            if (parentTag.nodeName == "LABEL") { 
                parentTag.className += "잘못됨"; 
            } 
        } 
    } 

이제 코드의 빨간색 줄을 설명하겠습니다.
정규식은 항상 슬래시(/)로 시작하고 끝납니다.
캐럿(^)은 이 표현식을 사용하여 특정 문자열로 시작하는 문자열을 확인한다는 것을 나타냅니다.
w 표현식은 a~z, A~Z, 0~9 또는 밑줄을 포함한 단일 문자를 나타냅니다.
더하기 기호 +는 이전 항목이 하나 이상 나타나는 것을 찾는 것을 의미합니다.
앞의 괄호(그룹을 나타냅니다.
대괄호 []는 문자 중 하나가 나타날 수 있음을 나타내는 데 사용됩니다. 이 대괄호에는 문자 .-가 포함되어 있지만 마침표는 정규식에서 특별한 의미를 갖습니다. 따라서 백슬래시가 앞에 와야 합니다. 이는 실제로 특별한 의미가 아니라 마침표 자체를 나타냄을 의미합니다. 특수 문자열 앞에 백슬래시를 사용하는 것을 "문자 이스케이프"라고 합니다. 항목이 나타나지 않거나 한 번만 나타날 수 있습니다. 물음표 뒤에 w+를 다시 사용하면 마침표나 하이픈 뒤에 다른 문자가 있어야 함을 나타냅니다. 이는 이전 항목이 나타나지 않을 수 있음을 나타냅니다.
@ 문자는 그 자체만을 나타내며 다른 의미는 없습니다.
다음으로 w+는 도메인 이름이 하나 이상의 a~z로 시작해야 함을 나타내는 데 사용됩니다. , 0~9 또는 밑줄([.-]?w+)*도 뒤에 옵니다. 이는 이메일 주소의 접미사에 점이나 하이픈이 허용된다는 의미입니다.
그런 다음 한 쌍의 원으로 표시됩니다. 괄호 안에 다른 그룹을 만듭니다(.w{2,3}). 이는 마침표와 일부 문자를 찾으려는 것을 나타냅니다. 중괄호 안의 숫자는 이전 항목이 2번 또는 3번 나타날 수 있음을 나타냅니다.
마지막. 정규 표현식 공식의 끝은 일치하는 문자열이 여기서 끝나야 함을 나타내는 달러 기호입니다.

Return re.test(email); 이 줄은 이전 단계에서 정의된 정규 표현식을 가져오고 test를 사용합니다. (). 이메일의 유효성을 확인하는 방법
정규식을 사용하지 않으면 동일한 코드를 완성하기 위해 수십 줄의 코드를 더 사용해야 합니다
[javascript]
function validEmail( 이메일) {
var validChars = " /:,;"
                                                              =0; ; k++) {
var badChar =validChars.charAt(k)
if (이메일 .indexOf(badChar) > -1) {
false를 반환합니다.
                                                                                                > var atPos = email.indexOf("@",1)
if (atPos == -1) {
return false;
}
if (email.indexOf("@", atPos+1) != -1) {
                                                              ; 1) {
                              }
반환 true; = "잘못됨";
}
                                                             ~ ~



관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿