HTML5는 새로운 데이터 확인 기능을 추가하고 새로운 태그 속성을 추가하여 양식을 일부 개선했습니다. 이러한 검증 기능을 사용하면 JavaScript 없이 검증을 수행할 수 있습니다. JavaScript가 비활성화된 경우에도 아무런 압력 없이 양식을 검증할 수 있습니다. 개발자는 JavaScript를 사용하지 않습니다. 브라우저는 마크업의 규칙에 따라 유효성 검사를 수행하고 적절한 오류 메시지를 표시합니다. 이러한 사용자 친화적인 기능은 HTML5를 지원하는 브라우저에서만 효과적입니다. 지원되는 브라우저에는 Opera 10+, Safari 5+, Chrome 및 Firefox 4+가 포함됩니다.

HTML5에 새로 추가된 양식 기능에는 기타 입력 유형, 입력 모드, 값 범위, 필수 필드, 유효성 검사 비활성화 및 유효성 검사가 포함됩니다. 아래에서는 이러한 기능을 자세히 소개합니다.

1. 기타 입력 유형

입력 유형이라고 하면 누구나 쉽게 입력 태그를 떠올릴 것입니다. 입력 태그만 다른 유형을 지정할 수 있습니다. HTML5는 입력의 유형 속성에 몇 가지 새로운 속성 값을 추가합니다. 이러한 새로운 속성 값은 데이터 유형 정보를 반영할 수 있을 뿐만 아니라 일부 기본 유효성 검사 기능도 제공합니다. 그 중에서 "email"과 "url"은 가장 많이 지원되는 두 가지 유형이며, 각 브라우저에는 이에 대한 맞춤형 확인 메커니즘도 추가되었습니다. 새로 추가된 유형은 다음과 같습니다

　email: 이메일 입력란은 일반 입력과 다르지 않습니다. 입력한 이메일이 인증에 실패합니다. 모바일 키보드가 변경됩니다

　tel:전화번호

　url:웹페이지 URL

　검색 : 검색 엔진. 크롬 아래에 텍스트를 입력하면 닫힌 추가

: 숫자만 포함할 수 있는 입력 상자　

: 색상 선택기

: 전체 날짜 표시　

: 시간대 없이 전체 날짜 표시　

: 표시 시간대가 없는 시간　

: 표시 날짜　

: 표시 주　

: 월 표시

작은 예제 HTML 코드

<form action="http://www.baidu.com">
    <input type="email" />
    <input type="tel" />
    <input type="url" />
    <input type="search"/>
    <input type="range" min="0" max="10" step="2" />
    <input type="number"/>
    <input type="color"/>
    <input type="date"/>
    <input type="datetime"/>
    <input type="datetime-local"/>
    <input type="time"/>
    <input type="month"/>
    <input type="week"/>
    <!-- placeholder是让密码输入框拥有默认提示 -->
    <input type="password" placeholder="请输入密码"/>
    <input type="submit"/>
</form>

<form action="#">
    <input type="text" name="user" pattern="\d{1,9}"/>
    <!-- 点击之后 会本页面提交-->
    <input type="submit"/>
</form>

3. 값 범위

"이메일", "URL" 외에 HTML5 또한 다른 입력 요소도 정의합니다. 이러한 각 요소에는 일종의 숫자 기반 값을 채워야 합니다. 하지만 이러한 새로 추가된 값과의 브라우저 호환성은 그다지 좋지 않습니다. 따라서 이러한 숫자 유형의 입력 요소에 대해 min 속성(가능한 가장 작은 값), max 속성(가능한 가장 큰 값) 및 step 속성(최소에서 최대까지 두 척도 간의 차이)을 지정할 수 있습니다. 작은 예는 다음과 같습니다

<input type="range" min="0" max="10" step="2" id="range" />

var oInput=document.getElementById("range");
oInput.stepUp() //每次加1
oInput.stepUp(5) //每次加5
oInput.stepDown() //每次减1
oInput.stepDown(10) //每次减10

<input type="text" id="text" required/>

//检验是否支持必填属性
//支持的为true ，不支持的为false
var is = "required" in document.createElement("input");

	<input type="text" id="text" required/>
    


	<input type="text" id="text" required/>
    

6、检测有效性，及新添属性和方法

　　在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。

　　valueMissing : 输入值为空时

　　typeMismatch : 控件值与预期类型不匹配

　　patternMismatch : 输入值不满足pattern正则

　　tooLong : 超过maxLength最大限制

　　rangeUnderflow : 验证的range最小值

　　rangeOverflow：验证的range最大值

　　stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

　　customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证

　　placeholder : 输入框提示信息

　　autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off

　　autofocus : 指定表单获取输入焦点

　　list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id

　　Formaction : 在submit里定义提交地址

小例子JavaScript代码

if(input.validity && !input.validity.valid){
	if(input.validity.valueMissing){
		alert("不能为空")
	}else if(input.validity.typeMismatch){
		alert("控件值与预期类型不匹配");
	}
}

　　HTML5 실습 및 양식 분석就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（m.sbmmt.com）！