10 Task 7 Form ValidationPHP動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)項(xiàng)目教程課件

Project1MemberManagementSystemSchoolofSoftware,ChengduPolytechnicLecturer:MuQichunTask7FormValidationImportanceofFront-endFormValidationInTask6,welearnttosimplydeterminewhethertheusernameshouldbefilledinandwhetherthepasswordissameastheconfirmpassword.Butthisisfarfromenoughinpracticalprojectdevelopment.Actually,foranyform,weshouldvalidatethedatabeforesubmittingittothebackendinordertoensurethedataislegitimateandvalid.Thedatavalidationneedstobedoneinthefrontendandthebackendsimultaneouslyforthepurposeofensuringthesystemsecurityandrelievingthestressoftheserver.Forexample,itwouldmakenosenseifauserhastoclicktheSubmit

buttonwhenhe/sheinfactdoesn'tfillinausername.Ifwedonotmakeanyjudgmentorprocessinginthefrontend,thiswouldbeaninvalidinteractionbuttheservertimestillneedstobeoccupied.Inaddition,wemainlyuseSQLstatementanddatabaseforinteractioninthebackend.Ifthefrontendhasnorestriction,theremaybesomedangerouscharacterscausingSQLinjectionrisks.FormoreinformationrelatedtoSQLinjection,youmayrefertothefollowingwebsites:ImportanceofFront-endFormValidationWemustbewellawareofnetworkinformationsecuritysinceweareengagedinsoftwareprogrammingandrelatedwork.DoyouknowthestoriesabouttheTop10HackersofAllTime?Thesetop10hackersarethemostbrilliantintheworld.TheyareKevinMitnick,DennisMRitchie,LinusTorvalds,StephenGaryWozniak,KenThompson,RichardMatthewStallman,JohnDraper,EricSRaymond,MitchellDavidKaporandRobertTappanMorris.Ahackerisacomputerexpert,especiallyaprogrammer,skilledinhigh-levelandsophisticatedcomputertechnology.ThisisacommendatoryterminthecomputercircleintheUnitedStates.Nevertheless,inmediareports,thetermhackerisoftenusedtorefertoasoftwarecracker.FormoreinformationrelatedtotheTop10HackersofAllTime,youmayrefertothefollowingwebsites:ImportanceofFront-endFormValidationAfterknowingthestoriesabouttheTop10HackersofAllTime,youshouldlearnthecodeofprofessionalethicsthatwemustfollowascomputersoftwarepractitioners.Thefeaturesofthecomputerindustryhavedeterminedthecodeofprofessionalethicsthatacomputerprofessionalshouldstrictlyabideby.1.Usingalargeamountofinformation.Weneedtousethemodernelectroniccomputersystemtocollect,process,organizeandstoreinformationinordertoprovideallkindsofinformationservicestodifferentindustries,e.g.,computercenters,informationcenters,andconsultingcompanies.Thisrequiresthepractitionerstostrictlyrespectcustomers’privacy.2.Softwaredevelopmentandmanufacturing.Weareengagedintheresearchandproductionofelectroniccomputers(includingthehardwaremanufacturingofthemachine)aswellasthesoftwaredevelopment.Thisrequiresthepractitionerstorespectthepropertyrightsincludingcopyrightsandpatents.3.Transmittinginformationtothedestinationinatimely,accurateandcompletemanner.Thisrequiresthepractitionerstoattachimportancetocontracts,agreementsandspecifiedresponsibilities.ContentofFormValidationWhenwevalidatethedatainthefrontend,wegenerallyusejavaScripttodoso.TopreventthefrontendfromavoidingjavaScript,weneedtovalidatethedataafterwereceiveitinthebackend.Inamemberregistrationform,weneedtovalidate:Username:required,onlyuppercaseandlowercasecharacters,andnumberscanbefilledin,withalengthof3-10.Password:required,onlyuppercaseandlowercasecharacters,numbers,_,and*canbefilledin,withalengthof6-10.Confirmpassword:required,whichmustbethesameasthepassword.Email:theformatmustbecorrect,andyoumaynotfillinanemail.Hobby:youmaynotchooseahobby.MethodofFormValidationWhenweclicktheSubmitbutton,weneedtointerceptbeforesubmission.Weshouldvalidatethedataandthensubmittheformafterthedatapassesthevalidation.Weonlyneedtoaddanonsubmiteventinthetagformtosubmittheinterception.WhenweclicktheSubmitbutton,itwilltriggerasubmitevent,andthenthesystemwilljumptojavaScriptmethod“check”.Ifthecheckreturnstrue,thesystemwillproceedwiththesubmission;ifitreturnsfalse,thesystemwillstopthesubmission.Thespecificcodesofthemethod“check”areprovidedasbelow:SpecificCodesofFront-endFormValidationSpecificCodesofFront-endFormValidationFirstofall,weusedocument.getElementsByNametoreadtheelementsnamedas‘username',andthenwegetanarray.Butthereisonlyoneelementnamedasusernameintheentirewebpage.So,wetakethefirstelementinthisarrayandreaditsvalueattributetoobtaintheusernameinput,andthenusethetrimmethodtoremovethefrontspace.Thereadingmethodofotherdatafollowsthesamesteps.Next,weusetheregularexpressiontojudgethedatacontent.Usernamevalidation:/^[a-zA-Z0-9]{3,10}$/,representingthatonlyuppercaseandlowercaseletters,andnumbersareallowed,withalengthof3-10.Whenweusethemethod“test”totesttheregularexpression,ifitreturnstrue,itmeansthetestispassed;ifitreturnsfalse,itmeansthetestiserror,andthenanerrorhintwillpopupanditwillreturnfalsetostoptheautomaticsubmissionoftheform.Passwordverification:/^[a-zA-Z0-9_*]{6,10}$/,representingthatonlyuppercaseandlowercaseletters,numbersand*areallowed,withalengthof6-10.Ema