web注册页面动态匹配验证--用户验证php实现（1）

我就是我 2022-05-23 07:44 223阅读 0赞

声明：边学边做原创，如有不足之处，欢迎指出

需要知识：1.php数据库连接

2.php 正则表达匹配

3.ajax  --

*                               HTML 和 CSS 基础
 *                                 JavaScript 基础

1 ：

创建好输入框：

2：

js 实现 提示效果：（原文出自：[点击打开链接][Link 1]）

3：

php代码实现动态验证：（验证有缺陷，因为是自己写的，有好多地方不完美，我会继续改善）

<?php
    
    //注册验证----------
    
    $v=trim($_GET['v']);     //获取用户输入的账号
    
    $hint = "";  //用作返回输出
    
    
    
    //判断是账号还是密码，或者其他匹配
    
        //判断输入的账账号长度是否大于0
        if (strlen($v) > 0)
        {
    
            //用户验证
            //1.必须以字母开头
            if(preg_match("/^[a-z]/",$v)){
                //2.至少5个字符
                if(preg_match("/^[a-z][\w]{4}/",$v))
                {
                    echo $v;
                    $hint = "";  //当满足时，让它输入空 因为前面不满足赋值了
                    //数据库建立连接
                    require "mysqli.php";
                    //数据库查询语句--查询输入的账号是否存在
                    $sql="select `username` from `user` where `username`='$v'";
                    $result = mysqli_query($conn, $sql);
                    //当mysqli_num_rows($result)> 说明查到里数据
                    if(mysqli_num_rows($result) > 0){
                        $hint ="该用户已存在！";
                    }else{
                        $hint = "该用户可用";
                    }
                    mysqli_close($conn); //关闭数据库连接
                }else{
                    $hint = "至少5个字符!";
                }
    
            }else{
                $hint = "必须以字母开头！";
            }
        }
    
    
    
    if ($hint == "")
    {
        $response="";
    }
    else
    {
        $response=$hint;
    }
    //打印返回
    echo $response;
    
    ?>

更新：（2018年6月5日14:31:00）

//判断输入的账账号长度是否大于0
    if (strlen($v) > 0) {
    
        //用户验证
        //1.必须以字母开头
        if (preg_match("/^[a-z]/", $v)) {
            //2.至少5个字符最长不超过11个字符
            if (strlen($v) < 5 || strlen($v) > 11) {
                $hint = "至少5个字符,最长不超过11个字符!";
            } else {
                //3.模式匹配
                if (preg_match("/^[a-z][\w]{2,10}$/", $v)) {
                    echo $v;
                    $hint = "";  //当满足时，让它输入空 因为前面不满足赋值了
                    //数据库建立连接
                    require "mysqli.php";
                    //数据库查询语句--查询输入的账号是否存在
                    $sql = "select `username` from `user` where `username`='$v'";
                    $result = mysqli_query($conn, $sql);
    
                    //当mysqli_num_rows($result)> 0 说明查到里数据
                    if (mysqli_num_rows($result) > 0) {
                        $hint = "该用户已存在！";
                    } else {
                        $hint = "该用户可用";
                    }
                    mysqli_close($conn); //关闭数据库连接
                } else {
                    $hint = "用户名只能是数值，字母，下划线";
                }
            }
        } else {
            $hint = "必须以字母开头！";
        }
    
    }

4：

完全出自自己的理解自己口语表达解释的，不够专业也不够标准，如有出错地方欢迎指出：QQ363491343

解释：当我们在用户名输入框内输入要注册的用户名时，![70][]

函数调用loadXMLDoc() 方法 （见第二步），从而进行相关动态验证（具体介绍见[点击打开链接][Link 1]）

![70 1][]

php代码解释：

$v=trim($_GET['v']);

用于获得用户动态输入的用户名；

if (strlen($v) > 0)

用户输入的用户名必须大于0；这是最基本的。

if(preg_match("/^[a-z]/",$v)){

然后我规定用户名必须以字母开头，不区分大小写

![70 2][] 这是我想用户名至少5个字符；

echo $v;
    $hint = "";  //当满足时，让它输入空 因为前面不满足赋值了
    //数据库建立连接
    require "mysqli.php";
    //数据库查询语句--查询输入的账号是否存在
    $sql="select `username` from `user` where `username`='$v'";
    $result = mysqli_query($conn, $sql);
    //当mysqli_num_rows($result)> 说明查到里数据
    if(mysqli_num_rows($result) > 0){
        $hint ="该用户已存在！";
    }else{
        $hint = "该用户可用";
    }
    mysqli_close($conn); //关闭数据库连接

这部分就是当前面都满足时候，就在数据库里面动态查找，看是否用户已经存在。

if ($hint == "")
    {
        $response="";
    }
    else {
        $response=$hint;
    }
    //打印返回
    echo $response;

最后输出返回要显示的内容；

这里我经过自己验证，在PHP里面echo 输出的都是返回的内容。

如果php有警告信息，或者出现错误，都会返回到前端去。

如果你ajax 学的不错，那么下面代码也就好理解了：

xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                //responseText	获得字符串形式的响应数据。
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    
            }
        }

嗯，以上是我自己写的用户账号通过服务器实现动态验证效果，也是边学边做，希望能够帮到和我一样的新手同学。

如果有大佬在，欢迎指出错误与不足之处。

![生气][mad.gif]

\-----新增加内容：

当焦点离开输入框，隐藏提示信息

//当焦点离开输入框，隐藏提示信息
    function upperCase(){
        document.getElementById("txtHint").innerHTML="";
    }

在

里面添加一样onblur 事件

[Link 1]: http://www.runoob.com/ajax/ajax-tutorial.html
[70]: /images/20220523/ad3004d4dfed4c22a6dd598c5169d3f2.png
[70 1]: /images/20220523/c50f57ad59834f8b976f55a1290909b2.png
[70 2]: /images/20220523/460406fc699743239b56b7476bf690fd.png
[mad.gif]: https://static-blog.csdn.net/xheditor/xheditor_emot/default/mad.gif