Это не очень сложная проверка фона и регулярные выражения JavaScript. Я просто кратко представляю эту технологию, простой фоновый прием и прыжок, и просто понимаю, как ее проверить. Я буду продолжать писать блоги для конкретных методов позже. Я все еще учусь.
Проверка формы 1-таковая проверка
Для простой проверки имя пользователя должно быть ABCD, а длина пароля должна быть больше или равна 6
Затем, основываясь на данных, введенных пользователем, дается подсказка позже.
Демонстрация кода:
<html> <Head> <tite> Dhtml Technology Demongation --- Проверка формы </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script> function checkusername () {// alert ("aa");//тестирование этого мониторинга фокуса var out our out out out our out our out our out our out out out out out our out out out out out out out out out out out out out out uler document.getelementsbyname ("username") [0]; var name = ousernamenode.value; // Значение этого типа = "Текст" Значение - это символ в коробке // в будущем, когда есть фон, данные «ABCD» должны быть запрошены на фоне технологии Ajax // здесь. abcdif (name == "abcd") {document.getelementbyid ("usermancepan"). innerhtml = "правильное имя пользователя" .fontcolor ("green");} else {document.getElementbyId ("usermanmespan"). innerhtml = "useraname urers" .fontcolor ("Red") CheckPwd () {var outserpwdnode = document.getElementById ("pwd") [0]; var pwd = ouserpwdnode.value; if (pwd.length> = 6) {document.getElementById ("userPwdspan"). Innerhtml = " Требования ".fontColor (" green ");} else {document.getElementById (" userPwdspan "). innerHtml =" Длина пароля должна быть больше или равна 6 ".fontColor (" red "); }} </script> </head> <body> <form> <!-Onblur стреляет, когда объект теряет фокус ввода. -> Имя пользователя: <input type = "text" name = "username" onblur = "checkusername ()"/> <span id = "usernamespan"> </span> <br/> <br/> <!-Чтобы понять, пароль также используется как type = "text" здесь. Фактически, пароль type = "пароль" должен использоваться -> пароль: <input 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"> type = "text/javascript"> function chearcenam document.getElementsbyname ("username") [0]; var username = ousernamenode.value; // Использовать обычный тест var reg = new Regexp ("[az] {4}", "i"); // Это нормально включать 4 последовательных буква Regexp ("^ [az] {4} $", "i"); // Он содержит только 4 последовательных буквах, обратите внимание, что двойные цитаты в «i» не могут быть опущены //^ означает начало $, что означает конечный var outsernamespan = document.getelementbyid ("usermanmespan"); // alert (reg.test (username); if (reg.test (username)) {ousernamespan.innerhtml = «Имя пользователя отформатировано правильно» .fontcolor ("green");} else {ousernamespan.innerhtml = "Ошибка формата имени пользователя". Выражения в JS-> <script type = "text/javascript"> // var reg =/^[0-9] {6} $/; // Метод один var reg = new Regexp ("^[0-9] {6} $"); // Метод два var str = "123456"; var bres = reg.test (str); // 111 использует методы в объектах регулярного выражения для проверки --- может использоваться только для оценки того, совпадает ли совпадение. Функция аналогична методу matches () в классе строки в Java // alert (bres); // true // 222 использует методы в строковом объекте для регулярного тестирования ---- Функция более мощная, аналогичная инструменту сочетания в java var res = str.match (reg); // Результат соответствия сохранен в Res (IS is is is is is is is is is is is is ray). Если совпадение не достигнуто, res является нулевым. // Alert (res); // 123456 // Массив, возвращаемый методом соответствия, имеет три свойства: вход, индекс и LastIndex. // ★ Небольшие детали --- При использовании нового метода regexp () специальные символы должны быть сбежаны // var reg2 =/^/d {6} $/; // "/" не нужно избегать var reg2 = new Regexp ("^/d {6} $"); // ※※ Обратите внимание, что «/» для побега // ▲ письменного предложения. Приведенное выше предложение неверно и должно быть написано как: new Regexp ("^// d {6} $") // alert (reg2.test ("123456"); Объект теряет фокус ввода. -> Имя пользователя: <input type = "text" name = "username" onblur = "checkusername ()"/> <span id = "usernamespan"> </span> </form> </body> </html>360 Браузер 8.1 Демонстрационные результаты:
Просто включите 4 последовательных буквах.
Проверка регистрационной формы и контролируйте проверку представления фронтальной стороны:
Место создания файла кода:
Демонстрация кода:
3form3.html
<html> <Head> <title> DHTML Технология демонстрация технологии --- Проверка и управление представлением регистрационной проверки формы-fron-end </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script-type = "javascript"> functionam 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)) {ousernamespan.innerhtml = "формат имени пользователя правильный" .fontcolor ("green"); return true;} else {ousernamespan.innerhtml = "формат ошибки имени пользователя" .fontcolor ("red"); return false; }} function checkpwd () {var ouserpwdnode = document.getelementsbyname ("pwd") [0]; var pwd = ouserpwdnode.value; var reg2 = new Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userPwdspan"). Innerhtml = "Формат пароля соответствует требованиям" .fontColor ("green"); true;} else {document.getElementById ("userPwdspan"). innerhtml = "Длина пароля должна быть 6-9 цифр или недостатки" .fontcolor ("red"); return false;}} function checkuser () {if (ceckuserme () && checkpd () {//если есть и другие элементы, которые можно написать. здесь. Return true;} else {return false;}} </script> </head> <body> <!-контролировать подачу формы, зарегистрировав ответ события OnSubmit. Если вернуть Fall, он не будет отправлен, и вернуть True будет отправлено. Если событие OnSubmit не зарегистрировано, оно возвращается TrueOnsubmit, запускаемое при подаче формы. <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return true;">-> <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser ();"> username: <input = "text" = "usermantam id = "usernamespan"> </span> <!-ради ясности, пароль также используется здесь. Фактически, пароль type = «пароль» должен использоваться-> Пароль: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> <input type = "Отправить" value = "Регистрация" // <// form> <hr/> <! Кнопка-> <form id = "userinfo" action = "/dhtmlproj/servlet/regservlet"> username: <input type = "text" name = "username" onblur = "ceckusername2 ()"/> <span id = "usernamespan2"> </span> <brbr/> password: <input = "text" name "pwd" = "pwd" = "pwd" = "pwd" = "pwd" = "pwd" = "pwd" </span> <brbr/> password: <input = "" pwd "=" pwd ". onblur = "checkpwd2 ()"/> <span id = "userpwdspan2"> </span> <br/> </form> <input type = "button" value = "onclick =" mysubmit () "/> <script type =" text/javascript "> function mySubmit () {varorOrMnode = = document.getElementById ("userInfo"); if (ceckUsername2 () && checkpwd2 ()) {Oformnode.submit (); // отправить форму. }} function checkUsername2 () {var outsernamenode = document.getelementsbyname ("username") [1]; var username = ousernamenode.value; // Использовать обычный тест var reg = new regexp ("[az] {4}", "i"); // Это в порядке, чтобы включать в себя 4 ateled, пожалуйста, двойная цитата ", пожалуйста, не может быть заметно". // i --- означает игнорирование верхнего и нижнего корпуса // var regg = new regexp ("^ [az] {4} $", "i"); // Он содержит только 4 последовательных буква document.getElementById ("userNamesPan2"); if (reg.test (username)) {ousernamespan.innerhtml = "формат имени пользователя правильный" .fontcolor ("green"); return true;} else {ousernamespan.innerhtml = "username format неверно". }} function checkpwd2 () {var ourserpwdnode = document.getelementsbyname ("pwd") [1]; var pwd = ouserpwdnode.value; var reg2 = new Regexp ("^[// w // d] {6,9} $"); if (reg2.test (pwd)) {document.getElementById ("userPwdspan2"). Innerhtml = "Формат пароля соответствует требованиям" .fontColor ("green"); true;} else {document.getElementById ("userPwdspan2"). innerHtml = "Длина пароля должна быть 6-9 цифр или недостатков" .fontColor ("red"); вернуть 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"%> <! doctpe html public "// w3c // dtdml htm.01. Transitional // en "> <html> <Head> <title> Это страница после регистрации </title> </head> <body> <%out.println (request.getattribute (" uname ")); out.println (request.getattribute (" pwd ");%> <%для (int i = 0; %> <div> добро пожаловать </div> < %// Это может написать HTML -код выше} %> </body> </html>Regservlet.java
Это новый сервлет.
Мы автоматически сопоставляем web.xml
Пакет cn.hncu.user; import java.io.ioexception; import java.io.printwriter; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; импорт javax.servlet.http.httpservlectrequest; javax.servlet.http.httpservletresponse; public class Regservlet расширяется httpservlet {public void Doget (httpservletrequest, httpservletrespons Ответ) Throws ServletException, ioException {request.setcharacterencoding ("utf-8"); // Установить кодирование строки name = request.getParameter ("username"); // Имя пользователя-это атрибут имени ввода в отправленной форме string pwd = request.getParameter ("pwd"); // system.out.println (name); request.setattribute ("uname", "hncu ---"+name); request.setattribute ("pwd", "pwd ---"+pwd); request.getRequestdispatcher ("/dhtml/6formsubmit/josps/jspspatcher ("/dhtml/6formsubmit/jspspatcher ("/dhtml/6formsubmit/jspspatcher ("/dhtml/6formsubmit/jops/jSp Ответ); // Вывод, руководство на другую страницу для отображения}}web.xml
<? xml version = "1.0" Encoding = "utf-8"?> <web-app arser = "2,5" xmlns = "http://java.sun.com/xml/ns/javaee" xmlns: xsi = "http://www.w3.org/2001/xmlschema electan "/www.w3. 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"> функции витрины-name> ></display-name>> servlet> description> это описание моего компонента J2E Компонент </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-maping> <Welcome-file-list> <selcload-file> index.jsp </werveding-file> </wervediefle-file-list> </web-app>
360 Браузер 8.1 Демо -картинка:
Когда форматы заполняются правильно, нажмите кнопку регистрации и автоматически перейти на другую страницу.
Когда есть ошибка формата, нажатие кнопки регистрации не будет отвечать.
Проверка регистрационной формы и контролируйте окончательную версию проверки фронта:
Демонстрация кода:
<html> <head> <tite> DHTML Технологическая демонстрация --- Версия проверки и управления проверкой регистрации FRONT-FRONT-END-Капитальная версия </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javascript"> function Проверьте (name, reg, spanid, okinfo, errinfo) {var value = document.getelementsbyname (name) [0] .value; // Использовать регулярную проверку var ospannode = document.getelementbyid (spanid); if (reg.test (value)) {ospannode.innerhtml = kokinfo.fontcolor (green -return. true;} else {ospannode.innerhtml = errinfo.fontcolor ("red"); return false;}} function checkusername () {var reg = new Regexp ("[az] {4}", "I"); // Содержит 4 засознательных письма, обратите внимание, что двойные цитаты. Check («Имя пользователя», Рег, «пользовательспан», «пользовательспан», «Формат имени пользователя правильный», «Формат имени пользователя неверно»);} function CheckPwd () {var reg = new Regexp («^[// w // d] {6,9} $»); Требования »,« Длина пароля должна быть 6-9 цифр или недостаток »);} функция checkpwd2 () {var flag; var pwd = document.getelementsbyname (" pwd ") [0]. document.getElementById ("userPwd2span"); if (pwd == pwd2) {ospannode.innerhtml = "Два пароли согласованы" .fontcolor ("green"); flag = true;} else {ospannode.innerhtml = "Два пароли не являются флажками. flag;} function checkmail () {var reg = /^/w+@w+(/./w+)+$/i; return check ("mail", reg, "usermailspan", "Make Mailbox Format", "Format Mailbox inforct");} function Checkuser () {// control form upport ifsUseNam checkMail ()) {return true;} else {return false;}} </script> </head> <body> <form action = "/mydhtmlproj/servlet/regservlet" onsubmit = "return checkuser ();"> имя пользователя: <input = "text" = "unsemanme" on glabrernam id = "usernamespan"> </span> <br/> Введите пароль: <input type = "text" name = "pwd" onblur = "checkpwd ()"/> <span id = "userpwdspan"> </span> <br/> подтвердить пароль: <input = "text" name = "pwd2" onblur = " id = "userpwd2span"> </span> <br/> Адрес электронной почты: <input type = "text" name = "mail" onblur = "checkmail ()"/> <span id = "usermailspan"> </span> <br/> <input type = "value =" Registration "> </form> </body> </html>360 Браузер 8.1 Демонстрационные результаты:
Только после правильного заполнения всех форматов вы ответите, если нажмите кнопку регистрации.
После правильного заполнения всех форматов нажмите на страницу после нажатия кнопки регистрации, она фактически переходит на страницу Show.jsp. (Вы можете найти, где захотите)
Выше приведено соответствующее знание технологии формы формы (рекомендуется) в JavaScript, введенном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя!