HTML5 ではフォームにもいくつかの改良が加えられ、いくつかの新しいデータ検証機能が追加され、いくつかの新しいタグ属性が追加されました。これらの検証機能を使用すると、JavaScript が無効になっている場合でも、ストレスなくフォームを検証できます。開発者は JavaScript を使用しません。ブラウザはマークアップのルールに基づいて検証を実行し、適切なエラー メッセージを表示します。これらのユーザーフレンドリーな機能は、HTML5 をサポートするブラウザでのみ有効です。サポートされているブラウザには、Opera 10 以降、Safari 5 以降、Chrome、Firefox 4 以降が含まれます。

HTML5の新たに追加されたフォーム機能には、その他の入力タイプ、入力モード、値の範囲、必須フィールド、検証の無効化、有効性の検出が含まれます。以下ではこれらの機能について詳しく紹介していきます。

1. その他の入力タイプ

入力タイプというと、誰もがすぐに input タグを思い浮かべるでしょう。異なるタイプを指定できるのは入力タグのみです。 HTML5 は、入力の type 属性にいくつかの新しい属性値を追加するだけです。これらの新しい属性値は、データ型情報を反映するだけでなく、いくつかのデフォルトの検証関数も提供します。その中で、「電子メール」と「URL」の 2 つのタイプが最もサポートされており、各ブラウザーにはこれらのカスタマイズされた検証メカニズムも追加されています。新しく追加されたタイプは以下の通りです

email: メールテキストボックスは通常のものと変わりません。入力がメールでない場合、認証は通りません。モバイルキーボードが変わります

tel: 電話番号

url: WebページのURL

search: 検索エンジン。 Chrome でテキストを入力すると、追加の閉じた

color : カラーピッカー

datetime: 完全な日付を表示

datetime-local : タイムゾーンなしで完全な日付を表示

time :タイムゾーンなしで時刻を表示

date : 日付を表示 Week

MONTHMONTH : 月を表示

<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>

2、入力モード HTML5だけではないいくつかの新しい入力タイプが追加され、新しい属性であるパターン属性も追加されました。 Patten 属性の値は、テキスト ボックスの値と一致するために使用される正規表現です。正規表現を記述するときは、先頭と末尾に ^ 記号と $ 記号を追加しないように注意してください (すでに存在しているものと仮定します)。これら 2 つの記号は、入力された値が最初から最後までパターンと一致する必要があることを示します。小さな例は次のとおりです

HTMLコード

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

HTML コード

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

JavaScript コード

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

HTML コード

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

JavaScript コード

//检验是否支持必填属性
//支持的为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）！