HTML5-Übung und Analyse von Formularen

HTML5 hat auch einige Verbesserungen am Formular vorgenommen, indem es einige neue Datenüberprüfungsfunktionen und einige neue Tag-Attribute hinzugefügt hat. Mit diesen Validierungsfunktionen können Sie eine Validierung ohne JavaScript durchführen. Auch wenn JavaScript deaktiviert ist, können Sie das Formular ohne Druck validieren. Entwickler verwenden kein JavaScript; der Browser führt die Validierung anhand der Regeln im Markup durch und zeigt die entsprechende Fehlermeldung an. Diese benutzerfreundlichen Funktionen sind nur in Browsern wirksam, die HTML5 unterstützen. Zu den unterstützten Browsern gehören Opera 10+, Safari 5+, Chrome und Firefox 4+.

Zu den neu hinzugefügten Formularfunktionen in HTML5 gehören: andere Eingabetypen, Eingabemodi, Wertebereiche, erforderliche Felder, Deaktivierung der Validierung und Überprüfung der Gültigkeit. Im Folgenden werden wir diese Funktionen im Detail vorstellen.

1. Andere Eingabetypen

Wenn es um Eingabetypen geht, fällt jedem schnell das Eingabe-Tag ein. Nur Eingabe-Tags können unterschiedliche Typen angeben. HTML5 fügt lediglich einige neue Attributwerte zum Typattribut in der Eingabe hinzu. Diese neuen Attributwerte können nicht nur Datentypinformationen widerspiegeln, sondern auch einige Standardvalidierungsfunktionen bereitstellen. Unter diesen sind „E-Mail“ und „URL“ die beiden am häufigsten unterstützten Typen, und jeder Browser hat auch benutzerdefinierte Überprüfungsmechanismen für sie hinzugefügt. Die neu hinzugefügten Typen lauten wie folgt:

　E-Mail: Das E-Mail-Textfeld unterscheidet sich nicht vom normalen. Wenn es sich bei der Eingabe nicht um eine E-Mail handelt, schlägt die Überprüfung fehl. Die mobile Tastatur ändert sich

　Tel : Telefonnummer

　URL: URL der Webseite

　Suche: Suchmaschine. Nach der Texteingabe unter Chrome gibt es eine zusätzliche geschlossene

Zahl

: Ein Eingabefeld, das nur Zahlen enthalten kann　

Farbe

: Farbauswahl

datetime

: Anzeige des vollständigen Datums　

datetime-local

: Anzeige des vollständigen Datums ohne Zeitzone　

time

: Anzeige Uhrzeit ohne Zeitzone　

Datum

: Datum anzeigen　

Woche

: Woche anzeigen　

Monat

: Monat anzeigen

Kleiner Beispiel-HTML-Code

2. Eingabemodus HTML5 Fügt nicht nur einige neue Eingabetypen hinzu; es wird auch ein neues Attribut hinzugefügt – das Musterattribut. Der Wert des Patten-Attributs ist ein regulärer Ausdruck, der verwendet wird, um den Wert im Textfeld abzugleichen. Achten Sie beim Schreiben regulärer Ausdrücke darauf, am Anfang und Ende keine ^- und $-Symbole hinzuzufügen (vorausgesetzt, sie existieren bereits). Diese beiden Symbole zeigen an, dass der eingegebene Wert vom Anfang bis zum Ende mit dem Muster übereinstimmen muss. Ein kleines Beispiel ist wie folgt:

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

HTML-Code

Chrome-Vorschaueffekt

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

3. Wertebereich

Zusätzlich zu „E-Mail“ und „URL“ HTML5 definiert außerdem mehrere zusätzliche Eingabeelemente. Für jedes dieser Elemente muss ein zahlenbasierter Wert eingegeben werden. Die Browserkompatibilität mit diesen neu hinzugefügten Werten ist jedoch nicht sehr gut. Für Eingabeelemente dieser numerischen Typen können Sie also das Min-Attribut (den kleinstmöglichen Wert), das Max-Attribut (den größtmöglichen Wert) und das Step-Attribut (die Differenz zwischen den beiden Skalen von Min bis Max) angeben. Ein kleines Beispiel ist wie folgt:

HTML-Code

JavaScript-Code

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

4. Erforderliche Felder Geben Sie das erforderliche Attribut im Formularfeld an, um den Benutzer darauf hinzuweisen, dass es sich um ein Pflichtfeld handelt und dies nicht möglich ist leer sein. Dieses Attribut gilt für Eingabe-Tags, Textbereich-Tags und Auswahl-Tags (unterstützt von Opera 12+). In JavaScript können Sie anhand des erforderlichen Attributs prüfen, ob ein Formular erforderlich ist.

Verschiedene Browser gehen unterschiedlich mit leeren Pflichtfeldern um. Opera 11 und Firefox 4 verhindern die Formularübermittlung und zeigen ein Hilfefeld unter dem entsprechenden Feld an, während Chrome (vor 9) und Safari (vor 5) nichts unternehmen und die Formularübermittlung nicht verhindern. Ein kleines Beispiel ist wie folgt:

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

HTML-Code

JavaScript-Code

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

5. Validierung deaktivieren Durch Hinzufügen des novalidate-Attributs zum Formular-Tag können Sie verhindern, dass sich das Formular selbst validiert. Sie können novalidate verwenden, um es in JavaScript abzurufen. Wenn es existiert, ist es wahr, andernfalls ist es falsch. Wenn mehrere Senden-Schaltflächen vorhanden sind, können Sie der entsprechenden Schaltfläche das Attribut formnovalidate hinzufügen, um anzugeben, dass beim Klicken auf eine bestimmte Senden-Schaltfläche keine Validierung des Formulars erforderlich ist. Attribute, die die Validierung deaktivieren, können auch mithilfe von JavaScript hinzugefügt werden. Ein kleines Beispiel ist wie folgt:

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

HTML-Code

	<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-Übung und Analyse von Formularen就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（www.php.cn）！