html 5 form-Validity検証関数

h 5はフォームに多くのタイプと属性を追加した.
これらの新しいタイプと属性h 5に基づいて、これらのデータを検証するjs関数も提供されています.これらの検証フォームの関数はValidityStateオブジェクトに存在します.次に、これらの関数の使い方を説明します.
 
ValidityStateオブジェクト
ValidityStateオブジェクトは、validityプロパティによって取得されます.このオブジェクトには8つのプロパティがあり、それぞれ8つの側面のエラーに対して検証され、プロパティ値はブール値です.
1.valueMissingプロパティ
必須フォーム要素の値は空です.
フォーム要素にrequiredプロパティが設定されている場合は、必須です.必須項目の値が空の場合、フォーム検証はできません.valueMissingプロパティはtrueを返します.そうでない場合、falseを返します.

<input id="inp1" type="text" value="foo" required/>
<input id="inp2" type="text" value="" required/>
<script type="text/javascript">
    document.getElementById('inp1').validity.valueMissing; //false
    document.getElementById('inp2').validity.valueMissing; //true
script>

 
2.typeMismatch属性
入力値はtypeタイプと一致しません.
HTML 5の新しいフォームタイプ、例えばemail、number、urlなどは、元のタイプ検証を含む.ユーザーが入力した内容がフォームタイプと一致しない場合、typeMismatchプロパティはtrueを返し、そうでない場合falseを返します.

<input id="inp1" type="url" value="http://foo.com" />
<input id="inp2" type="url" value="foo" />
<input id="inp3" type="email" value="[email protected]" />
<input id="inp2" type="email" value="bar" />
<script type="text/javascript">
    document.getElementById('inp1').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
    document.getElementById('inp3').validity.typeMismatch; //false
    document.getElementById('inp2').validity.typeMismatch; //true
script>

 
3.patternMismatchプロパティ
入力値はpattern特性の正則と一致しません.
フォーム要素はpatternプロパティを使用して正規表現の検証モードを設定できます.入力された内容が検証モードのルールに合致しない場合、patternMismatchプロパティはtrueを返し、そうでない場合falseを返します.

<input id="inp1" type="text" value="1234" />
<input id="inp2" type="text" value="" pattern="[a-z]{2}"/>
<script type="text/javascript">
   document.getElementById('inp1').validity.patternMismatch;  //false
   document.getElementById('inp2').validity.patternMismatch;  //true
script>

 
4.tooLong属性
入力内容は、フォーム要素のmaxLengthプロパティで定義された文字長を超えています.
フォーム要素は、maxLengthプロパティを使用して入力内容の最大長を設定できます.入力時にフォームの内容の長さが制限されますが、プログラム設定で最大長制限を超える場合があります.入力した内容が最大長制限を超えている場合、tooLongプロパティはtrueを返し、そうでない場合falseを返します.

<input id="inp1" type="text" value="A" maxlength="1" />
<input id="inp2" type="text" value="AB" maxlength="1" />
<script type="text/javascript">
    document.getElementById('inp1').validity.tooLong; //false
    document.getElementById('inp2').validity.tooLong; //true in Opera, false in         .
script>

 
5.rangeUnderflowプロパティ
入力した値はmin特性の値より小さい.
一般的に数値を記入するフォーム要素では、minプロパティを使用して数値範囲の最小値を設定することができます.入力した値が最小値より小さい場合、rangeUnderflowプロパティはtrueを返し、そうでない場合falseを返します.

<input id="inp1" type="number" value="3" min="2"/>
<input id="inp2" type="number" value="1" min="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeUnderflow; //false
    document.getElementById('inp2').validity.rangeUnderflow; //true
script>

 
6.rangeOverflowプロパティ
入力した値はmaxプロパティの値より大きい.
一般的に数値を記入するフォーム要素では、maxプロパティを使用して数値範囲の最大値を設定することもできます.入力した値が最大値より大きい場合、rangeOverflowプロパティはtrueを返し、そうでない場合falseを返します.

<input id="inp1" type="number" value="1" max="2"/>
<input id="inp2" type="number" value="3" max="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.rangeOverflow; //false
    document.getElementById('inp2').validity.rangeOverflow; //true
script>

 
7.stepMismatch属性
入力した値はstep特性で推定されたルールに合致しません.
数値を記入するフォーム要素では、min、max、stepのプロパティを同時に設定する必要がある場合があります.これにより、入力した値が最小値とstepのプロパティ値の倍数の和でなければならないことが制限されます.2から6の範囲の場合、step特性値は2です.合法値がこの範囲内の偶数であるため、他の数値は検証できません.入力値が要求に合致しない場合、stepMismatch属性はtrueを返し、そうでない場合falseを返します.

<input id="inp1" type="number" value="4" min="2" max="6" step="2"/>
<input id="inp2" type="number" value="3" min="2" max="6" step="2"/>
<script type="text/javascript">
    document.getElementById('inp1').validity.stepMismatch; //false
    document.getElementById('inp2').validity.stepMismatch; //true
script>

 
8.customErrorプロパティ
カスタム認証エラーメッセージを使用します.
ブラウザに組み込まれた検証エラーメッセージを使用するのに適していない場合があります.自分で定義する必要があります.入力値がセマンティック・ルールに合致しない場合、カスタムのエラー・プロンプトが表示されます.
通常setCustomValidity()メソッドを使用してエラーメッセージをカスタマイズします.setCustomValidity(message)はエラーメッセージをmessageにカスタマイズします.customErrorプロパティ値はtrueです.setCustomValidity(")では、カスタムエラーメッセージが消去され、customErrorプロパティの値がfalseになります.

<input id="inp1" type="text" />
<input id="inp2" type="text" />
<script type="text/javascript">
    document.getElementById('inp1').validity.customError; //false
    document.getElementById('inp2').setCustomValidity('Invalid');
    document.getElementById('inp2').validity.customError; //true
script>

 
checkValidity
返されるのもブール値で、検証によって真を返します.そうしないと偽を返します.
この方法はformフォームに作用し,検証の精度はまだ考慮されている.

<form id="profileform" name="profileform">
    <input type="text" id="firstname" required>
    <input type="button" id="testbutton" value="Test">
form>
<script>
var Form = document.getElementById('profileform'),
    submitB =  document.getElementById('testbutton');

submitB.οnclick=function(){

　　alert(Form.checkValidity());

}

script>

 
setCustomValidity
エラーメッセージをカスタマイズします.上記のcustomErrorメソッドのインスタンスコードを使用します.
転載先:https://www.cnblogs.com/langli/p/3446641.html