これは、非常に複雑な背景検証とJavaScriptの正規表現ではありません。このテクノロジー、シンプルなバックグラウンドレセプションとジャンプを簡単に紹介し、それを検証する方法を理解しています。後で特定のテクニックのブログを書き続けます。私はまだ勉強しています。
フォーム検証1-シンプル検証
簡単な確認のために、ユーザー名はABCDでなければならず、パスワードの長さは6以上でなければなりません
次に、ユーザーが入力したデータに基づいて、後でプロンプトが与えられます。
コードデモ：
<html> <head> <title> dhtmlテクノロジーデモンストレーション---フォーム検証</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <スクリプト>関数checkusername（）{// alert（ "aa"）; // document.getElementsByNamame（ "username"）[0]; var name = ousernamenode.value; //このタイプの値= "テキスト"値は、将来のボックスの文字です。 abcdif（name == "abcd"）{document.getElementbyId（ "usernamespan"）。innerhtml = "username recort" .fontcolor（ "green"）;} else {document.getElementByid（ "usernamespan"） ouserpwdnode = document.getElementById（ "pwd"）[0]; var pwd = ouserpwdnode.value; if（pwd.length> = 6）{document.getElementbyId（ "userpwdspan"）要件 ".fontcolor（" green "）;} else {document.getElementById（" userpwdspan "）。 }} </script> </head> <body> <form> <！ - オブジェクトが入力フォーカスを失うと発射されます。 - > username：<input type = "text" name = "username" onblur = "checkusername（）"/> <span id = "usernamespan"> </span> <br/> <br/> <！ - パスワードはタイプ= "テキスト"としても使用されます。実際、type = "password"のパスワードを使用する必要があります - >パスワード：<入力タイプ= "text" name = "pwd" onblur = "checkpwd（）"/> <span id = "userpwdspan"> </span> </form> </body> </html>360ブラウザ8.1デモンストレーション結果：
ユーザー名はルールに準拠していません。
パスワードはルールに準拠していません。
登録フォーム2の検証 - 正規表現
コードデモ：
<html> <head> <title> dhtmlテクノロジーデモンストレーション---登録フォームの検証 - JSでの正規表現の使用</title> <meta http-equiv = "content-type" content = "text/html; document.getElementsByname（ "username"）[0]; var username = ousernamenode.value; //通常のテストvar reg = new regexp（ "[az] {4}"、 "i"）; // 4つの連続した文字を含めることは大丈夫です。 regexp（ "^ [az] {4} $"、 "i"）; // 4つの連続した文字のみが含まれています。「i」の二重引用符は省略できないことに注意してください。 if（reg.test（username））{osernamespan.innerhtml = "ユーザー名は正しくフォーマットされます" .fontcolor（ "green"）;} else {ousernamepan.innerhtml = "username format error" .fontcolor（ "red"）; in js-> <script type = "text/javascript"> // var reg =/^[0-9] {6} $/; // 1つのvar reg = new regexp（ "^[0-9] {6} $"）; //方法2 var str = "123456"; var bres = reg.test（str）; // 111は、検証のために正規表現オブジェクトでメソッドを使用します----一致が一致するかどうかを判断するためにのみ使用できます。関数は、Java // alert（bres）; // true // 222の文字列クラスのMatches（）メソッドに似ています。一致に達していない場合、resはnullです。 // alert（res）; // 123456 //一致方法によって返される配列には、入力、インデックス、およびlastIndexの3つのプロパティがあります。 //★少しの詳細---新しいRegexp（）メソッドを使用する場合、特殊文字を脱出する必要があります// var reg2 =/^/d {6} $/; // "/"逃げる必要はありませんvar reg2 = new regexp（ "^/d {6} $"）; //オブジェクトは入力フォーカスを失います。 - > username：<入力タイプ= "text" name = "username" onblur = "checkusername（）"/> <span id = "usernamespan"> </span> </form> </body> </html>360ブラウザ8.1デモンストレーション結果：
4つの連続した手紙を含めるだけです。
登録フォームの検証と、提出のフロントエンド検証を制御します。
コードファイルの作成場所：
コードデモ：
3form3.html
<html> <head> <title> dhtmlテクノロジーデモンストレーション---登録フォームフロントエンド検証の検証と制御の提出</title> <meta http-equiv = "content-type" content = "text/html; document.getElementsByname（ "username"）[0]; var username = ousernamenode.value; //定期的な検証var reg = new regexp（ "[az] {4}"、 "i"）; // 4つの連続した文字を含めることは大丈夫です。 regexp（ "^ [az] {4} $"、 "i"）; // 4つの連続した文字のみが含まれています。「i」の二重引用符は省略できないことに注意してください。 if（reg.test（username））{osernamespan.innerhtml = "username形式は正しい" .fontcolor（ "green"）; return true;} else {ousernamespan.innerhtml = "username error format" .fontcolor（ "red"）; return false; }} function checkpwd（）{var uouserpwdnode = document.getElementsByname（ "pwd"）[0]; var pwd = ouserpwdnode.value; var reg2 = new regexp（ "^[// w // d] {6,9} $"）; if（reg2.test（pwd））{document.getElementById（ "userpwdspan"） true;} else {document.getElementById（ "userpwdspan"）。innerhtml = "パスワードの長さは6-9桁またはアンダースコアでなければなりません" .fontcolor（ "red"）; return false;}} function checkuser（）{if（checkusname（）&& checkpwd（） return true;} else {return false;}} </script> </head> <body> <！ - OnSubmitイベント応答を登録してフォームの送信を制御します。 falseを返す場合、それは提出されず、return trueが送信されます。 OnSubmitイベントが登録されていない場合、フォームが提出されようとしているときにトリガーされるTrueOnsubmitのreturnです。 <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return true;"> - > <form action = "/mydhtmlproj/regservlet" onsubmit = "return checkuser（）;"> username：<input type = "text" name = "username" "/> <span" id = "usernamespan"> </span> <！ - 明確にするために、パスワードもここで使用されます。実際、type = "password"のパスワードは使用する必要があります - >パスワード：<入力タイプ= "text" name = "pwd" onblur = "checkpwd（）"/> <span id = "userpwdspan"> </span> <br/> id="userinfo" action="/dhtmlProj/servlet/RegServlet" >Username:<input type="text" name="userName" onBlur="checkUserName2()"/><span id="userNameSpan2"></span><br/>Password:<input type="text" name="pwd" onBlur="checkPwd2()"/><span id = "userpwdspan2"> </span> <br/> </form> <入力タイプ= "button" value = "register" onclick = "mysubmit（）"/> <script type = "text/javascript"> function mysubmit（）{var oformnode = document.getElementById（ "userininfo"）; if（checkusername2（）&& checkpwd2（））{oformnode.submit（）; //フォームを送信します。 }} function checkusername2（）{var ousernamenode = document.getelementsbyname（ "username"）[1]; var username = ousernamenode.value; //通常のテストvar reg = new regexp（ "[az] {4}"、 "i"）; // i ---は、高級ケースと小文字を無視することを意味しますdocument.getElementById（ "usernamespan2"）; if（reg.test（username））{ousernamespan.innerhtml = "username形式は正しい" .fontcolor（ "緑"）; }} function checkpwd2（）{var uouserpwdnode = document.getElementsbyname（ "pwd"）[1]; var pwd = ouserpwdnode.value; var reg2 = new regexp（ "^[// w // d] {6,9} $"）; if（reg2.test（pwd））{document.getElementbyId（ "userpwdspan2"） true;} else {document.getElementById（ "userpwdspan2"）。innerhtml = "パスワードの長さは6-9桁またはアンダースコアでなければなりませんshow.jsp：
<％@ page Language = "Java" Import = "Java.util。*" pageEncoding = "utf-8"％> <％@ taglib uri = "http://java.sun.com/jsp/jstl/core"プレフィックス= "C"％> < Transitional // en "> <html> <head> <title>これは登録後のページです</title> </head> <body> <％out.println（request.getAttribute（" uname "）; out.getattribute（" pwd "）;％for（int i = 0; i < ％> <div>ようこそ</div> <％//これは}％> </body> </html>上にHTMLコードを記述できます
regservlet.java
これは新しいサーブレットです。
web.xmlを自動的に一致させます
パッケージcn.hncu.user; Import java.io.ioexception; Import java.io.printwriter; Import javax.servlet.servletexception; Import javax.servlet.httpservlet; Import javax.servlet.http.httptprequest; Import; javax.servlet.http.httpservletResponse; public class regservletはhttpservletを拡張します{public void doget（httpservletrequest request、httpservletresponse応答）応答）servletexception、ioexception {request.setcharacterencoding（ "utf-8"）; // encoding string name = request.getParameter（ "username"）; // usernameは、提出されたフォーム文字列pwd =の入力の名前属性です。 request.getParameter（ "pwd"）; // system.out.println（name）; request.setattribute（ "uname"、 "hncu ---"+name）; request.setattribute（ "pwd"、 "pwd ---"+pwd）; request.getRequestDispatcher（ "/dhtml/6formsubmit/jsps/show.jsp"）。web.xml
<？xml version = "1.0" encoding = "utf-8"？> <web-appバージョン= "2.5" xmlns = "http://java.sun.com/xml/ns/javaee" xmlns：xsi = "http://www.w3.org/2001/xmlschema-instcance" xsi：schemalocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name> </display-name> <description>これは私のj2eeコンポーネント</description-name>の説明です。コンポーネント</display-name> <servlet-name> regservlet </servlet-name> <servlet-class> cn.hncu.user.regservlet </servlet-mapping> </servlet-mapping> <servlet-name> regservlet </servet-name> <url-pattern> <Welcome-FileList> <Welcome-File> index.jsp </welcome-file> </welcome-file-list> </web-app>
360ブラウザ8.1デモ画像：
フォーマットが正しく入力されたら、登録ボタンをクリックして、自動的に別のページにジャンプします。
フォーマットエラーがある場合、[登録]ボタンをクリックすると応答しません。
登録フォームの検証と制御フロントエンド検証の最終バージョン：
コードデモ：
<html> <head> <title> dhtmlテクノロジーのデモンストレーション---登録フォームフロントエンド検証の検証と制御の提出 - ファイナルバージョン</title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script = "text/javascript"> centunts check（name、reg、spanid、okinfo、errinfo）{var value = document.getelementsbyname（name）[0] .value; //通常の検証var osospannode = document.getelementbyid（spanid）; if（reg.test（value））{osospannode.innerhtml = okinfo.fontcolor（ "green"）; true;} else {osospannode.innerhtml = errinfo.fontcolor（ "red"）; return false;}} function checkusername（）{var reg = new regexp（ "[az] {4}"、 "i"）; Check（ "usernamamame"、reg、 "、" usernamamespan "、" usernamamespan "、" usernamamame形式は正しい "、" usernamame形式は正しい "、" usernamam形式は正しい "、" username形式は正しい "、" username形式は正しい "です"、 "username形式は正しい"、 "username形式は正しい"です "です"は間違っている "）;}関数checkpwd（）{var reg = new regexp（"^[// w // d] {6,9} $ "）要件 "、"パスワードの長さは6-9桁またはアンダースコア "でなければなりません"）;} function checkpwd2（）{var flag; var pwd = document.getelementsbyname（ "pwd"）[0] .value; var pwd2 = document.getelementsbyname（ "pwd2"）[0] .Value; document.getElementById（ "userpwd2span"）; if（pwd == pwd2）{osospannode.innerhtml = "2つのパスワードは一貫しています" .fontcolor（ "green"）; flag = true;} flag;} function checkmail（）{var reg = /^/w+@/w+(/./w+)+$/i; return check（ "mail"、reg、 "usermailspan"、 "Make Mailbox Format Correct"、 "Make Mailbox Format Incorrect"）;} function Checkuser（）{//コントロールフォームの場合、フォームChecksismision（） checkmail（））{return true;} else {return false;}} </script> </head> <body> <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser（）;"> username：<input type = "text" name = "username" id = "usernamespan"> </span> <br/>パスワードの入力：<入力タイプ= "text" name = "pwd" onblur = "checkpwd（）"/> <span id = "userpwdspan"> </span> <br/>パスワードの確認：<入力タイプ= "テキストname =" pwd2 " id = "userpwd2span"> </span> <br/>電子メールアドレス：<入力タイプ= "テキスト" name "onblur =" checkmail（） "/> <span id =" usermailspan "> </span> <br/> <入力タイプ=" submit "value ="登録 "> </</body360ブラウザ8.1デモンストレーション結果：
登録ボタンをクリックすると、すべての形式を正しく入力した後にのみ応答します。
すべての形式を正しく入力した後、[登録]ボタンをクリックした後、[ページをクリックします。実際にshow.jspページにジャンプします。 （好きな場所に見つけることができます）
上記は、編集者が紹介したJavaScriptのフォームテクノロジーサマリー（推奨）の関連する知識です。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者は時間内に返信します！