Javaweb Online Book Mall complete project--day02-18. Modify Password page processing

1, users will be displayed after successful login

When you click on the change password, you will go to the following page

The corresponding is pwd.jsp this file

We enclose the checksum of the front section of the JSP page in Pwd.js, and introduce the JS file into the JSP.

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><%@ taglib prefix= "C" uri= "/HTTP/ Java.sun.com/jsp/jstl/core "%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" ><script type= "Text/javascript" src= "<c:url value= '/jsps/js/user/pwd.js '/>" ></script><script src= "<c:url value= '/js/common.js '/>" ></script> {msg}</label></td> <td colspan= "2" >&nbsp;</td> </tr> &lt ;tr> <td align= "right" > Original password:</td> <td><input class= "input" type= "pass Word "name=" Loginpass "id=" Loginpass "value=" "/></td> <td><label id=" Loginpasserror "Clas s= "Error" ></label></td> </tr> <tr> <td align= "right" ; New password:</td> <td><input class= "input" type= "password" name= "Newpass" id= "Newpass" value= ""/&gt ;</td> <td><label id= "newpasserror" class= "error" ></label></td> &L  t;/tr> <tr> <td align= "right" > Confirm password:</td> <td><input class= "input" type= "password" name= "Reloginpass" id= "Reloginpass" value= "/></td> <td><l Abel Id= "ReloginpasserroR "class=" error "></label></td> </tr> <tr> <td align=" Ri Ght "></td> <td> Verifycodeservlet"border=" 1 "/> <a href=" Javascript:changeverifycode (); " > Not clear, change a </a> </td> </tr> <tr> <td align= "Right" > Captcha:</td> <td> <input class= "input" type= "text" Name= "Verifycode "Id=" Verifycode "value=" "/> </td> <td><label id=" Verifycodeerror "class=" Error ></label></td> </tr> <tr> <td align= "right" >&l         T;/td> <td><input id= "Submit" type= "Submit" value= "Change Password"/></td> </tr> </table> </form> </div> </body>

Let's take a look at Pwd.js's code.

$ (function (){/** 1. Add the Submit () event to the registration button to complete the form verification*/$ ("#submit"). Submit (function () {$ ("#msg"). Text ("");        var bool = true;            $ (". Input"). each (function () {var InputName = $ (this). attr ("name");            if (!invokevalidatefunction (InputName)) {bool = false; }        });    return bool;        }); /** 3. Check when the input box pushes the focus*/$ (". Input"). blur (function (){var InputName = $ (this). attr ("name");    Invokevalidatefunction (InputName); });});/** Enter the input name and call the corresponding validate method. * For example, input name is: LoginName, then call the Validateloginname () method. */function Invokevalidatefunction (inputname){inputname = inputname.substring (0, 1). toUpperCase () + inputname.substring (1);    var functionname = "Validate" + inputname;    Return eval (functionname + "()"); }/** Check Password*/function Validateloginpass (){var bool = true;    $ ("#loginpassError"). CSS ("display", "none");    var value = $ ("#loginpass"). Val ();        if (!value) {//non-null check $ ("#loginpassError"). CSS ("Display", ""); $ ("#loginpassError"). Text ("Password cannot be empty!")        ");    bool = false; }else if (Value.length < 3 | | value.length >){//Length Check $ ("#loginpassError"). CSS ("Display", ""); $ ("#loginpassError"). Text ("Password length must be between 3 ~ 20!")        ");    bool = false; }Else{//Verify that the original error is correct $.ajax ({cache:false, Async:false, type: "POST", DataType: "JSON", data: {method: " Validateloginpass ", Loginpass:value } , URL: "/goods/userservlet", success:function (flag){if (!flag) {$ ("#loginpassError"). CSS ("Display", ""); $ ("#loginpassError"). Text ("Original password error!")                    ");                                bool = false; }            }        }); } return bool; Verifying New Password function validatenewpass (){var bool = true;    $ ("#newpassError"). CSS ("display", "none");    var value = $ ("#newpass"). Val ();        if (!value) {//non-null check $ ("#newpassError"). CSS ("Display", ""); $ ("#newpassError"). Text ("New password cannot be empty!")        ");    bool = false; }else if (Value.length < 3 | | value.length >){//Length Check $ ("#newpassError"). CSS ("Display", ""); $ ("#newpassError"). Text ("New password length must be between 3 ~ 20!")        ");    bool = false; }return bool;}/** Check Confirmation password*/function Validatereloginpass (){var bool = true;    $ ("#reloginpassError"). CSS ("display", "none");    var value = $ ("#reloginpass"). Val ();        if (!value) {//non-null check $ ("#reloginpassError"). CSS ("Display", ""); $ ("#reloginpassError"). Text ("Confirm password cannot be empty!")        ");    bool = false; }else if (value! = $ ("#newpass"). Val ()){///two times the input is consistent $ ("#reloginpassError"). CSS ("Display", ""); $ ("#reloginpassError"). Text ("Two times password input inconsistent!")        ");    bool = false; }return bool; }/** Check Verification code*/function Validateverifycode (){var bool = true;    $ ("#verifyCodeError"). CSS ("display", "none");    var value = $ ("#verifyCode"). Val ();        if (!value) {//non-null check $ ("#verifyCodeError"). CSS ("Display", ""); $ ("#verifyCodeError"). Text ("Verification code cannot be empty!")        ");    bool = false; }else if (value.length! = 4){///Length not 4 is the wrong $ ("#verifyCodeError"). CSS ("Display", ""); $ ("#verifyCodeError"). Text ("Wrong verification code!        ");    bool = false; }Else{//Verify that the code is correct $.ajax ({cache:false, Async:false, type: "POST", DataType: "JSON", data: {method: " Validateverifycode ", Verifycode:value } , URL: "/goods/userservlet", success:function (flag){if (!flag) {$ ("#verifyCodeError"). CSS ("Display", ""); $ ("#verifyCodeError"). Text ("Wrong verification code!                    ");                                    bool = false; }            }        }); } return bool;

Realize the switch function of Captcha picture
function Changeverifycode () {
$ ("#vCode"). attr ("src", "/goods/verifycodeservlet?a=" +new Date (). GetTime ());
}

The page uses Ajax to access the two methods of Validateverifycode and Validateloginpass in Userservlet, where Userservlet inherits Baseservlet

Javaweb Online Book Mall complete project--day02-18. Modify Password page processing