この記事では、参照用のフォームイベントを処理するためのJavaScriptの一般的な方法を共有しています。特定のコンテンツは次のとおりです
1.フォームオブジェクトにアクセスする一般的な方法：
①：<form>要素のID属性に従って。
var myform = document.getElementById（ "myformid"）; // myformidは<form>要素のIDです。
②：<form>要素の名前属性に従って。
var myform = document.forms ["myformname"]; // myformNameは<form>要素の名前です。
③：フォーム名を直接使用して、フォームにアクセスします。
var myform = document.myformName; // myformNameは<form>要素の名前です。
2。フォームの一般的なイベント：
submitイベント： 「送信」ボタンをクリックすると、このイベントがトリガーされ、フォームの提出を防ぐ場合があります。例：フォームの検証。
onchangeイベント：このイベントは、ユーザーがコンテンツを変更し、テキストボックスがフォーカスを失ったときにトリガーされます。
例：フォームの提出
フロントデスクインターフェイス：
前景インターフェイスコード：
<form name = "myform" action = "javascript：alert（ '正常に登録！'）;" method = "post" onsubmit = "return yanzheng（）;"> <table> <tbody> <tr> <td> username：</td> <td> <input name = "username" id = "username" type = "text"/> </td> <td align = "左"> </td> </tr> <tr> <td>パスワード：</td> <td> <入力id = "password" passwordLeave（） "" type = "password"/> </td> <td align = "left"> <p style = "color：＃ff0000">* <入力id = ""タイプ= "ボタン" <入力ID = "button2" type = "button" value = "medium" style = "background-color：＃ff0000"/> <入力id = "button3" button = "button" value = "strong" stiled = "background-color：＃ff0000"/> <ラベルID = "lavel"> </label> </p> </td> <tr <tr <td> <td> <td> <td> id = "age" type = "text"/> </td> <td> <input id = "age" type = "text"/> </td> <td> <p style = "color：＃ff0000">*</p> </td> </tr> <tr> <td> gender：</td> <td> <input "pise" pise "pish" pish "pish" pish "pish" pise "男性<入力name = "sex" type = "radio" value = "女性"/>女性</td> <td> align = "left"> <p style = "color：＃ff0000">*</p> </td> </tr> <tr <tr> <tr> <tr> <tr <tr <td> Value = "Entertainment"/> Entertainment <入力タイプ= "チェックボックス" name = "content" value = "Education"/> Entertainment </td> <td align = "left"> <p style = "color：＃ff0000">*</p> </td> </tr> <tr> <td>教育：</td> <オプション値= "2">シニアスクール</option> <option値= "3">大学</option> <option value = "4">大学</option> </select> </select> </td> <td align = "left"> <p style = "color：＃ff0000">*</p> </td> </td </td> </td> <td> <td> <td> size = "6" multiple = "multiple"> <option value = "1"> basketball </option> <option value = "2"> football </option> <option value = "3"> bolleball </option> <option value = "4"> lunning </option> <"5"> hilling </option> <option> <option value = "6" style = "color：＃ff0000">*</p> </td> </tr> <tr> <td> <input id4 "button4" type = "" onclick = "checkinfo（）" value = "view information"/> </td> <td> <td> <inputタイプ= "noct" name = "tijiao" "/td </td> name = "tijiao" value = "Register"/> </td> <td> <input Type = "reset" name = "reset" value = "reset"/> </td> </tr> </tbody> </form> </form> </form
JSスクリプト：
<script type = "text/javascript"> function yanzheng（）{var b; var a = document.getElementById（ "username"）; // get username値var p = document.getElementById（ "Password"）; //パスワード値を取得var age = myform.age.value; //年齢値を取得するif（a.value.length <5 || a.value.length> 10）{alert（ "入力したユーザー名は誤った形式！"）; falseを返します。 } else if（p.value.length <5）{alert（ "パスワードの長さは5未満！"）; falseを返します。 } else if（！checkage（age））{return false; } else {return true; }} function Checkage（a）{//年齢var ch、age; for（var i = 0; i <a.length; i ++）{ch = a.charat（i）; if（ch <"0" || ch> "9"）{alert（ "年齢オプションに番号を入力してください！"）; falseを返します。 }} age = parseint（a）; if（age <10 || age> 100）{alert（ "年齢は真実ではない！"）; falseを返します。 } trueを返します。 } function checkinfo（）{//すべての情報を表示var username = myform.username.value; // get username var password = myform.password.value; //パスワードを取得var age = myform.age.value; // get age var sex = myform.sex; //性別var osex = ""を取得します。 //性別var content = myform.contentを取得するオプションを設定します。 //コンテンツを取得するvar ocontent = ""; //コンテンツを取得するオプションを設定するvar eduleave = myform.edu_level; //教育var oedu = ""; //教育を取得するオプションを設定するvar intersent = myform.like; //フォーム趣味var var like = ""; //趣味のオプションを取得する変数を設定します（var i = 0; i <sex.length; i ++）{// gender if（sex [i] .checked）{osex = sex [i] .value; }} for（var i = 0; i <content.length; i ++）{// content if（content [i] .Checked）{ocontent += content [i] .value +""; }} for（var i = 0; i <eduleave.length; i ++）{// Educational if（eduleave.selectedindex> = 0）{oedu = eduleave.options [eduleave.selectedindex] .text; }} for（var i = 0; i <intersent.length; i ++）{//趣味if（intersent.options [i] .selected）{olike += intersent.options [i] .text +""; }} alert（ "ユーザー名は次のとおりです。" + username + "/nパスワードは：" + password + "/n age is：" + age + "/nジェンダーです。 } function passwordLeave（）{var passwordLeavel = myform.password.value; if（passwordLeavel.length == ""）{document.getElementById（ "button1"）。style.display= "none"; document.getElementById（ "button2"）。style.display = "none"; document.getElementById（ "button3"）。style.display = "none"; } else {if（passwordLeavel.length <= "5"）{document.getElementById（ "button1"）。style.display = ""; document.getElementById（ "button2"）。style.display = "none"; document.getElementById（ "button3"）。style.display = "none"; } else if（passwordLeavel.length <= "10"）{document.getElementById（ "button1"）。style.display = ""; document.getElementById（ "button2"）。style.display = ""; document.getElementById（ "button3"）。style.display = "none"; } else {document.getElementById（ "button1"）。style.display = ""; document.getElementById（ "button2"）。style.display = ""; document.getElementById（ "button3"）。style.display = ""; }}} function startbody（）{document.getElementById（ "button1"）。style.display= "none"; document.getElementById（ "button2"）。style.display = "none"; document.getElementById（ "button3"）。style.display = "none"; } </script>このケースは、ほんのわずかな一般的な慣行であり、テクノロジーを伴うものではありませんが、次回の使用の利便性のためだけです。
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。