イベント処理--フォームイベント2

テキストボックススクリプト

HTML 5制約検証API

テキストボックススクリプト
htmlでは、input単行テキストボックスとtextarea多行テキストボックスの2つの方法でテキストボックスを表現します.この2つは似ていますが、いくつかの違いがあります. input要素は、sizeプロパティによってテキストボックスに表示できる文字数を指定できます.valueプロパティではテキストボックスの初期値を設定できますが、maxlengthプロパティでは、テキストボックスで許容できる最大文字数を指定します.例:

テキストボックスのサイズを設定するには、rowsプロパティとcolsプロパティを使用します.rowsプロパティは、テキストボックスの文字行数を指定します.colsプロパティは、要素のsizeプロパティと同様に、テキストボックスの文字列数を指定します.Inputとは異なり、textareaの初期値はの間に置く必要があります.もう1つはtextareaで最大文字数を指定できません.<br>HTML 5制約検証API<br>HTML 5は、フォームをサーバに送信する前にデータを検証するために、いくつかの検証機能を追加しました.1.必須フィールド第1のケースは、フォームフィールドにrequired属性が指定されている場合です.たとえば、次のようになります.<pre><code><input type="text" name="username" required=""/> </code></pre> <br>任意の寸法にrequiredがあるフィールドは、フォームをコミットするときに空にすることはできません.この属性は、、<select>フィールドに適用されます.<br/> 2.その他の入力タイプ<br/>HTML 5はinput要素のtype属性にいくつかの値を追加し、これらの新しいタイプはデータ型の情報を反映するだけでなく、デフォルトの検証機能も提供します.例:</select><pre><code><input type="email" name="email"/> <input type="url" name="homepage"/> </code></pre> <br>html 5は、emailおよびurlに加えて、number、rang、datetimeなど、いくつかの入力要素を定義していますが、サポートされていないブラウザもあるので、正規の方法で検証することが望ましいです.3.入力モードHTML 5はテキストフィールドにpattern属性を追加した.このプロパティの値は、テキストボックスの値に一致する正規表現です.たとえば、テキストフィールドに数値を入力できるようにするには、次のコードのように制約を適用します.<pre><code><input type="text" pattern="\d+" name="count"/> </code></pre> <br>注意モードの先頭と末尾に^と$記号を付ける必要はありません(すでにあると仮定します).4.認証を無効にするnovalidateプロパティを使用すると、フォームに検証を行わないことを通知できます.<pre><code><form method="post" action="signup.php" novalidate=""> <!--这里是表单元素--> </form> </code></pre> <br>jsではこの値を設定ことができ、この値がtrueである場合、存在しない場合false例:documentである.forms[0].novalidate = true <br>選択ボックススクリプト<br>選択ボックスは、要素と作成されます.独自の属性と方法があります.add(newOption,relOption):コントロールに新しい要素を挿入し、その位置は関連項目(relOption)の前に2.Multiple:ブール値は、複数の選択が許可されているかどうかを示します.htmlのmultipleプロパティに等価です.3.options:コントロール内のすべての要素のHTML Collection 4.remove(index):所定の位置を除去するオプション5.selectedIndex:0の選択項目に基づくインデックスで、選択項目がない場合は-1の値となり、複数選択をサポートするコントロールでは、選択項目の1番目の項目のインデックス6のみが保存されます.size:選択ボックスに表示される行数;htmlのsizeプロパティ選択ボックスに等価なvalueプロパティは、現在の選択項目によって決定され、対応するルールは次のとおりです.選択したアイテムがない場合は、選択ボックスのvalueプロパティに空の文字列が保存されます.選択項目が1つある場合、選択ボックスvalueの値は選択項目valueの値3になります.選択中の項目があるが、その項目のvalue値がない場合、選択ボックスvalueの値はその項目のテキスト4に等しい.複数の選択項目がある場合、選択ボックスvalueの値は、前の2つのルールに従って最初の選択項目の値をselectに取得する、データへのアクセスを容易にするために、以下の属性1が定義.index:現在のオプションのoptionsセットのインデックス2.Label:現在のオプションのラベル;htmlに等価なlabel特性3.selected:現在のオプションが選択されているかどうかを示すブール値.このプロパティをtrueに設定すると、現在のオプションを選択できます.text:オプションのテキスト5.value:オプションの値(htmlのvalueプロパティと等価)最後に、選択ボックスのchangeイベントが他のフォームフィールドのchangeイベントによってトリガーされる条件とは異なることに注意してください.他のフォームフィールドのchangeイベントは、値が変更され、現在のフィールドからフォーカスが離れたときにトリガーされ、選択ボックスのchangeイベントはオプションが選択されている限りトリガーされます.