1.创建register.php复制下图页面,细节可以稍微不同。同时检测所有输入是否合法。
具体验证细节如下:
First name和Last name不能为空
username符合php命名规则即/^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/
密码至少包含两个大写字母,一个小写字母,{!, @, #, $, %, ^, &}中的至少一个特殊字符,一个数字。密码总长度不小于八位
用 method = "POST"递交表格
2.为用户名邮箱右下角的check id键添加功能。在源文件夹里用users.txt文件记录注册过的用户名,check id键用来查询是否输入的username已经存在。再users.txt中,每行开头为userid,每一行储存一个用户,用户信息用空格隔开。如果用户名存在,重置网页并保留除用户名以外的所有信息,提示让用户重新输入用户名。如果用户名不存在,显示“用户名可用”
3.创建process.php,用POST来接收来自上一页的信息,并让用户输入更多信息,包括电话号,备用邮箱,生日和性别。点击submit后,信息被递交到outcome.php。同时在本页面将所有用户信息录入到users.txt中
4.创建outcome.php,在接收到信息后自动生成一封邮件,内容是
亲爱的 FirstName LastName,
你已成功创建账号,账号名为 Username。谢谢。
其中FirstName,LastName,Username都来自第一页的信息
邮件功能请参考提供的PHPMailer模板:
index.php
<?php session_start(); $x=2; require_once 'abc.php'; ?> <p class="meta"><span class="date">user registration?</span></p> <div style="clear: both;"> </div> <div class="entry"> <p> <form action="newuser.php" method="post" enctype="multipart/form-data"> <table> <tr> <td>Full name : </td> <td><input type="text" id="fn" name="fn"> <span id="err_fn" style="color:red;visibility: hidden;">* Required</span> </td> </tr> <tr> <td>Email : </td> <td><input type="text" id="e" name="e"> <span id="err_e" style="color:red;visibility: hidden;">* Example:abc@xyz.com</span> </td> </tr> <tr> <td>Username : </td> <td><input type="text" id="u" name="u"> <span id="err_u" style="color:red;visibility: hidden;">* Required</span> </td> </tr> <tr> <td>Password : </td> <td><input type="password" id="p" name="p" onkeyup="return checkPassword()"> <span id="err_p" style="color:red;visibility: hidden;">* 1 lowercase ,1 uppercase ,1 digit , 1 special character and minimum length 8</span> </td> </tr> <tr> <td>Retype password : </td> <td><input type="password" id="rp" name="rp" onkeyup="return checkPassword()"> <span id="nomatch" style="color:red;visibility: hidden; display:inline;">* password not matched</span> </td> </tr> <tr> <td><input type="submit" value="Register" name="subReg" onclick="return check()"></td> <td><input type="reset" value="clear data"></td> </tr> <table> </form> </p> </div> <?php require_once 'xyz.php'; ?>
dbconfig.php
<?php $dbhost="localhost"; $dbuser="root"; $dbpass=""; $dbname="userinfo" ?>
newuser.php
newuser.php: <?php session_start(); $x=2; require_once 'abc.php'; ?> <p class="meta"><span class="date">user registration</span></p> <div style="clear: both;"> </div> <div class="entry"> <p> <?php if(isset($_POST["subReg"])) { $fullname=$_POST["fn"]; $username=$_POST["u"]; $password=$_POST["p"]; $email=$_POST["e"]; require_once 'dbconfig.php'; $db=new mysqli($dbhost,$dbuser,$dbpass,$dbname); $db->query("insert into signup(Fullname,UserName,Password,Email) values('$fullname','$username','$password','$email')"); if($db->affected_rows>0) { echo "User Registration Successfull. "; echo "<br>go to login page."; } $db->close(); } ?> </p> </div> <?php require_once 'xyz.php'; ?>
abc.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>webapp</title> <link href="style.css" rel="stylesheet"> <script> function check() { var fv=true var str="" var pat="" //Full name str=document.getElementById("fn").value; pat=/^[a-zA-Z0-9]{5,10}$/ if(!pat.test(str)) { document.getElementById("err_fn").style.visibility="visible"; fv=false; } else { document.getElementById("err_fn").style.visibility="hidden"; if(fv==true) fv=true; } //username str=document.getElementById("u").value; pat=/^[a-zA-Z0-9]{5,10}$/ if(!pat.test(str)) { document.getElementById("err_u").style.visibility="visible"; fv=false; } else { document.getElementById("err_u").style.visibility="hidden"; if(fv==true) fv=true; } //email str=document.getElementById("e").value; pat=/^[a-zA-Z0-9]+@[a-zA-Z]+\.[a-zA-Z]{2,4}$/ if(!pat.test(str)) { document.getElementById("err_e").style.visibility="visible"; fv=false; } else { document.getElementById("err_e").style.visibility="hidden"; if(fv==true) fv=true; } //password str=document.getElementById("p").value; if(str=="") { document.getElementById("err_p").style.visibility="visible"; fv=false; } else { document.getElementById("err_p").style.visibility="hidden"; if(fv!=false) fv=true; } return fv; } //onkeyup event for the match password function checkPassword() { str=document.getElementById("p").value; pat=/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/ if(!pat.test(str)) { document.getElementById("err_p").style.visibility="visible"; fv=false; } else { document.getElementById("err_p").style.visibility="hidden"; if(fv!=false) fv=true; } str1=document.getElementById("rp").value; if(str1!=str) { document.getElementById("nomatch").style.visibility="visible"; fv=false; } else { document.getElementById("nomatch").style.visibility="hidden"; if(fv!=false) fv=true; } return fv; } </script> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">webapp</a></h1> <p>new way to develop website...</p> </div> </div> <!-- end #header --> <div id="menu"> <ul> <li <?php if($x==1){echo "class='current_page_item'";} ?>><a href="index.php">Home</a></li> <li <?php if($x==2){echo "class='current_page_item'";} ?>><a href="newuser_form.php">New User</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- end #menu --> <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="content"> <div class="post"> <h2 class="title"><a href="#">Webapp portal </a></h2>
xyz.php
xyz.php: </div> <div style="clear: both;"> </div> </div> <!-- end #sidebar --> <div style="clear: both;"> </div> </div> </div> </div> <!-- end #page --> </div> <div id="footer"> <p>Copyright (c) 2017 company.com. All rights reserved. Design by <a href="#" rel="nofollow">ABCXYZ.COM</a>.</p> </div> <!-- end #footer --> </body> </html>
style.php
body { margin: 0; padding: 0; background: #FFFFFF url(images/img01.jpg) repeat-x left top; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #787878; } h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; color: #32639A; } h1 { font-size: 2em; } h2 { font-size: 2.4em; } h3 { font-size: 1.6em; } p, ul, ol { margin-top: 0; line-height: 180%; } ul, ol { } a { text-decoration: none; color: #4486C7; } a:hover { } #wrapper { width: 960px; margin: 0 auto; padding: 0; } /* Header */ #header { width: 940px; height: 148px; margin: 0 auto; background: url(images/img04.jpg) no-repeat left 20px; } /* Logo */ #logo { float: left; margin: 0; padding-top: 30px; color: #000000; } #logo h1, #logo p { margin: 0; padding: 0; } #logo h1 { float: left; padding-left: 80px; letter-spacing: -1px; text-transform: lowercase; font-size: 3.8em; } #logo p { float: left; margin: 0; padding: 26px 0 0 10px; font: normal 14px Georgia, "Times New Roman", Times, serif; font-style: italic; color: #FFFFFF; } #logo a { border: none; background: none; text-decoration: none; color: #FFFFFF; } /* Menu */ #menu { width: 940px; height: 49px; margin: 0 auto; padding: 0; } #menu ul { margin: 0; padding: 0; list-style: none; line-height: normal; } #menu li { float: left; } #menu a { display: block; width: 155px; height: 33px; padding-top: 16px; text-decoration: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #FFFFFF; border: none; } #menu a:hover, #menu .current_page_item a { background: #659CEF url(images/img03.jpg) repeat-x left bottom; text-decoration: none; } #menu .current_page_item a { background: #FBFBFC url(images/img02.jpg) repeat-x left bottom; padding-left: 0; color: #30476A; } /* Page */ #page { width: 940px; margin: 0 auto; padding: 0; } #page-bgtop { padding: 20px px; } #page-bgbtm { } /* Content */ #content { float: left; padding: 30px 0px 0px 0px; } .post { margin-bottom: 15px; } .post-bgtop { } .post-bgbtm { } .post .title { margin-bottom: 10px; padding: 12px 0 0 0px; letter-spacing: -.5px; color: #000000; } .meta { height: 30px; background: #D8E7FE; margin: 0px; padding: 0px 0px 0px 0px; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; } .meta .date { float: left; height: 24px; padding: 3px 15px; color: #4A81DE; } /* Footer */ #footer { height: 50px; margin: 0 auto; padding: 0px 0 15px 0; background: #D8E7FE; border-top: 1px solid #D3DEF0; font-family: Arial, Helvetica, sans-serif; } #footer p { margin: 0; padding-top: 20px; line-height: normal; font-size: 10px; text-transform: uppercase; text-align: center; color: #A0A0A0; } #footer a { color: #5389E0; }