HTML 양식 및 유효성 검사 이벤트

1. 양식 확인

(1) 비어 있지 않은 확인(공백 제거)

(2) 비교 검증(값과 비교)

(3) 범위 검증(범위를 기준으로 판단)

(4). 고정 형식 확인: 확인을 위해 전화번호, ID 번호, 이메일, 신용카드 번호 등의 정규 표현식이 필요합니다.

(5).기타 확인

2, 정규표현식

기호를 사용하여 작성 규칙 설명:/ 중간에 정규식 작성 /

^: 시작과 일치, $: 끝과 일치 /^ve/ve로 시작 /ve$/ve로 끝남

d: 임의의 숫자

w: 임의의 숫자 또는 문자

s: 임의의 문자열

{n}: 왼쪽 표현식을 n번 반복

{m,n}: 왼쪽의 표현식을 최소 m회, 최대 n회 반복
{m, }: 왼쪽의 표현식을 최소 m회, 최대 무제한 반복

+: 왼쪽의 표현식은 최소 한 번 이상 나타나고 최대 제한 없이 나타나며, 이는 {1,}

과 같습니다.

*: 왼쪽의 표현식은 최소 0번 나타나고 최대 제한 없이 나타납니다. 이는 {0,}

과 같습니다.

?: 왼쪽 표현식은 최소 0회 최대 1회 나타나며 이는 {0, 1}

과 동일합니다.

[a,b,c]: 대괄호 안의 내용 중 하나만 취할 수 있음

[a-z] 또는 [1-9]: 범위에서 하나 선택

|: 또는; (): 우선순위를 나타냅니다. : Escape-- "( )"는 괄호로 표시되며 이스케이프되어야 합니다.

3. 이벤트

이벤트에는 이벤트 소스, 이벤트 데이터, 이벤트 핸들러라는 세 가지 요소가 있습니다

return false를 추가하여 기본 작업을 방지할 수 있습니다

onclick: 마우스 클릭에 의해 트리거됨

ondblclick: 더블 클릭 트리거

onmouseover: 마우스가 위로 움직일 때 트리거됩니다

onmouseout: 마우스가 떠날 때 트리거됩니다

onmousemove: 마우스가 그 위로 움직일 때 트리거됩니다

onchange: 콘텐츠가 변경될 때마다 트리거됩니다

onblur: 초점을 잃었을 때 트리거됩니다

onfocus: 초점을 얻었을 때 트리거됩니다

onkeydown: 버튼을 눌렀을 때 트리거됩니다

onkeyup: 버튼을 눌렀을 때 트리거됩니다.

onkeypress: 사용자가 영숫자 키를 눌렀다 놓을 때 이벤트가 발생합니다. 하지만 시스템 버튼(예: 화살표 키, 기능 키)은 인식되지 않습니다.

예: 정규식을 기반으로 이메일 확인

function checkemail() { var v4 = Trim(u4.value); var reg = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.] w+)*$/; if(v4.match(reg) != null) { imgs4.setAttribute("src","imges/1.png") return true; "imges/2.png"); false를 반환 } }

정규식 보충:

정규식 작성 방법:

var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()괄호 안의 수식은 직접 정의해야 합니다.

1, []에는

요소가 하나만 있습니다.

2, ()단어나 표현을 쓸 수 있습니다. 3, {} 수량을 나타냄
4, ^ : 특정 요소로 시작하여 해당 요소 앞에 쓴다
5 , $: 특정 요소로 끝나며 */

요소 뒤에 작성됩니다.

예:

1, 정규식 확인 ID 카드:

신분증:

/*javascript부분*/

var a= document.getElementById("1").value; var 패턴= new RegExp(/^[0-9]{17}[0-9|X]$/)

if(patten.test(a))

{ Alert("올바르게 입력하세요 "); }

그밖에

{ Alert("입력 오류"); }

2, 정규식 확인 이메일:

이메일: 제출" onclick="mail()" />

메일 기능()

{ 

var patten2= new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/)

var mail = document.getElementById("2").value

if(patten2.test(mail)) 

{ Alert("올바르게 입력하세요 "); }

그 외

{ Alert("입력 오류"); }

}

자주 사용되는 정규 표현식:

국내 전화번호 매칭: d{3}-d{8}|d{4}-d{7}
설명: 매칭 형식은 0511- 4405222 또는 021-87888822
Tencent QQ 번호와 일치: [1-9][0-9] { 4,}
코멘트: Tencent QQ 번호는 10000
에서 시작하여 중국과 일치합니다. 우편번호: [1-9]d{5}(?!d)
댓글: 중국 우편번호는 6자리
일치합니다. ID 카드: d{15}|d{18}
설명: 중국의 ID 카드는 15자리 또는 18비트입니다.
일치 ip주소: d+.d+.d+.d+
댓글: ip 추출 주소에 유용함
특정 숫자 일치:
^[1-9]d*$ //양의 정수 일치
^-[ 1 -9]d*$ //음수 일치
^-?[1-9]d*$ //정수 일치
^[1-9 ] d*|0$ //음수가 아닌 정수와 일치(양의 정수+ 0)
^-[1-9]d*|0 $ //은 양수가 아닌 정수와 일치합니다(음의 정수 + 0)
^[1-9]d*.d*|0.d * [1-9]d*$ //양수 부동 소수점 숫자 일치
^-([1-9]d*.d*|0.d*[1-9]d* )$ //음수 부동 소수점 숫자 일치
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+ |0) $ //부동 소수점 숫자 일치
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0 $ // 음수가 아닌 부동 소수점 숫자와 일치합니다(양수 부동 소수점 숫자 + 0)
^(-([1-9]d* .d*|0.d *[1-9]d*))|0?.0+|0$ //양수가 아닌 부동 소수점 숫자와 일치합니다(음의 부동 소수점 숫자+ 0)
댓글: 대용량 데이터를 처리할 때 유용합니다. 특정 애플리케이션의 수정 사항에 주의하세요.
특정 문자열 일치:
^[A-Za-z]+$ //는 26 영문자
^[A-Z]+로 구성된 문자열과 일치합니다. $ //는 26으로 구성된 문자열과 일치합니다. 대문자 영문자로 구성된 문자열
^[a-z]+$ //은 26 영문 소문자로 구성된 문자열 ^[A-Za-z0-9]+$ //숫자와 26 영문자
로 구성된 문자열과 일치 ^w+$ // 숫자, 26 영문자 또는 밑줄로 구성된 문자열과 일치합니다.
은 RegularExpressionValidator를 사용하여 검증합니다. 컨트롤의 확인 표현식은 다음과 같이 도입됩니다. :
숫자만 입력할 수 있습니다: "^[0-9]*$"
n자리만 입력할 수 있습니다: “^d{n}$”
최소 n자리만 입력할 수 있습니다 : “^d{n,}$”
m-n자리만 입력할 수 있습니다: “^d {m, n}$"
0으로 시작하고 0이 아닌 숫자만 입력할 수 있습니다: “^(0|[1-9][0-9]*)$”
소수점 이하 두 자리의 양의 실수만 입력할 수 있습니다: “^[0-9]+(.[0-9]{2})?$”
만 가능합니다. 소수점 1-3자리의 양의 실수를 입력했습니다. “^[0-9]+(.[0-9]{1,3})?$”
0이 아닌 양의 정수만 입력할 수 있습니다: “^+?[1-9][0-9]*$”
0이 아닌 음의 정수만 입력할 수 있습니다. 입력됨:“^-[1-9][0-9]*$”
길이가 3인 문자만 입력할 수 있습니다: “^.{3 }$”
26개의 영문자 “^[A-Za-z]로 구성된 문자열만 입력할 수 있습니다. +$”
영문 대문자 26개로 구성된 문자열만 입력 가능: “^[A-Z]+$”
26소문자 영문자로 구성된 문자열만 입력 가능: “^[a-z]+$”
으로 구성된 문자열만 입력 가능 숫자와 26개의 문자열 영문자: “^[A-Za-z0-9]+$”
숫자만 26개의 문자열 영문자 또는 밑줄: “^w+$” 
 사용자 비밀번호 확인:“^[a-zA -Z]w {5,17}$”올바른 형식은 다음과 같습니다. 문자로 시작하고 길이는 6-18,
포함 문자, 숫자, 밑줄만 가능합니다.
^%&'',;=?$": "[^%&'',;=와 같은 문자가 포함되어 있는지 확인하세요. ?$ x22]+”
한자만 입력 가능: “^[u4e00-u9fa5],{0,}$”
확인이메일 주소 :“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
인증인터넷URL: “^http://([w-]+.)+[w-]+(/[w-./?%&=] *)?$”
인증 전화번호: “^((d{3,4})|d{3,4}-)?d{7,8}$”
 올바른 형식은 다음과 같습니다. “XXXX-XXXXXXX”,“XXXX-XXXXXXXXX”,“XXX- XXXXXXX ", "XXXXXXXX" >
. ID 번호 확인(15자리 또는 18자리):
"^d{ 15} |d{}18$"  1년12개월 확인:“^(0?[1-9]|1 [0- 2])$"올바른 형식은 다음과 같습니다:
"01"-"09" 및 "1""12" 월 31일 확인: “^((0?[1-9])|((1|2)[0- 9] )|30|31)$"올바른 형식은 다음과 같습니다:
“01”“09”및“1”“31” .
중국어 문자와 일치하는 정규식: [u4e00-u9fa5] 2바이트 문자와 일치 ( 중국어 문자 포함 )
：
[^x00-xff] 빈 줄과 일치하는 정규 표현식: n[s| ]*r  HTML 태그와 일치하는 정규 표현식: /<(.*)>.*|<(.*) />/
선행 및 후행 공백과 일치하는 정규식:
(^s*)|(s*$) 이메일 주소와 일치하는 정규식: w+([ -+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
일치하는 URL
URL 에 대한 정규식: http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?