Ini bukan verifikasi latar belakang yang sangat rumit dan ekspresi reguler JavaScript. Saya baru saja memperkenalkan teknologi ini secara singkat, penerimaan latar belakang sederhana dan melompat, dan hanya memahami cara memverifikasi. Saya akan terus menulis blog untuk teknik tertentu nanti. Saya masih belajar.
Verifikasi bentuk verifikasi 1-simple
Untuk verifikasi sederhana, nama pengguna harus ABCD, dan panjang kata sandi harus lebih besar dari atau sama dengan 6
Kemudian, berdasarkan data yang dimasukkan oleh pengguna, prompt diberikan kemudian.
Demo Kode:
<html><head><title>DHTML technology demonstration---form verification</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script>function checkUserName(){//alert("aa");//Test whether this loss of focus monitoring works var oUserNameNode = Document.getElementsbyName ("UserName") [0]; var name = ousernamenode.value; // Nilai dari tipe ini = "Teks" Nilai adalah karakter dalam kotak // di masa depan, ketika ada latar belakang, data "ABCD" harus diminta dari latar belakang melalui Ajax Technology // Di sini kita hanya melakukan demonstrasi sederhana - ABCD "harus diisi dari latar belakang melalui Ajax Technology // Di sini kita hanya melakukan demonstrasi sederhana - ABCD - abcdif (name == "abcd") {document.geteLementById ("usernamespan"). innerHtml = "nama pengguna benar" .fontColor ("green");} else {document.geteLementById ("usernamespan"). innerHtMl = "username error" checkpwd () {var ouserpwdnode = document.geteLementById ("pwd") [0]; var pwd = oouserpwdnode.value; if (pwd.length> = 6) {document.geteLementById ("userpwdspan"). innerhtml = "formater =" kata sandi = "kata sandi itu. persyaratan ".fontColor (" green ");} else {document.geteLementById (" userpwdspan "). innerhtml =" Panjang kata sandi harus lebih besar dari atau sama dengan 6 ".fontColor (" merah "); }} </script> </head> <body> <orm> <!-Onblur menembak ketika objek kehilangan fokus input. -> Nama pengguna: <input type = "text" name = "username" oNblur = "checkUserName ()"/> <span id = "usernamespan"> </span> <br/> <br/> <!-untuk memperjelas, kata sandi juga digunakan sebagai tipe = "teks" di sini. Faktanya, kata sandi tipe = "kata sandi" harus digunakan -> kata sandi: <input type = "text" name = "pwd" onsblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> </form> </body> </ html>360 Browser 8.1 Hasil Demonstrasi:
Nama pengguna tidak mematuhi aturan:
Kata sandi tidak mematuhi aturan:
Verifikasi Formulir Pendaftaran 2 - Ekspresi Reguler
Demo Kode:
<html> <head> <title> DHTML Teknologi Demonstrasi --- Verifikasi formulir pendaftaran-Menggunakan ekspresi reguler di JS </itement> <meta http-equiv = "tipe konten" content = "text/html; charset = utf-8"> <script type = "text/javascript"> function function (fcript tipe = "Text/JavaScript"> Function function (script type/javaScript "> function function (script type/javaScript"> function function (script type/javascript " document.geteLementsbyName ("nama pengguna") [0]; var username = ousernamenode.value; // Gunakan tes reguler var reg = baru regexp ("[az] {4}", "i"); // Tidak apa-apa untuk memasukkan 4 surat yang lebih rendah, catat bahwa kutipan ganda dari "i" tidak dapat dihilangkan/. RegExp("^[az]{4}$","i");//It only contains 4 consecutive letters, note that the double quotes in "i" cannot be omitted //^ means the start $ means the end var oUserNameSpan = document.getElementById("userNameSpan");//alert(reg.test(userName)); if (reg.test (username)) {ousernamespan.innerhtml = "nama pengguna diformat dengan benar" .fontColor ("green");} else {ousernamespan.innerHtml = "format username </. Format </. di js-> <script type = "text/javascript"> // var reg =/^[0-9] {6} $/; // Metode satu var reg = regexp baru ("^[0-9] {6} $"); // Metode dua var str = "123456"; var bres = reg.test (str); // 111 menggunakan metode dalam objek ekspresi reguler untuk verifikasi --- hanya dapat digunakan untuk menilai apakah kecocokan cocok. Fungsi ini mirip dengan metode kecocokan () di kelas string di java // alert (brees); // true // 222 menggunakan metode dalam objek string untuk pengujian reguler ---- fungsi lebih kuat, mirip dengan alat pencocokan di java var res = str.match (reg); // hasil pencocokan disimpan dalam res (adalah array). Jika tidak ada kecocokan yang tercapai, res nol. // alert (res); // 123456 // Array yang dikembalikan dengan metode pencocokan memiliki tiga properti: input, indeks dan lastIndex. // ★ Sedikit detail --- Saat menggunakan metode RegExp () baru, karakter khusus harus diloloskan // var reg2 =/^/d {6} $/; // "/" Tidak perlu melarikan diri var reg2 = regexp baru ("^/d {6} $"); // ※※ Perhatikan bahwa "/" untuk melarikan diri // ▲ambat kehilangan fokus input. -> Nama pengguna: <input type = "text" name = "username" oNblur = "checkUserName ()"/> <span id = "usernamespan"> </span> </form> </body> </html>360 Browser 8.1 Hasil Demonstrasi:
Sertakan 4 surat berturut -turut.
Verifikasi formulir pendaftaran dan mengontrol verifikasi front-end pengajuan:
Lokasi Pembuatan File Kode:
Demo Kode:
3Form3.html
<html> <head> <title> DHTML Teknologi Demonstrasi --- Verifikasi dan Kontrol Pengajuan Pendaftaran Formulir-Front-End Verifikasi </title> <meta http-equiv = "tipe konten" content = "text/html; charset = UTF-8"> <script type = "teks/javascript"> Function chuleNEn =) {script type = "JavaScript"> Function function = function = funche = fcript = "JavaScript"> function fcuscern (script type/javaScript "> function foucern"> function foucern "> function fcript/javaScript"> function fcript/javaScript "> function"> document.geteLementsbyName ("nama pengguna") [0]; var username = ousernamenode.value; // Gunakan verifikasi reguler var reg = baru regexp ("[az] {4}", "i"); // Tidak apa-apa untuk memasukkan 4 huruf yang tidak berurutan, harap dicatat bahwa quotes ganda "i" tidak dapat dikeluarkan ommited "i tidak dapat ommited o" tidak dapat dikeluarkan ommited o "i tidak dapat dimasukkan ke atas/. Regexp ("^ [az] {4} $", "i"); // Ini hanya berisi 4 huruf berturut -turut, harap dicatat bahwa kutipan ganda dalam "i" tidak dapat dihilangkan //^ berarti awal $ berarti var ousernamespan = document.getelementbyid ("usernamespan"); if (reg.test (nama pengguna)) {ousernamespan.innerhtml = "format nama pengguna benar" .fontcolor ("green"); return true;} else {ousernamespan.innerHtml = "format kesalahan username" .fontColor ("red"); return false; }} function checkpwd () {var ouserpwdnode = document.geteLementsbyname ("pwd") [0]; var pwd = ouserpwdnode.value; var reg2 = baru Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.geteLementById ("userpwdspan"). Return = "format kata sandi memenuhi persyaratan" .fontColor ("green"); return = " true;} else {document.geteLementById ("userpwdspan"). innerHtml = "Panjang kata sandi harus 6-9 digit atau underscore" .fontColor ("merah"); return false;} function function () {if need (if if () Di Sini. Return true;} else {return false;}} </script> </head> <body> <!-Kontrol pengiriman formulir dengan mendaftarkan respons acara OnSubmit. Jika pengembalian salah, itu tidak akan dikirimkan, dan return true akan diserahkan. Jika acara OnSubmit tidak terdaftar, itu akan dikembalikan Trueonsubmit yang dipicu ketika formulir akan dikirimkan. <Form Action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return true;">-> <form Action = "/mydhtmlproj/servlet/regservlet" onsubmit = "Usnuser ();"> nama pengguna: <input type = "Text" name = "USERN (); id = "usernamespan"> </span> <!-Demi kejelasan, kata sandi juga digunakan di sini. Faktanya, kata sandi tipe = "kata sandi" harus digunakan-> kata sandi: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> <input type = "kirim" value = "pendaftaran" // </span> <br/formulir <hr/formulir 2. Tombol-> <bentuk id = "userInfo" action = "/dHtmlproj/servlet/regservlet"> Nama pengguna: <input type = "text" name = "username" oNblur = "checkusername2 ()"/<span id = "usernamespan2"> </span> <br/> kata sandi: <input = "" name " OnBlur = "checkPwd2 ()"/> <span id = "userpwdspan2"> </span> <br/> </form> <input type = "tombol" value = "daftarkan" ontClick = "mysubmit ()"/<script type = "text/javascript"> function mysubmit () {) <skrip = "text/javaScript"> function mysubmit () {) document.geteLementById ("userInfo"); if (checkUserName2 () && checkpwd2 ()) {oformnode.submit (); // Kirim Kirim formulir. }}function checkUserName2(){var oUserNameNode = document.getElementsByName("userName")[1];var userName = oUserNameNode.value;//Use regular test var reg = new RegExp("[az]{4}","i");//It is OK to include 4 consecutive letters, please note that the double quotes of "i" cannot be omitted // i --- berarti mengabaikan huruf besar dan kecil // var regg = regexp baru ("^ [az] {4} $", "i"); // Ini hanya berisi 4 huruf berturut-turut, harap dicatat bahwa kutipan ganda dalam "i" tidak dapat dihilangkan //^ berarti mulai $ berarti end var ousernamespan = document.geteLementById ("usernamespan2"); if (reg.test (username)) {ousernamespan.innerhtml = "format nama pengguna benar" .fontcolor ("green"); return true;} else {ousernamespan.innerhtml = "fiSername; falure adalah falure {ousernamespan.innerhtml =" format fister "oUsernamespan.innerhtml =" fiSername; "falure" oUsernamespan.innerhtml = "fiSername; fiSerName adalah ubernam." }} fungsi checkpwd2 () {var ouserpwdnode = document.geteLementsbyname ("pwd") [1]; var pwd = ouserpwdnode.value; var reg2 = baru Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.geteLementById ("userpwdspan2"). Return = "format kata sandi memenuhi persyaratan" .fontcolor ("green"); return = "kata sandi memenuhi persyaratan". true;} else {document.geteLementById ("userpwdspan2"). innerHtml = "Panjang kata sandi harus 6-9 digit atau garis bawah" .fontcolor ("merah"); kembalikan false;}} </script> </body> </html>show.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transisi // en "> <html> <head> <title> Ini adalah halaman setelah pendaftaran </iteme> </head> <body> <%out.println (request.getAttribute (" uname ")); out.println (request.getattribute (" pwd "));%> <%untuk (int i = 0; %> <div> selamat datang </div> < %// Ini dapat menulis kode html di atas} %> </body> </html>Regservlet.java
Ini adalah servlet baru.
Kami akan secara otomatis mencocokkan web.xml
Paket cn.hncu.user; impor java.io.ioException; impor java.io.printwriter; import javax.servlet.servletException; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservlet; javax.servlet.http.httpservletResponse; kelas publik Regservlet memperluas httpservlet {public void doGet (httpservletRequest, httpservletResponse response);} publicpsception, ioException {dopost (permintaan, respons); HttpservletResponse response) melempar servletException, ioException {request.setcharacterencoding ("UTF-8"); // Atur encoding string name = request.getParameter ("Username"); // Username adalah atribut nama dari input dalam bentuk yang diajukan 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"). Maju (permintaan, respons); // output, panduan ke halaman lain untuk ditampilkan}}Web.xml
<? Xml Version = "1.0" encoding = "UTF-8"?> <Web-app Versi = "2.5" xmlns = "http://java.sun.com/xml/ns/javaee" xmlns: xsi = "http:/www.w3.org/2001 =" http:/www.w3.org/200 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>This is the description of my J2EE component</description><display-name>This is the display name of my J2EE component</display-name><servlet-name>RegServlet</servlet-name><servlet-class>cn.hncu.user.RegServlet</servlet-class></servlet><servlet-mapping><servlet-name>RegServlet</servlet-name><url-pattern>/servlet/RegServlet</url-pattern></servlet-mapping> <creendaking-Film-list> <creendak-file> index.jsp </welcome-file> </celcome-file-list> </web-app>
360 Browser 8.1 Gambar demo:
Ketika format diisi dengan benar, klik tombol pendaftaran dan secara otomatis melompat ke halaman lain.
Ketika ada kesalahan format, mengklik tombol pendaftaran tidak akan merespons.
Verifikasi formulir pendaftaran dan mengontrol versi final dari verifikasi front-end:
Demo Kode:
<html> <head> <title> DHTML Teknologi Demonstrasi --- Verifikasi dan Kontrol Pengajuan Pendaftaran Formulir-Front-End Verifikasi-Versi Final </iteme> <meta http-equiv = "content-type" content = "Text/html; charset = UTF-8"/<script type = "Text/JAVASCRIPT"> Periksa (Nama, Reg, Spanid, Okinfo, errinfo) {var value = document.getElementsbyname (name) [0] .Value; // Gunakan verifikasi reguler var ospannode = document.getElementById (spanid); if (reg.test (value)) {ospannode.innerHtml = okinfo. true;} else {ospannode.innerHtml = errinfo.fontcolor ("red"); return false;}} function checkUserName () {var reg = baru regexp ("[az] {4}," i "); // caneed 4 letter berturut -turut, perhatikan bahwa {4}", "i"); // Caneed 4 Letters berturut -turut, perhatikan bahwa Double Quents in "di" i ") periksa ("nama pengguna", reg, "usernamespan", "usernamespan", "format nama pengguna benar", "format nama pengguna salah");} function checkpwd () {var reg = retexp baru ("^[// w // d] {6,9} $"); cek pengembalian ("pw [// w // d] {6,9} $"); cek pengembalian ("pw [// w/d] {6,9} $"); cek pengembalian ("pw [// w/d] {6,9} $"); cek pengembalian ("pw [// w/d] {6,9} $"); cek pengembalian ("PW", "" "" "" "" "" "" "" "" "" "" "pWD" UUSPAN, "" " persyaratan "," Panjang kata sandi harus 6-9 digit atau underscore ");} function checkpwd2 () {var flag; var pwd = document.getElementsbyname (" pwd ") [0] .value; var pwd2 = document.getElementsbyName (" pwd2 ") [0]. document.geteLementById ("userpwd2span"); if (pwd == pwd2) {ospannode.innerHtml = "dua kata sandi konsisten" .fontColor ("green"); flag = true;} else {ospannode.innerHtml = "dua kata sandi adalah nonaktif; flag;}function checkMail(){var reg = /^/w+@/w+(/./w+)+$/i;return check("mail",reg,"userMailSpan","Make mailbox format correct","Mailbox format incorrect");}function checkUser(){//Control form submission if(checkUserName() && checkPwd() && checkPwd2() && checkMail ()) {return true;} else {return false;}} </script> </head> <body> <form aksi = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser ();"> USERNAME: <input type = "text" name = "on uSername" OnBl (); "> UserName: <input type =" text "name" onername "on ubbl ();" id = "usernamespan"> </span> <br/> masukkan kata sandi: <input type = "text" name = "pwd" oNblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> Kata sandi: <input type = "teks" nama = "pwd2" onblur = " id = "userpwd2span"> </span> <br/> Alamat email: <input type = "text" name = "mail" onsblur = "checkmail ()"/<span id = "usermailspan"> </span> <br/> <input type = "kirim" nilai = "pendaftaran"> </form> </body>360 Browser 8.1 Hasil Demonstrasi:
Hanya setelah mengisi semua format dengan benar Anda akan merespons jika Anda mengklik tombol pendaftaran.
Setelah mengisi semua format dengan benar, klik halaman setelah mengklik tombol pendaftaran, itu sebenarnya melompat ke halaman show.jsp. (Anda dapat menemukan di mana pun Anda inginkan)
Di atas adalah pengetahuan yang relevan dari ringkasan teknologi formulir (disarankan) dalam JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu!