//Environment:
1. No environmental requirements
text
1, Demand analysis:
1. Registration function
Realize the creation of new user information: account, password, nickname and email
Account number: cannot be repeated, cannot be less than 6 digits, pure number
Password: no less than 6 digits
Nickname: the maximum length is 6 characters and cannot be repeated
Mailbox: conform to mailbox format
Cannot be empty
2. Login function
Realize user login: account and password
To verify correctness and error from matching unique items
2, Function realization (all css are omitted, and html intercepts key positions)
Registration interface
html (see account detection for annotation type)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
//Inspection account number
function checkid() {
var aid = document.getElementById('id');//Get value
var aspan = document.getElementById('iderr');//Get value
var content = aid.value;//Get value
var reg = /^[0-9]*$/;//Disable symbol
if (content == '') {//Input detection
aspan.innerHTML = 'Account number cannot be empty,Only numbers are allowed'.fontcolor('red');
return false;
}
if ((content.length) < 6) {//Length detection
aspan.innerHTML = 'Account number shall be at least 6 digits'.fontcolor('red');
return false;
}
if (reg.test(content)) {//Character type detection
aspan.innerHTML = 'correct'.fontcolor('gree');
return true;
} else {
aspan.innerHTML = 'Only numbers are allowed'.fontcolor('red');
return false;
}
}
//Nickname detection
function checkname() {
var aname = document.getElementById('name');
var aspan = document.getElementById('nameerr');
var content = aname.value;
if (content == '') {//*****
aspan.innerHTML = 'Nickname cannot be empty'.fontcolor('red');
return false;
}
if ((content.length) > 6) {//*****
aspan.innerHTML = 'The maximum length of the nickname is 6 characters'.fontcolor('red');
return false;
} else {
aspan.innerHTML = 'correct'.fontcolor('gree');
return true;
}
}
//Password detection
function checkpwd() {
var apwd = document.getElementById('pwd');
var aspan = document.getElementById('pwderr');
var content = apwd.value;
if (content == '') {
aspan.innerHTML = 'The password cannot be empty. The password must be at least 6 characters'.fontcolor('red');
return false;
}
if ((content.length) < 6) {
aspan.innerHTML = 'Password must be at least 6 characters'.fontcolor('red');
return false;
} else {
aspan.innerHTML = 'correct'.fontcolor('gree');
return true;
}
}
//Re enter password detection
function checkpwd1() {
var apwd0 = document.getElementById('pwd');
var apwd1 = document.getElementById('pwd1');
var aspan = document.getElementById('pwd1err');
var content = apwd1.value;
var acontent = apwd0.value;
if (content == '') {
aspan.innerHTML = 'Please enter the password again'.fontcolor('red');
return false;
}
if (content === acontent) {
aspan.innerHTML = 'correct'.fontcolor('gree');
return true;
} else {
aspan.innerHTML = 'The two passwords are inconsistent, please re-enter'.fontcolor('red');
return false;
}
}
//Mailbox detection
function checkemail() {
var aqq = document.getElementById('email');
var aspan = document.getElementById('emailerr');
var content = aqq.value;
if (content == '') {
aspan.innerHTML = 'Mailbox cannot be empty'.fontcolor('red');
return false;
} else {
aspan.innerHTML = 'correct'.fontcolor('gree');
return true;
}
}
//Submit the form when the return value is true
function checkform() {
var add_id = checkid();
var add_name = checkname();
var add_pwd = checkpwd();
var add_pwd1 = checkpwd1();
var add_email = checkemail();
if (add_id && add_name && add_pwd && add_pwd1 && add_email) {
return true;
} else {
return false;
}
}
</script>
<body>
<div class="title">
<font size="100px" color="firebrick">Create an account quickly~</font>
</div>
<div class="zhuce">
<form method="post" action="php/zhuce.php" onsubmit="return checkform()">
account number:<input type="text" name="id" id="id"><span>*</span><br><!-- account number -->
<span id="iderr" class="error"></span><br>
Nickname?<input type="text" name="name" id="name"><span>*</span><br><!-- nickname -->
<span id="nameerr" class="error"></span><br>
password:<input type="password" name="pwd" id="pwd"><span>*</span><br><!-- password -->
<span id="pwderr" class="error"></span><br>
Confirm password:<input type="password" name="pwd1" id="pwd1"><span>*</span><br>
<span id="pwd1err" class="error"></span><br>
QQ Email:<input type="email" name="email" id="email"><span>*</span><br><!-- mailbox -->
<span id="emailerr" class="error"></span><br>
<div class="sub"><input type="submit" value="register" name="submit"></div>
</form>
</div>
</body>
</html>
Small tips:
1. return checkform() is used to verify the form before submitting it. If it is true, it will be submitted. Otherwise, some of my registration information may be submitted if it does not meet the rules.
2. When comparing two elements, you must first convert value into a value, otherwise you cannot compare the results.
3. There is nothing difficult in html. These are the most basic methods. There is nothing difficult to understand
php
<?php
// Connect database
$link = mysqli_connect('localhost','root','root','user');
if (!$link){
echo('failed');
} else {
echo('success');
}
//Get input information
$stu_id=$_POST["id"];//account number
$stu_name=$_POST["name"];//nickname
$stu_password=$_POST["pwd"];//password
$stu_email=$_POST["email"];//qq email
$user_stupassword=md5($stu_password);
$select_sql="SELECT stuid FROM info WHERE stuid= '$stu_id'";//Query whether there are duplicate accounts in the database
$ret=mysqli_query($link,$select_sql);//Execute??
$row=mysqli_fetch_row($ret);
$select_sqlsel="SELECT stuname FROM info WHERE stuname= '$stu_name'";//Find data to judge whether the nickname is duplicate
$sel=mysqli_query($link,$select_sqlsel);
$rowsel=mysqli_fetch_row($sel);
if($row == null){//If the account number is not repeated
if($rowsel == null){//Determine nickname duplication
$sql="INSERT INTO info (stuid,stuname,stupassword,stuemail) VALUES ('$stu_id','$stu_name','$stu_password','$stu_email')";
//insert data
mysqli_query($link,$sql);
mysqli_close($link);
//Complete registration
echo "<script>alert('login was successful')</script>";
echo "<script>open('http://localhost/3/index.html')</script>";
//Duplicate nickname
}else{
echo "<script>alert('Nickname already exists')</script>";
echo "<script>open('http://localhost/3/zhuce.html')</script>";
}
}elseif($row !== null){//If the account number is repeated at the beginning, continue to judge whether the nickname is also repeated
if($rowsel !== null){
echo "<script>alert('account number,Nickname already exists')</script>";
echo "<script>open('http://localhost/3/zhuce.html')</script>";
}else{
echo "<script>alert('Account already exists')</script>";
echo "<script>open('http://localhost/3/zhuce.html')</script>";
}
}
// $url = "http://www.baidu.com";
// echo "< script language='javascript'
// type='text/javascript'>";
// echo "window.location.href='$url'";
// echo "< /script>";
// if($row == null){
// echo "account can be registered < br >";
// }else {
// echo "account has been registered < br >";
// }
// if($rowsel == null){
// echo "nicknames can be used < br >";
// }else {
// echo "the nickname has been used < br >";
// }
?>Small tips:
1. / / connect to the database
$link = mysqli_connect('localhost','root','root','user');
localhost is the local connection; The first root is the user name of the local database; The second root is the password of the local database; User is the database I want to call;
2. At present, some versions cannot use mysql, but instead use MySQL I statement, so sometimes use Mysql to report errors, and try to see if there is a problem with your version.
3. When we write $stu_id=$_POST["id"];// account number
$stu_name=$_POST["name"];// nickname
$stu_password=$_POST["pwd"];// The password will give a notice that there is no defined value. That's not an error. Don't worry about it, because we didn't enter the information we want to fill in. How can it have value? So it doesn't affect our normal use.
4. We must pay attention to the use of printed quotation marks. There are often missing quotation marks in the writing process, so we must always remember the details in the writing, otherwise it is difficult for us to find out the errors without reporting errors.
5. Be sure to name the elements you set. My project is a negative teaching material. There is no clear name.
login interface
html (the code here is similar to the registration interface, and there is nothing difficult to understand, so no comments are written)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script>
function checkinid() {
var ainid = document.getElementById('inid');
var aspan = document.getElementById('iniderr');
var content = ainid.value;
var reg = /^[0-9]*$/;
if (content == '') {
aspan.innerHTML = 'Please enter the account number'.fontcolor('red');
return false;
}else{
return true;
}
}
function checkinpwd() {
var ainpwd = document.getElementById('inpwd');
var aspan = document.getElementById('inpwderr');
var content = ainpwd.value;
if (content == '') {
aspan.innerHTML = 'Please input a password'.fontcolor('red');
return false;
}else{
return true;
}
}
function checkform() {
var add_inid = checkinid();
var add_inpwd = checkinpwd();
if (add_inid && add_inpwd) {
return true;
} else {
return false;
}
}
</script>
</head>
<body>
<div class="main">
<div class="loginregister">
<form action="php/index.php" method="post" onsubmit="return checkform()">
<div id="login" style="font-size: 20pt;">
<tr>User login:</tr><br>
</div>
<tr>account number:</tr><input type="text" name="inid" id="inid" value="" /><span>*</span><br>
<span id="iniderr" class="inerror"></span><br>
<tr>password:</tr><input type="password" name="inpwd" id="inpwd" value="" /><span>*</span><br>
<span id="inpwderr" class="inerror"></span><br>
<input type="submit" name="sbt" id="sbt" value="Confirm login" style="margin-left: 80px;"><br>
<tr><a href="zhuce.html" style="font-size: 5pt; margin-left: 55px;">No account yet, register now</a></tr>
</form>
</div>
</div>
</body>
</html>php
<?php
session_start();
// Connect database
$link = mysqli_connect('localhost','root','root','user');
if (!$link){
echo('failed');
} else {
echo('success');
}
//Get input information
$stu_id=$_POST["inid"];//account number
$stu_password=$_POST["inpwd"];//password
//Here is the SQL statement, which is used to retrieve the only matching item of the account and password in the database. limit1 should be of little use, because we don't allow duplicate accounts when storing accounts, so we don't continue to search until we find a piece of information
$select_sql="SELECT * FROM info WHERE stuid= '$stu_id' and stupassword= '$stu_password' limit 1 ";
$ret=mysqli_query($link,$select_sql);//implement
$row=mysqli_fetch_row($ret);
if($row == null){//If no search result proves that the account password is wrong, the echo error prompt is output
echo "<script>alert('Wrong account or password')</script>";
echo "<script>open('http://localhost/3/index.html')</script>";
}else{
//Open the session to save data temporarily, which is convenient for cross page calling. For example, when I log in to the page, the page shows welcome. When logging in, I can call the id or name saved in the session
session_start();
//The prompt in my login interface is to welcome "nickname" login, but my login interface does not allow me to enter my own nickname, so I need to match my user nickname in the database according to my id
$name1=mysqli_query($link,"SELECT stuname FROM info WHERE stuid=$stu_id and stupassword= '$stu_password' limit 1 ");
$name = mysqli_fetch_row($name1);
//This is to convert the content we searched into a string, because what we searched is an array. Echo is welcome in another page$_ Session [name] cannot be output (echo can only output string, and the output array is print_r, but it seems that print cannot output session, so it needs to be converted into string)
$str = implode($name);
//Here is to save the nickname converted into string in the session
$_SESSION["stuname"]=$str;
echo "<script>alert('Login succeeded')</script>";
echo "<script>open('http://localhost/3/function.php')</script>";
}
?>tips: written in the code
database
navicat benefits:!!!
1. Graphical interface
2. sql statements are basically not required, just like Excel tables
3. When you create what you need, you can view it in the form of code and learn sql statements, absolutely!!!!!
Recommended version 15, which can be cracked
