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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.