هذا ليس التحقق من الخلفية المعقدة للغاية والتعبيرات العادية JavaScript. أنا فقط أقدم هذه التكنولوجيا باختصار ، واستقبال في الخلفية البسيطة والقفز ، وفهم فقط كيفية التحقق من ذلك. سأستمر في كتابة المدونات للحصول على تقنيات محددة لاحقًا. ما زلت أدرس.
التحقق من التحقق 1 بوس
للتحقق البسيط ، يجب أن يكون اسم المستخدم ABCD ، ويجب أن يكون طول كلمة المرور أكبر من أو يساوي 6
بعد ذلك ، بناءً على البيانات التي أدخلها المستخدم ، يتم تقديم مطالبة لاحقًا.
رمز العرض التوضيحي:
<html> <head> <title> عرض تقنية DHTML --- التحقق من النموذج </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <script> checkusername () {// alert ("aa") ؛ document.getElementsByName ("اسم المستخدم") [0] ؛ var name = ousernamenode.value ؛ // القيمة من هذا النوع = "text" القيمة هي الحرف في المربع // في المستقبل ، عندما تكون هناك خلفية ، يجب أن تكون البيانات "ABCD" مطلوبة من الخلفية من خلال تقنية Ajax // هنا فقط نفعل عرضًا بسيطًا - الاسم الذي تعبئته. ABCDIF (name == "ABCD") {document.getElementById ("usernamespan"). innerhtml = "username repact" .fontcolor ("green") ؛} else {document.getElementById ("usernamepan"). innerhtml = "username error checkpwd () {var ouserpwdnode = document.getElementById ("pwd") [0] المتطلبات ".fontColor (" Green ") ؛} {document.getElementById (" userPwDspan "). innerhtml =" طول كلمة المرور يجب أن يكون أكبر من أو يساوي 6 ". }} </script> </head> <body> <form> <!-حرائق Onblur عندما يفقد الكائن تركيز الإدخال. -> اسم المستخدم: <type type = "text" name = "username" onblur = "checkuserName ()"/> <span id = "usernamespan"> </span> <br/> <br/> <!-لتوضيح ، يتم استخدام كلمة المرور أيضًا كنوع = "text" هنا. في الواقع ، يجب استخدام كلمة المرور الخاصة بـ type = "password" -> كلمة المرور: <type type = "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 ؛ charset = utf-8" document.getElementsByName ("اسم المستخدم") [0] ؛ var username = ousernamenode.value ؛ regexp ("^ [az] {4} $" ، "i") ؛ // لا يحتوي إلا على 4 أحرف متتالية ، لاحظ أن الاقتباسات المزدوجة في "i" لا يمكن حذفها //^ تعني البداية $ تعني النهاية ousernamespan = document.getElementByid ( if (reg.test (اسم المستخدم)) {ousernamespan.innerhtml = "تم تنسيق اسم المستخدم بشكل صحيح" .fontcolor ("أخضر") ؛} آخر {ousernamespan.innerhtml = "خطأ تنسيق اسم المستخدم" .fontcolor ("red") ؛ التعبيرات في JS-> <script type = "text/javaScript"> // var reg =/^[0-9] {6} $/؛ // الطريقة واحدة var reg = new regexp ("^[0-9] {6} $") ؛ // الطريقة two var str = "123456" ؛ var bres = reg.test (str) ؛ // 111 تستخدم أساليب في كائنات التعبير العادية للتحقق --- فقط للحكم على ما إذا كانت المطابقة متطابقة. تشبه الوظيفة طريقة Matches () في فئة السلسلة في Java // ALERT (BRES) ؛ // TRUE // 222 تستخدم الطرق في كائن السلسلة للاختبار العادي ---- الوظيفة أكثر قوة ، على غرار أداة المطابقة في Java var Res = Str.match (REG) ؛ إذا لم يتم الوصول إلى تطابق ، فإن الدقة لاغية. // ALERT (RES) ؛ // 123456 // الصفيف الذي يتم إرجاعه بواسطة طريقة المطابقة له ثلاث خصائص: الإدخال ، الفهرس و LastIndex. // ★ تفاصيل صغيرة --- عند استخدام طريقة regexp () الجديدة ، يجب أن تفلت أحرف خاصة // var reg2 =/^/d {6} $/؛ // "/" لا حاجة للهروب من var reg2 = new regexp ("^/d {6} $") ؛ // ※※ لاحظ أن "/" للهروب // ▲▲ ▲ الجملة أعلاه خاطئة ويجب كتابتها على النحو التالي: regexp new ("^// d {6} $") الكائن يفقد تركيز المدخلات. -> اسم المستخدم: <type type = "text" name = "username" onblur = "checkuserName ()"/> <span id = "usernamespan"> </span> </pong> </body> </html>360 متصفح 8.1 نتائج التوضيح:
فقط تشمل 4 رسائل متتالية.
التحقق من نموذج التسجيل والتحكم في التحقق من الواجهة الأمامية للتقديم:
موقع إنشاء ملف الرمز:
رمز العرض التوضيحي:
3form3.html
<html> <head> <title> عرض تقنية DHTML --- التحقق والتحكم في تقديم نموذج التسجيل في نهاية المطاف </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8" document.getElementsByName ("اسم المستخدم") [0] ؛ var username = ousernamenode.value ؛ regexp ("^ [az] {4} $" ، "i") ؛ // لا يحتوي إلا على 4 أحرف متتالية ، يرجى ملاحظة أن الاقتباسات المزدوجة في "i" لا يمكن حذفها //^ تعني البداية $ تعني end var ousernamespan = document.getElementByid ("usernamespan") ؛ if (reg.test (username)) {ousernamespan.innerhtml = "format username صحيح" .fontColor ("Green") ؛ إرجاع true ؛} آخر {ousernamespan.innerhtml = "تنسيق خطأ اسم المستخدم" .fontColor ("Red") ؛ إرجاع خطأ ؛ }} وظيفة checkpwd () {var ouserpwDnode = document.getElementSbyName ("pwd") [0] regexp ("^[// w // d] {6،9} $") ؛ if (reg2 true ؛} آخر {document.getElementById ("userpwDspan"). innerhtml = "يجب أن يكون طول كلمة المرور 6-9 أرقام أو سحرية". هنا. return true ؛} else {return false ؛}} </script> </head> <body> <!-التحكم في تقديم النموذج عن طريق تسجيل استجابة حدث OnSubmit. إذا كانت العودة خاطئة ، فلن يتم إرسالها ، وسيتم تقديم Return True. إذا لم يتم تسجيل حدث OnSubmit ، فسيتم إرجاع TrueOnsubmit عندما يكون النموذج على وشك تقديمه. <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return true ؛">-> <form action = "/mydhtmlproj/servlet/regservlet id = "usernamespan"> </span> <!-من أجل الوضوح ، يتم استخدام كلمة المرور أيضًا هنا. في الواقع ، يجب استخدام كلمة المرور الخاصة بـ type = "password"-> كلمة المرور: <type type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> <input type = "prisal" value = "dressistration" // </form> <hr/ الزر-> <form id = "userinfo" Action = "/dhtmlproj/servlet/regservlet"> اسم المستخدم: <input type = "text" name = "username" onblur = "checkusername2 ()"/> <span id = "usernamepan2"> <bord> onblur = "checkpwd2 ()"/> <span id = "userPwDspan2"> </span> <br/> </form> <input type = "button" value = "register" onClick = "mysubmit ()"/> <script type = "text/javaScript"> mysubmit () document.getElementById ("userInfo") ؛ if (checkuserName2 () && checkpwd2 ()) {OforMnode.submit () ؛ // إرسال إرسال النموذج. }} وظيفة checkUserName2 () {var ousernamenode = document.getElementsByName ("اسم المستخدم") [1] ؛ var username = ousernamenode.value ؛ // استخدم اختبار var var = new regexp ( // i --- يعني تجاهل الحالة العلوية والسفلية // var regg = new regexp ("^ [az] {4} $" ، "i") ؛ // أنه يحتوي فقط على 4 أحرف متتالية ، يرجى ملاحظة أن الاقتباسات المزدوجة في "i" document.getElementById ("usernamespan2") ؛ if (reg.test (username)) {ousernamespan.innerhtml = "format username that صحيح" .fontcolor ("green") ؛ return true ؛} ell {ousernamespan.innerhtml = }} وظيفة checkpwd2 () {var ouserpwDnode = document.getElementsByName ("pwd") [1] regexp ("^[// w // d] {6،9} $") ؛ if (reg2 true ؛} آخر {document.getElementById ("userPwDspan2"). innerhtml = "طول كلمة المرور يجب أن يكون 6-9 أرقام أو أكورات سطحية".show.jsp:
<٪@ page language = "java" import = "java.util. Transitional // en "> <html> <head> <title> هذه هي الصفحة بعد التسجيل </title> </head> <body> <٪ out.println (request.getAttribute (" uname ")) ؛ out.println (request.getattribute (" pwd ") ؛ ٪ <٪ (int i = 0 ؛ i <3 ؛ ٪> <viv> مرحبًا </div> <٪ // يمكن أن يكتب هذا الكود html أعلاه} ٪> </body> </html>regservlet.java
هذا هو servlet جديد.
سنقوم تلقائيًا بمطابقة web.xml
package cn.hncu.user ؛ استيراد java.io.ioException ؛ استيراد java.io.printwriter ؛ استيراد javax.servlet.servletexception ؛ استيراد javax.servlet.http.httpservlet ؛ استيراد javax.servlet.http.httpled javax.servlet.http.httpservletresponse ؛ regservlet من الفئة العامة يمتد httpservlet {public void doget (httpservletrequest request ، httpservletponse reske) استجابة) يلقي servletexception ، ioException {request.setcharacterencoding ("utf-8") ؛ // تعيين اسم سلسلة الترميز = request.getParameter ("اسم المستخدم") ؛ request.getParameter ("pwd") ؛ // system.out.println (name) ؛ request.setattribute ("uname" ، "hncu --- استجابة) ؛ // الإخراج ، دليل إلى صفحة أخرى لعرضها}}web.xml
<؟ 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> <servlet> <description> هذا هو وصف مكون J2EE </description> المكون </display-name> <Servlet-Name> regservlet </servlet-name> <Servlet-class> cn.hncu.user.regservlet </revlet-class> </rectlet> <cervlet mapping> <revlet-name> regservlet </servlet-name> <url-pattern>/regservled </url-paltn> <list-file-list> <lispile-file> index.jsp </isplikefile> </iswith-file-list> </bil-app>
360 متصفح 8.1 الصورة التجريبية:
عندما يتم ملء التنسيقات بشكل صحيح ، انقر فوق زر التسجيل ثم القفز تلقائيًا إلى صفحة أخرى.
عندما يكون هناك خطأ في التنسيق ، فإن النقر فوق زر التسجيل لن يستجيب.
التحقق من نموذج التسجيل والتحكم في الإصدار النهائي من التحقق من الواجهة الأمامية:
رمز العرض التوضيحي:
<html> <head> <title> عرض تقنية DHTML --- التحقق والتحكم في تقديم نموذج التسجيل ، فإن الإصدار النهائي-الإصدار النهائي </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> تحقق (الاسم ، Reg ، SpanID ، OkInfo ، errinfo) {var value = document.getElementSbyName (name) [0] .value ؛ true ؛} else {Ospannode.innerhtml = errinfo.fontcolor ("red") ؛ return false ؛}} checkusername () {var reg = new regexp ("[az] {4}" ، "i") ؛ تحقق ("اسم المستخدم" ، reg ، "usernamepan" ، "usernamepan" ، "تنسيق اسم المستخدم صحيح" ، "تنسيق اسم المستخدم خاطئ") ؛ المتطلبات "،" يجب أن يكون طول كلمة المرور 6-9 أرقام أو أسفل النقر ") ؛} checkpwd2 () {var flag ؛ var pwd = document.getElementsByName (" pwd ") [0] document.getElementById ("userpwd2span") ؛ if (pwd == pwd2) {ouspannode.innerhtml = "كلمة مرور متسقة" .fontcolor ("green") ؛ flag = true ؛ flag ؛} دالة checkmail () {var reg = /^/w+@/w+(/./w+)+ $/check check ("mail" ، reg ، "usermailspan" ، "make mailbox format" ، "mailbox format غير صحيح") ؛} checkmail ()) {return true ؛} else {return false ؛}} </script> </head> <body> <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser () ؛ id = "usernamespan"> </span> <br/> أدخل كلمة المرور: <إدخال type = "text" name = "pwd" onblur = "checkpwd () id = "userPwD2Span"> </span> <br/> عنوان البريد الإلكتروني: <input type = "text" name = "mail" onblur = "checkmail ()"/> <span id = "usermailspan"> </span> <br/> <input type = "prident" value = "/form> </html360 متصفح 8.1 نتائج التوضيح:
فقط بعد ملء جميع التنسيقات بشكل صحيح ، سوف تستجيب إذا قمت بالنقر فوق زر التسجيل.
بعد ملء جميع التنسيقات بشكل صحيح ، انقر فوق الصفحة بعد النقر فوق زر التسجيل ، فهو يقفز فعليًا إلى صفحة show.jsp. (يمكنك تحديد موقع أينما تريد)
ما سبق هو المعرفة ذات الصلة بملخص تكنولوجيا النموذج (الموصى بها) في جافا سكريبت المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر إليك في الوقت المناسب!