【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页

前言：唯星宠物产品官网的登录注册，单独一个子页，页面使用BootStrap实现响应式，PHP提供服务端，利用Ajax技术，从Mysql中获取JSON数据，并对表单信息进行正则验证。项目github地址：https://github.com/66Web/ljq_weixin.git

思路：使用BootStrap自带面板组件

• 面板上有标题，下有内部，是可以呈现头部 主体 尾部结构的组件
• 关键类 ↓

1. panel  必写   panel-title可选   panel-primary可选
2. panel-body  主体内容
3. panel-footer   脚注内容

• 关键代码 ↓

<li class="active" data-toggle="tab">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">登录</a>
<div class="dropdown-menu panel1">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-horizontal">
<span class="title">欢迎登录</span>
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名" id="inputUser" name="inputUser"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPwd" placeholder="密码" name="inputPwd"/>
</div>
<p class="alert1"></p>
<span id="msgone"></span>
<input type="button" class="btn btn-default btn1" value="登录"/>
</div>
</div>
</div>
</li>

CREATE DATABASE weixin CHARSET=UTF8;
USE weixin;

#用户表
CREATE TABLE wxuser(
uid INT PRIMARY KEY AUTO_INCREMENT,
uname VARCHAR(30),
upwd VARCHAR(30)
);
SET NAMES GBK;
INSERT INTO wxuser VALUES(null,'17712345678','123456');
SELECT*FROM wxuser;

思路：php  mysql  查询

• 连接数据库,设置查询编码  utf8 →  init.php   

1. $conn=mysqli_connect("127.0.0.1","root","","weixin",3306);
2. mysqli_query($conn,"SET NAMES UTF8");

• 创建一条查询的SQL，并且发送sql

1. 登录  查询语句 → $sql="SELECT * FROM wxuser WHERE uname='$uname' AND upwd='$upwd'";
2. 注册  插入语句 →  $sql="INSERT INTO wxuser VALUES(null,'$uname','$upwd')";

• 获取返回结果   注意 ↓

1. 返回结果$result  不再是true/false
2. $result  结果集对象（查几条记录/查几列）
3. 如果需要获取最终数据结果，再一次操作  →  抓取

• 抓取结果集中内容并转换数组

1. $row = mysqli_fetch_assoc($result);   抓取一行记录（转关联数组）
2. $rows = mysqli_fetch_all($result,MYSQLI_ASSOC);  抓取多行记录

• 完整php连接数据库获取信息代码  ↓

//init.php
<?php
header("Content-Type:application/json;charset=utf-8");
$conn=mysqli_connect("127.0.0.1","root","","weixin",3306);
mysqli_query($conn,"SET NAMES UTF8");
?>

//login.php
<?php
require("init.php");
@$uname= $_REQUEST["uname"] or die('{"code":-1,"msg":"用户名是必须的"}');
@$upwd=$_REQUEST["upwd"]or die('{"code":-2,"msg":"密码是必须的"}');
$sql="SELECT * FROM wxuser WHERE uname='$uname' AND upwd='$upwd'";
$result=mysqli_query($conn,$sql);
$row=mysqli_fetch_assoc($result);
if($row===null){
echo '{"code":-3,"msg":"用户名或密码有误"}';
}else{
$uid = $row['uid'];
echo '{"code":1,"msg":"登录正确","uid":'.$uid.'}';
}
?>

//register.php
<?php
require("init.php");
@$uname=$_REQUEST["uname"] or die("用户名输入错误");
@$upwd=$_REQUEST["upwd"] or die("密码输入错误");
$sql="INSERT INTO wxuser VALUES(null,'$uname','$upwd')";
$result=mysqli_query($conn,$sql);
if($result==false){
echo "注册失败！";
}else{
echo "注册成功，请返回登录";
}
?>

思路：使用正则表达式对象

• 字符集

1. [A-Za-z0-9]                 1位字符
2. [^xxx]                           除了xxx都行
3. \d  →  [0-9]                 1位数字
4. \w →  [A-Za-z0-9]       1位字母、数字、_下划线
5. \s                                1位空字符（空格、换行、Tab）
6. .                                  除回车、换行外的所有字符

• 量词

1. ｛n,m｝   字符集可出现至少n次，最多m次
2. ｛n，｝   字符集可出现至少n次，多了不限
3. ｛n｝       字符集必须出现n次
4.   ？           可有可无，最多1次
5.   *             可有可无，多了不限
6.   +            至少一次，多了不限

• 分组和选择

1.   多个字符集（）    包为一组 → 为了使用同一个量词，同时修饰
2.   规则1  |  规则2      满足其一即可
3.   \         与js冲突时，使用转义字符

• 指定匹配位置

1.  ^         字符串开始位置
2.  $         字符串结尾位置
3.  ？       预判，表示如果 
4.  ？！   预判，如果不

• 登录表单输入内容正则验证完整代码（注册同登录一样）  ↓

//登录表单正则验证
(()=>{
var txtName1 = document.getElementById("inputUser");
var txtPwd1 = document.getElementById("inputPwd");
txtName1.onfocus=function(){
this.placeholder="请输入手机号";
this.style.border="1px solid #a99269"
};
txtPwd1.onfocus=function(){
this.placeholder="请输入你的密码";
this.style.border="1px solid #a99269"
};
txtName1.onblur=function(){
vertify(/^(\+86|0086)?\s*1[34578]\d{9}$/,this);
};
txtPwd1.onblur=function(){
vertify(/^\w{6,14}$/,this);
};
function vertify(reg,txt){
if(reg.test(txt.value)){
txt.placeholder="";
msgone.innerHTML="";
}else{
txt.value="";
msgone.innerHTML="请输入正确格式";
$("#msgone").css({
color:"red"
});
txt.style.border="2px solid red"
}
}
})();

版权声明：本文原创，非本人允许不得转载