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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

一、登录注册响应式界面

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

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

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

关键代码 ↓

二、数据库创建用户表

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,'','');
SELECT*FROM wxuser;

三、登录注册php操作数据库

思路：php mysql 查询

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

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

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

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

获取返回结果注意 ↓

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

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

$row = mysqli_fetch_assoc($result); 抓取一行记录（转关联数组）
$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 "注册成功，请返回登录";
}
?>

四、正则验证表单提交内容

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

字符集

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

量词

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

分组和选择

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

指定匹配位置

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

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

//登录表单正则验证
(()=>{
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"
}
}
})();