Front -End Children 's Shoes가 페이지에 작성되면이 구덩이를 확인하기 위해 항상 양식을 작성하는 것이 불가피합니다 H5가 등장한 이후, 많은 일반적인 표현식 검증 검증이 우리를 위해 달성되었으므로 다음과 같이 많은 짐을 줄자.
사서함 주소 확인 :
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> 테스트 </title> </head> <body> <form action => <label> 이메일 : <입력 유형 = 이메일> </label> <입력 유형 = 제출> </form> </body> </html>
우편함 검증은 H5 자체에 의해 뒷받침되지만, 우리가 확인 해야하는 장면은 다양한 것을 사용해야합니까? 정기적 인 표현을 패턴으로 지정할 수 있습니다.
제한 11 자리 수 : <! doctype html> <html lang = en> <gead> <meta charset = utf-8> <title> 테스트 </title> </head> <body> <숫자 : <입력 유형 = 텍스트 패턴 =^/d {11} $> </label> <입력 유형 = 제출> </form> </body> </html> 질문당신은 그것을 시도 할 수 있습니다 우리는 패턴을 사용하여 형식을 확인해야합니다. 우리는 페이지를 쓸 필요가 없습니다.
해결책문제가 있다면 Google의 프로그래밍에서 오랫동안 해결해야합니다.
ONINVALID : 제출 된 입력 요소의 값이 유효하지 않은 값 (여기서는 정기적 인 확인 실패)이면 트리거
OninValid 이벤트. OninValid는 양식 이벤트에 속합니다.
SetCustomValidity () : HTML5의 제작 된 JS 메소드입니다
OninValid 및 SetCustomValidity를 통해 알림의 정의가 될 수 있습니다.
<! doctype html> <html lang = en> <gead> <meta charset = utf-8> <title> 테스트 </title> </head> <body> <숫자 : <입력 유형 = 텍스트 패턴 =^/d {11} $ oninValid = setCustomValidity ( '11 자리를 입력하십시오')> </label> <입력 유형 = 제출> </form> </body> </html>결과:
마지막으로, 계란 고통스러운 형식이 아닙니다. 이제 양식 검증 프롬프트는 사용자가 입력을 더 잘 수정할 수 있도록 어떤 종류의 데이터를 입력 해야하는지 명확하게 알려주었습니다.
위는 편집자가 도입 한 HTML5 형태의 검증 실패가 모든 사람에게 도움이되기를 바랍니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!