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

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


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

                  2.php 正则表达匹配

                    3.ajax  --

  •                              HTML 和 CSS 基础
  •                                JavaScript 基础



1 :

创建好输入框:

<input name="username" type="text" class="form-control" id="contact_username" onkeyup="loadXMLDoc(this.value)" placeholder="用户名" required/>
            <span id="txtHint"></span>

2:

js 实现 提示效果:(原文出自:点击打开链接)

function loadXMLDoc(str)
{

    if (str.length==0)
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    var xmlhttp;
    //检查浏览器是否支持 XMLHttpRequest 对象
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //responseText	获得字符串形式的响应数据。
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

        }
    }
    xmlhttp.open("GET","../common/verify.php?v="+str,true);
    xmlhttp.send();
}

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

解释:当我们在用户名输入框内输入要注册的用户名时,

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




php代码解释:

1.

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

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

2.

if (strlen($v) > 0)

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

3.

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

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

4.

 这是我想用户名至少5个字符;

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); //关闭数据库连接
这部分就是当前面都满足时候,就在数据库里面动态查找,看是否用户已经存在。

6.

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;

        }
    }


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

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

生气


-----新增加内容:

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

   //当焦点离开输入框,隐藏提示信息
function upperCase(){
    document.getElementById("txtHint").innerHTML="";
}
<input name="username" type="text" class="form-control" id="contact_username" onkeyup="loadXMLDoc(this.value)" onblur="upperCase()" placeholder="用户名" required/>
<span id="txtHint"></span>

里面添加一样onblur 事件






文章来源: web注册页面动态匹配验证--用户验证php实现(1)

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:web注册页面动态匹配验证--用户验证php实现(1)