【唯星宠物】——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,'','');
SELECT*FROM wxuser;

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

思路：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"
        }
    }
})();

---

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