質問：入力を送信した後に確認する代わりに、フォームを入力直後に確認する方法は非常に不便です（オンラインで検索は曖昧または不完全です...）
方法：これを考慮して、Xiaoke、Shuishanqi、コードを完成させ、Xiaokeの個人的な理解（表記）を追加します。退屈を避けるのは逃亡者だけです。あらゆる種類のヒーローを批判して修正してください...（著者、Xiexieに注意してください） - テーブルテーブルフォームバージョン、そして将来jQueryバージョンがあります...
それがあなたに役立つなら、それを試してみてください（o）〃ao〜
スクリーンショット：
コード：
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title>ユーザー登録</タイトル> <！ type = "text/javascript"> //ユーザー名関数Checkuse（）のタイムリーな確認{//各関数のチェック変数を定義することは、フォームが送信された後に各関数が1つずつ合格するかどうかを確認できることです。 （次と同じ）varチェック。 var username = document.getElementById（ "username"）。value; if（username.length> 18 || username.length <6）{alert（ "ユーザー名入力は違法です、再入力してください！"）; //これはとても素晴らしいです。ここに間違った場所に入ったので、理論的には、もちろんここに入り続ける必要があります。 （ここでフォーカスを取得し続けてください！）document.getElementById（ "username"）。focus（）; check = false; } else {document.getElementById（ "checktext1"）。innerhtml = "*ユーザー名は6-18ビット文字√"; check = true; } return check; } //正規式を使用して、パスワードが関数を満たしているかどうかを判断しますcheckpwd（）{var check; var reg = /[^a-za-z0-9 _]+ /; var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /; var password = document.getElementById（ "Password"）。value; if（password.length <6 || password.length> 18 || regs.test（password））{alert（ "パスワード入力は違法です、再入力してください！"）; document.getElementById（ "Password"）。focus（）; check = false; } else {document.getElementById（ "CheckText2"）。innerhtml = "*パスワードは6〜18文字で構成され、文字、数字、句読点√"を含む必要があります。 check = true; } return check; } //パスワードが一貫していないかどうかを確認します！関数checkpwdc（）{var check; var password = document.getElementById（ "Password"）。value; var pwdc = document.getElementById（ "pwdc"）。value; if（password！= pwdc）{alert（ "パスワードが入力されたときにパスワードが一貫していない場合は、再入力してください！"）; document.getElementById（ "pwdc"）。focus（）; check = false; } else {document.getElementById（ "checktext3"）。innerhtml = "*もう一度パスワードを入力してください√"; check = true; } return check; } // function checkut（）{var check;を送信するときにユーザーカテゴリを確認します。 if（document.getElementById（ "seluser"）。selectedindex == 0）{alert（ "ユーザータイプを選択してください！"）; document.getElementById（ "seluser"）。focus（）; check = false; } else {document.getElementById（ "checktext4"）。innerhtml = "*ユーザータイプ√"; check = true; } return check; } // function checkgender（）{var check; var gender = ""; // sex var sex = document.getelementsbyname（ "sex"）ですべてのタグを取得します。 //これらのタグは、sex for（var i = 0; i <sex.length; ++ i）{// sexが選択されている場合、（sex [i] .checked）gender = sex [i] .value; } if（gender == ""）{alert（ "性別を選択してください！"）; check = false; } else {document.getElementById（ "checktext5"）。innerhtml = "*性別を選択してください"; check = true; } return check; } //生年月日の日付をタイムリーに確認checkdate（）{var check; if（document.getElementById（ "txtdate"）。value == ""）{alert（ "生年月日に記入してください！"）; document.getElementById（ "txtdate"）。focus（）; check = false; } else {document.getElementById（ "checktext6"）。innerhtml = "*生年月日を選択してください"; check = true; } return check; } //興味と趣味をタイムリーに検証する機能checkhobby（）{var check; var Hobby = 0; // objnumはすべての入力タグです。ホビーvar objnum = document.getElementsbyname（ "hobby"）; //すべての趣味タグを（var i = 0; i <objnum.length; ++ i）{//趣味のタグが選択されているかどうかを判断します（objnum [i] .checked == true）趣味++; } //選択されたホビータグがある場合if（bobby> = 1）{document.getElementById（ "checktext7"）。innerhtml = "*趣味√";を選択してください。 check = true; } else {alert（ "趣味に記入してください！"）; check = false; } return check; } //正規表現検証電子メール（タイムリー）function checkmail（）{var check; //電子メールの正規表現var e1 = document.getElementById（ "email"）。value.indexof（ "@"、0）; var e2 = document.getElementById（ "email"）。value.indexof（ "。"、0）; if（email == "" ||（e1 == -1 || e2 == -1）|| e2 <e1）{alert（ "e_mail input error！"）; document.getElementById（ "email"）。focus（）; check = false; } else {document.getElementById（ "checktext8"）。innerhtml = "*一般的に使用される電子メールを入力してください。パスワード√"; check = true; } return check; } //自己導入関数のタイムリーな検証CheckIntro（）{var check; var intro = document.getElementById（ "introduly"）。value; if（intro.length> 100）{alert（ "単語数が制限を超えている！"）; check = false; } else {document.getElementById（ "checktext9"）。innerhtml = "* 100ワードに制限"; document.getElementByID（ "CheckText9"）。focus（）; check = true; } return check; } //すべての検証は、フォームを送信するときに実行されます（確認が失敗した場合、フォームの提出を防ぐためにfalsに戻ります）返品チェック。 } </script> </head> <body> <！ - <form action = "ジャンプページ" method = "get" | "form name name"ターゲット= "open" enctype = "multipart/form-data"> - > <！ - onsubmit（）関数は、戻り値が真の場合にフォームを提出します。 - > <form action = "＃" method = "get" onsubmit = "return check（）"> <fieldset> <legend>フォームのタイムリーな検証の小さな例</legend> <table align = "left" style = "background-image：url（ 'img/4.jpg'）;" > <tr> <td> username：</td> <td> <入力タイプ= "text" name = "username" id = "username" onchange = "checkuse（）"/> </td> <td id = "checktext1">*ユーザー名は6-18文字</td> </td> </tr < <！ - オンチェンジイベントハンドラー：フォーム要素がフォーカスを取得し、コンテンツが変更されたときにトリガー - > <！ - 以下は同じです - > <tr> <td>パスワード：</td> <td> <td> <input type = "password" name "name" id "id" = "onchange" onchange = "checkpwd（）"/> </td> <td id = "check of" and punctuation marks</td> </tr> <tr> <td>Confirm password:</td> <td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td> <td id="checktext3">* Please enter your password again</td> </tr> <tr> <td>User type: </td> <td> <id = "seluser" onblur = "checkut（）"> <option name = "seluser" value = "0"> </option> <option name> <option name = "seluser" value = "1"> admin </option> <option name = "seluser" value = "2">オプションタイプ</td> </tr> <tr> <td>性別：</td> <td> <入力タイプ= "Radio" value = "1" name = "sex" onchange = "checkgender（）"/> male <input type = "radio" value = "2" name = "sex" onchange = "checkender（）性別</td> </tr> <tr> <td>生年月日：</td> <td> <入力タイプ= "date" name = "date" id = "txtdate" onblur = "checkdate（）"/> </td> <td id = "checktext6">*出生日を選択してくださいtype = "Checkbox" name = "Hobby" value = "読み取り" onchange = "checkhobby（）"> reading <入力タイプ= "name" hobby "value =" music "onchange =" checkhobby（） "> checkhobby（）"> "checkhobby（）"> "input type =" checkbox "name =" hobby "value =" sports "checktext =" "> sports </td>>>>"趣味</td> </tr> <ttr> <td>メール：</td> <td> <入力タイプ= "テキスト" name = "email =" email "id =" email "onchange =" checkemail（） "/> </td> <td id =" checktext8 ">* </td> <td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">This is a self-introduction...</textarea></td> <td id="checktext9">* Limited to 100 words</td> </tr> <tr> <td colspan="2" align="center"> <input type = "submit" name = "submit" "value =" submit "/> <入力タイプ=" reset "name =" reset "/>> </td> </tr> </table> </fieldset> </form> </body> </html> </html>CSSスタイル：
入力：Focus、Textarea：Focus {Border：1PX Solid＃F00;背景：#FCC; } textarea {width：230px;高さ：50px; } body {font-size：15px; /*フォントスタイル*/フォントファミリー：Microsoft Yahei; }選択オプション{font-size：10px;フォントファミリー：Microsoft Yahei; }上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。