web注册页面动态匹配验证之用户验证php实现一
- 不言原创
- 2018-06-06 10:24:341636浏览
这篇文章主要介绍了关于web注册页面动态匹配验证之用户验证php实现一，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
需要知识：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）
//判断输入的账账号长度是否大于0if (strlen($v) > 0) { //用户验证
//1.必须以字母开头
if (preg_match("/^[a-z]/", $v)) {
//2.至少5个字符最长不超过11个字符
if (strlen($v) 965b60fbaa79b5baadb6ebff1d65347f 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="";}
在
a7b842ec2ad6222a3062cf2d301bfb8c5ade7fb90f781859384bb2aef56ff02d54bdf357c58b8a65c66d7c19c8e4d114
里面添加一样onblur 事件
以上是web注册页面动态匹配验证之用户验证php实现一的详细内容。更多信息请关注PHP中文网其他相关文章！