HTML5 양식 유효성 검사 분석-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 양식 유효성 검사 분석

不言

Jun 14, 2018 am 09:49 AM

html5 형태

이 글은 주로 HTML5를 이용한 간단한 폼 검증 예제를 소개하며, 휴대폰에 공유된 작은 예제도 있으니 필요하신 분들은 참고하시면 됩니다.

HTML5는 정규 표현식을 허용하는 폼 요소에 대한 패턴 속성을 제공합니다. 양식이 제출되면 이 정규식은 양식의 값이 비어 있지 않은지 확인하는 데 사용됩니다. 컨트롤 값이 이 정규식과 일치하지 않으면 프롬프트 상자가 나타나고 식이 금지됩니다. 제출 중입니다. 프롬프트 상자의 텍스트는 setCustomValidity 메소드를 사용하여 사용자 정의할 수 있습니다.
　예를 들어 아래 양식의 텍스트 상자에는 본토 휴대전화 번호만 입력할 수 있습니다. 다른 항목을 입력하면 제출할 수 없습니다. Run

<!DOCTYPE html>
<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>

로그인 후 복사

아무것도 입력하지 않은 경우 비어 있지 않은 양식만 일반 인증을 사용합니다. , 패턴이 사용되지 않으므로 도움이 필요합니다. 하지만 이 코드에서 나타나는 프롬프트는 다음과 같습니다.

오직 원숭이만이 이러한 프롬프트 텍스트를 이해할 수 있습니다! 따라서 setCustomValidity 메소드를 사용하여 정의된 보다 친숙한 프롬프트 텍스트도 필요합니다.

Run

<!DOCTYPE html>
<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>
<script>
text.oninput=function(){   
  text.setCustomValidity("");   
};   
text.oninvalid=function(){   
  text.setCustomValidity("请不要输入火星的手机号好吗？");   
};   
</script>

로그인 후 복사

양식 제출 이벤트 전에 잘못된 이벤트가 발생합니다. 확인에 실패하면 양식 제출이 발생하지 않습니다. 제출할 때 먼저 모든 양식 요소의 값이 유효한지 확인합니다. 제출 외에도 checkValidity 메서드를 수동으로 호출하여 확인을 수행할 수도 있습니다.

　위의 예에서 컨트롤에 대한 고정 프롬프트를 직접 설정하는 것은 실제로 별로 좋지 않습니다. 때로는 더 자세한 프롬프트 정보가 필요할 수 있습니다. 예를 들어 프롬프트가 비어 있으면 프롬프트가 너무 깁니다. 너무 길고 숫자가 아닌 경우 프롬프트가 표시되지 않습니다. 이러한 작업은 프로그램 확인 후 CustomValidity를 동적으로 설정하여 수행할 수 있습니다.
사실 HTML5의 API는 기본적인 요구 사항을 충족할 수는 있지만 그다지 실용적이지는 않습니다.

모바일 페이지에서 양식을 제출할 때 JavaScript를 사용하여 정보를 확인하면 창이 팝업되고 사용자 경험이 매우 열악하므로 다음은 HTML5 속성을 사용하여 모바일 페이지에서 확인하는 또 다른 예입니다.

<input id="name" name="name" placeholder="name" required="" tabindex="1" type="text">
<input id="email" name="email" placeholder="telephone" required="" tabindex="2" type="text" pattern="(^(\d{3,4}-)?\d{7,8})$|^(13|15|18|14)\d{9}$">
<input id="subject" name="subject" placeholder="example@domain.com" required="" tabindex="2" type="text">
 // 主要用了HTML的一下属性   
// 1.placeholder 提供可描述输入字段预期值的提示信息。 该提示会在输入字段为空时显示,并会在字段获   
//得焦点时消失   
//2.required 属性规定必需在提交之前填写输入字段   
//3.pattern  是正则表达式,  里面可以直接填写正则表达式

로그인 후 복사