1: Create a table with navicat to store data
1 create a local table with navicat to store some data, and then compare it during registration (I compare whether the mobile phone numbers are consistent. Consistency indicates that this user has been registered.)
1> > click new table, and then enter the data. The first one is better to write the id name for sorting. If it is not empty, click it, and then the first one is the primary key. Only the first one is the primary key. Comments can be written, but not automatically incremented. If you want to write it, the data can be sorted automatically
2>> Remember to write the character set of user name, phone gender uft8!!!
3>> Click Save (ctrl + s) to write the name of the table according to your preferences
4 > >: click the table to see the basic structure. At this time, the table is empty. You can add data directly on it
5> > just add some
2: Write basic html, js and php to connect to mysql
Because there are still some judgment pop-up boxes in the registration I wrote. jquery and layer are introduced. You can delete the corresponding code in js.
1: (name optional) ss.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="img-right-b">
<div class="img-right-b-register">
<p>register</p>
<input class="user" type="text" name="" id="" placeholder="user name">
<input class="inp-tel" type="text" placeholder="cell-phone number">
<input class="inp-pwd" type="password" placeholder="password">
<input class="inp-age" type="text" placeholder="Age" name="" id="">
<p class="sex-radio"><input class="inp-sex" type="radio" name="radio" value="male" checked><span>male</span></p>
<p class="sex-radio"> <input class="inp-sex" type="radio" name="radio" value="female"><span>female</span></p>
<br>
<button class="btn">register</button>
</div>
</div>
<script src="jq/jquery-2.2.4.js">
</script>
<script src="layer/layer.js"></script>
<script src="axios.js"></script>
<script src="ss.js"></script>
</body>
</html>I didn't write the style. I'll take a look at the structure 
2 : ss.js JS code:
I write a lot of comments. If I don't understand them, look at the comments. Before looking at the code, you can go through the structure and class name in html, which is easy to understand when looking at js code The following registration decision has an axios.post (), which is an ajax package. I put it below. If I write it myself, I can use my own
// Registration judgment
// $$is a function encapsulated below to obtain nodes. You can also use document.querySelector or document.getElementsByTagName to obtain nodes
// Get the large div of. img-right-b-register
let registerObj = $$('.img-right-b-register');
// Get their son. I'll have the lose focus function to get the value of the input box below
// These codes can be changed according to your own ideas
registerObj = registerObj.children
// console.log(registerObj[0]);
// console.log(registerObj.length);
let userObj = $$('.user')
let inpTelObj = $$('.inp-tel');
let inpPwdObj = $$('.inp-pwd');
let inpSexObj = document.querySelectorAll('.inp-sex');
let inpAgeObj = $$('.inp-age');
let btnObj = $$('.btn');
let userVal = '';
let telVal = '';
let pwdVal = '';
let ageVal = '';
let sexVal = '';
// When the user name loses focus, determine whether the input value is the mobile phone number and the password cannot be less than 6 digits
// If you don't need to judge the password, you can comment out the code of the following regular expression
// Just lose focus and get the value
// eve.target is an event attribute that returns which element triggers the event
// There are several input boxes in the large div, and then the radio box. When we lose the focus, the return value is which one
// Novices can be more familiar with this attribute. I especially like this attribute
for (let i = 1; i < registerObj.length - 4; i++) {
// console.log(registerObj[i]);
registerObj[i].onblur = function (eve) {
// console.log(eve.target);
if (eve.target == userObj) {
// console.log(13);
// console.log(eve.target.value);
userVal = eve.target.value
}
if (eve.target == inpTelObj) {
// console.log(14);
let regTel = /^1[3578]{1}\d{9}/;
// Determine whether it is true. If it is not a pop-up error
if (!regTel.test(eve.target.value)) {
// alert('You entered the wrong account ');
// Here is the layer pop-up box. You can write it instead of alert
layer.open({
content: 'You have entered the wrong mobile phone number'
});
}
// Here, I assign the value of the input box to telVal, and then click registration to determine whether there is a value
telVal = eve.target.value;
}
if (eve.target == inpPwdObj) {
// console.log(15);
let regPwd = /\S{6,}/
// console.log(regPwd.test(strPwd));
if (!regPwd.test(eve.target.value)) {
layer.open({
content: 'The password cannot be less than 6 digits and blank characters cannot appear'
});
}
pwdVal = eve.target.value;
}
if (eve.target == inpAgeObj) {
// console.log(16);
let regPwd = /^[1-9]\d{1}/
if (!regPwd.test(eve.target.value)) {
layer.open({
content: 'Age must be a number and cannot start with 0'
});
}
ageVal = eve.target.value;
}
}
};
// Click Register and decide
btnObj.onclick = function () {
// console.log(12);
// console.log(userVal);
// console.log(telVal);
// console.log(pwdVal);
// console.log(ageVal);
// console.log( inpSexObj[0]);
// console.log(inpSexObj[1]);
// Here is a three eye operation. When we choose men and women, we choose a single choice. Men choose, women don't choose, and vice versa
inpSexObj[0].checked ? sexVal = inpSexObj[0].value : sexVal = inpSexObj[1].value;
// console.log(sexVal);
// When our values are entered, we use ajax to transfer data
if (userVal && telVal && pwdVal && ageVal && sexVal) {
// console.log(15);
// AddRegister(userVal, telVal, pwdVal, ageVal, sexVal)
// Pass the value to php and put it into the local server for judgment when logging in
axios.post('./ss.php', {
user: `${userVal}`,
tel: `${telVal}`,
pwd: `${pwdVal}`,
age: `${ageVal}`,
sex: `${sexVal}`
}).then(data => {
// You can comment out the following two ifs, log data, and see if the value has been passed
// The purpose of returning the value is to determine whether the account is unregistered or registered. The value returned by php varies from person to person
// console.log(data);
if (data == 1) {
layer.open({
content: 'This user is already registered'
});
}
if (data == 2) {
// layer.open({
// content: 'registration succeeded!'
// });
layer.confirm('login was successful', {
btn: ['Sign in'] //Button
});
}
})
}
}
// Encapsulation acquisition node
function $$(tag) {
return document.querySelector(tag)
}axios.js This code block can be referenced directly under html If the code is written directly in srcipt under html, it should be put later. If it is referenced JS, it should also be put later
A promise object is also written here. You can learn about it
class axios {
static get (url, data) {
return axios.http('get', url, data)
}
static post (url, data) {
return axios.http('post', url, data)
}
static http (type, url, data) {
let params = null
if (data) {
// Temporarily save array data in params
params = []
// Iterate over the attributes in the data object, for example: {username: 'admin', password: 'admin'}
for (const key in data) {
params.push(`${key}=${data[key]}`) // ['username=admin', 'password=admin']
}
// Each element in the array is spliced with ` & ` symbols to generate a query string structure
params = params.join('&'); // username=admin&password=admin
}
// If it is GET data and there is data sent to the back end, the query string will be marked with? Number after URL
if (type === 'GET' && params) {
url += `?${params}`
params = null
}
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(type, url);
// post needs to set the header
type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(params);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// success
resolve(xhr.response)
} else {
// fail
reject('Server error');
}
// console.log(xhr.response);
}
}
})
}
}
function $$ (tag) {
return document.querySelector(tag)
}3: ss.php If I am registered here, the returned value is 1. If I am not registered, I will save the value to the local server, and then return a 2. After receiving the return value in js, I can determine whether 1or2 can be registered
<?php
//This string of codes prevents Chinese from being garbled
header('content-type:text/html;charset=utf8');
//The following note is to set the error to 0. You'd better not write it so that you don't know what's wrong
// error_reporting(0);
//Assign a value to the obtained value. If you are not sure whether the value transfer is successful, you can comment out the following code and echo to see if the value exists
$userVal=$_POST['user'];
$telVal=$_POST['tel'];
$pwdVal=$_POST['pwd'];
$ageVal=$_POST['age'];
$sexVal=$_POST['sex'];
// echo $telVal;
// 1. Connect to mysql. You can go online to see the things here. I can only scratch the surface
$link = mysqli_connect('127.0.0.1','root','root','test');
// 3 take out the value
$getSql = "select tel from ss ";
$getRes = mysqli_query($link,$getSql);
// print_r($getRes);
$arr = [];
while($row=mysqli_fetch_assoc($getRes)){
$arr[] = $row;
}
// print_r($arr);
//Here, the value in the database is traversed, and then it is determined with the value obtained through transmission. If the phone number is the same, it means that the account has been registered. If there is none after traversal, it means that the account can be registered
for($i=0;$i<count($arr);$i++){
// print_r(implode($arr[$i]));
if($telVal==implode($arr[$i])){
echo '1';
break;
}
else{
// echo $i;
// echo count($arr);
// echo count($arr)-1;
// When the index reaches the maximum, we give out the data
//We must decide whether the value exists until the last one. At this time, we are putting the value we transmitted into the local server. If we do not have this if, we will pass the value every time it is different. Of course, the method is not unique. There is a better way to obtain it
if($i==count($arr)-1){
// echo 12;
$sql = "insert into cartShop(user,tel,pwd,age,sex) values('$userVal','$telVal','$pwdVal','$ageVal','$sexVal')";
// 2 execution code
$res = mysqli_query($link,$sql);
echo "2";
// print_r($arr);
// echo 12;
}
}
}
?>You can see that we are registered when we enter the same mobile phone number
When the mobile phone number is different, the registration is successful
