This is not a very complicated background verification and JavaScript regular expressions. I just briefly introduce this technology, simple background reception and jump, and just understand how to verify it. I will continue to write blogs for specific techniques later. I am still studying.
Form Verification 1-Simple Verification
For simple verification, the user name must be abcd, and the password length must be greater than or equal to 6
Then, based on the data entered by the user, a prompt is given later.
Code demo:
<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;//The value of this type="text" value is the character in the box//In the future, when there is a background, the data "abcd" should be requested from the background through ajax technology// Here we are just doing a simple demonstration - the name you fill in must be abcdif(name=="abcd"){document.getElementById("userNameSpan").innerHTML="username correct".fontcolor("green");}else{document.getElementById("userNameSpan").innerHTML="username error".fontcolor("red");}}function checkPwd(){var oUserPwdNode = document.getElementById("pwd")[0];var pwd=oUserPwdNode.value;if(pwd.length>=6){document.getElementById("userPwdSpan").innerHTML="Password format meets the requirements".fontcolor("green");}else{document.getElementById("userPwdSpan").innerHTML="Password length must be greater than or equal to 6".fontcolor("red"); }}</script></head><body><form><!--onblur fires when the object loses input focus. -->Username:<input type="text" name="userName" onblur="checkUserName()" /><span id="userNameSpan"></span><br/><br/><!--To make clear, the password is also used as type="text" here. In fact, the password of type="password" should be used -->Password:<input type="text" name="pwd" onblur="checkPwd()" /><span id="userPwdSpan"></span> </form></body></html>360 Browser 8.1 Demonstration Results:
Username does not comply with the rules:
Password does not comply with the rules:
Verification of Registration Form 2 - Regular Expressions
Code demo:
<html><head><title>DHTML technology demonstration---Verification of registration form--Using regular expressions in js</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript">function checkUserName(){var oUserNameNode = document.getElementsByName("userName")[0];var userName = oUserNameNode.value;//Use regular test var reg = new RegExp("[az]{4}", "i");//It is OK to include 4 consecutive letters, note that the double quotes of "i" cannot be omitted //i--- means ignoring upper and lower case //var regg =new 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 = "The username is formatted correctly".fontcolor("green");}else {oUserNameSpan.innerHTML = "UserName format error".fontcolor("red");}}</script></head><body><!-- Demonstrate the usage of regular expressions in JS--><script type="text/javascript">//var reg = /^[0-9]{6}$/ ; //Method one var reg = new RegExp("^[0-9]{6}$");//Method two var str = "123456";var bRes = reg.test(str);//111 uses methods in regular expression objects for verification---can only be used to judge whether a match is matched. The function is similar to the matches() method in String class in Java//alert(bRes);//true//222 uses methods in String object for regular testing----The function is more powerful, similar to the Matcher tool in Java var res = str.match(reg);//The matching result is saved in res (is an array). If no match is reached, res is null. //alert(res);//123456//The array returned by the match method has three properties: input, index and lastIndex. //★A little details--- When using the new RegExp() method, special characters must be escaped //var reg2 =/^/d{6}$/; //"/"No need to escape var reg2= new RegExp("^/d{6}$");//※※ Note that "/" to escape //▲▲▲▲The above sentence is wrong and must be written as: new RegExp("^//d{6}$")//alert( reg2.test("123456") );</script><form><!--onblur fires when the object loses the input focus. -->Username:<input type="text" name="userName" onblur="checkUserName()" /><span id="userNameSpan"></span></form></body></html>360 Browser 8.1 Demonstration Results:
Just include 4 consecutive letters.
Verification of the registration form and control the front-end verification of the submission:
Code file creation location:
Code demo:
3form3.html
<html><head><title>DHTML technology demonstration---Verification and control submission of registration form-front-end verification</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript">function checkUserName(){var oUserNameNode = document.getElementsByName("userName")[0];var userName = oUserNameNode.value;//Use regular verification 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--- means ignoring upper and lower case //var regg =new RegExp("^[az]{4}$","i");//It only contains 4 consecutive letters, please note that the double quotes in "i" cannot be omitted //^ means the start $ means the end var oUserNameSpan = document.getElementById("userNameSpan"); if(reg.test(userName)){oUserNameSpan.innerHTML="username format is correct".fontcolor("green"); return true;}else{oUserNameSpan.innerHTML="Username Error Format".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="Password format meets the requirements".fontcolor("green");return true;}else{document.getElementById("userPwdSpan").innerHTML="Password length must be 6-9 digits or underscores".fontcolor("red");return false;}}function checkUser(){if(checkUserName() && checkPwd() ){//If there are other items that need to be verified before submission, just write the verification function here. Return true;}else{return false;}}</script></head><body><!--Control the form's submission by registering the onsubmit event response. If return false, it will not be submitted, and return true will be submitted. If the onsubmit event is not registered, it is return trueonsubmit triggered when the form is about to be submitted. <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return true;">--><form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">Username: <input type="text" name="userName" onblur="checkUserName()" /><span id="userNameSpan"></span><!--For the sake of clarity, the password is also used here. In fact, the password of type="password" should be used-->Password: <input type="text" name="pwd" onblur="checkPwd()" /><span id="userPwdSpan"></span><br/><input type="submit" value="registration"//</form><hr/><!--Form Submission Method 2---Write a button yourself to replace the form's own submission button--><form 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><input type="button" value="Register" onclick="mySubmit()" /><script type="text/javascript">function mySubmit(){var oFormNode = document.getElementById("userinfo");if(checkUserName2()&&checkPwd2()){oFormNode.submit();//submit Submit the form. }}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--- means ignoring upper and lower case //var regg =new RegExp("^[az]{4}$","i");//It only contains 4 consecutive letters, please note that the double quotes in "i" cannot be omitted //^ means start $ means end var oUserNameSpan = document.getElementById("userNameSpan2");if(reg.test(userName)){oUserNameSpan.innerHTML="username format is correct".fontcolor("green");return true;}else{oUserNameSpan.innerHTML="username format is wrong".fontcolor("red");return false; }}function checkPwd2(){var oUserPwdNode = document.getElementsByName("pwd")[1];var pwd = oUserPwdNode.value;var reg2 = new RegExp("^[//w//d]{6,9}$");if(reg2.test(pwd)){document.getElementById("userPwdSpan2").innerHTML="Password format meets the requirements".fontcolor("green");return true;}else{document.getElementById("userPwdSpan2").innerHTML="Password length must be 6-9 digits or underscores".fontcolor("red");return 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 Transitional//EN"><html><head><title>This is the page after registration</title></head><body><%out.println(request.getAttribute("uName"));out.println(request.getAttribute("pwd"));%><% for(int i=0;i<3;i++){//This can write html code below %><div>Welcome</div><% //This can write html code above } %></body></html>RegServlet.Java
This is a new Servlet.
We will automatically match web.xml
package cn.hncu.user;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class RegServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");//Set encoding String name = request.getParameter("userName");//userName is the name attribute of an input in the submitted form String 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").forward(request, response);//Output, guide to another page to display }}web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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> <welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list></web-app>
360 Browser 8.1 Demo Picture:
When the formats are filled in correctly, click the registration button and automatically jump to another page.
When there is a format error, clicking the registration button will not respond.
Verification of the registration form and control the final version of the front-end verification:
Code demo:
<html><head><title>DHTML technology demonstration---Verification and control submission of registration form-front-end verification--final version</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><script type="text/javascript">function check(name,reg,spanId,okInfo,errInfo){var value = document.getElementsByName(name)[0].value;//Use regular verification var oSpanNode = document.getElementById(spanId);if(reg.test(value)){oSpanNode.innerHTML=okInfo.fontcolor("green");return true;}else{oSpanNode.innerHTML=errInfo.fontcolor("red");return false;}}function checkUserName(){var reg = new RegExp("[az]{4}","i");//Contains 4 consecutive letters, note that the double quotes in "i" cannot be omitted return check("userName",reg,"userNameSpan","userNameSpan","userName format is correct","username format is wrong");}function checkPwd(){var reg = new RegExp("^[//w//d]{6,9}$");return check("pwd",reg,"userPwdSpan","password format meets the requirements","password length must be 6-9 digits or underscore");}function checkPwd2(){var flag;var pwd = document.getElementsByName("pwd")[0].value;var pwd2 = document.getElementsByName("pwd2")[0].value;var oSpanNode = document.getElementById("userPwd2Span");if(pwd==pwd2){oSpanNode.innerHTML="Two passwords are consistent".fontcolor("green");flag = true;}else{oSpanNode.innerHTML="Two passwords are inconsistent".fontcolor("red");flag = false;}return 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 action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">Username: <input type="text" name="userName" onblur="checkUserName()" /><span id="userNameSpan"></span><br/>Enter password: <input type="text" name="pwd" onblur="checkPwd()" /><span id="userPwdSpan"></span><br/>Confirm password: <input type="text" name="pwd2" onBlur="checkPwd2()" /><span id="userPwd2Span"></span><br/>Email address: <input type="text" name="mail" onblur="checkMail()" /><span id="userMailSpan"></span><br/><input type="submit" value="registration"></form></body></html>360 Browser 8.1 Demonstration Results:
Only after filling in all formats correctly will you respond if you click the registration button.
After filling in all the formats correctly, click the page after clicking the registration button, it actually jumps to the show.jsp page. (You can locate wherever you want)
The above is the relevant knowledge of Form form technology summary (recommended) in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to you in time!