This article mainly introduces the user verification PHP implementation (full version) of the dynamic matching verification of the web registration page. It has a certain reference value and is now shared with everyone. Friends in need can refer to it
Introduction:
If you don’t understand anything in Web registration page dynamic matching verification user verification php implementation , please add me QQ: 363491343 learn.
Reading this article is not closely related to the user verification PHP implementation of dynamic matching verification on the web registration page. You can also read this article directly.
Text:
1.We create a first form and prepare each input box:
Code: (Style.. and other irrelevant content are omitted )
<form action="register.php" method="post" class="subscribe-form"> <p class="row form-section">
<p class="col-md-7 col-sm-7 col-xs-7">
<input name="username" type="text" class="form-control" id="contact_username"
onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="用户名" required/>
<span id="txtHint_name"></span>
<input name="password" type="password" class="form-control" id="contact_password"
onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="请输入密码" required/>
<span id="txtHint_pass"></span>
<input name="password_" type="password" class="form-control" id="contact_password_"
onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="输入确认密码" required/>
<span id="txtHint_pass_"></span>
<input name="phone" type="text" class="form-control" id="contact_phone"
onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="请输入手机号码" required/>
<span id="txtHint_phone"></span>
<input name="email" type="text" class="form-control" id="contact_email"
onkeyup="loadXMLDoc(this.value,this.id)" onblur="upperCase()" placeholder="填入邮箱" required/>
<span id="txtHint_email"></span> </p> </p> <p class="col-md-5 col-sm-5 col-xs-5">
<button type="submit" class="tm-btn-subscribe" name="register">注册</button> </p></form>
Copy after login
Code explanation:
<span id="txtHint_name"></span>
Copy after login
Used to display verification prompt information, loadXMLDoc(this.value,this.id ) The two parameters are the content in the
input box and the id name of the input box. The upperCass() method is used:
当焦点离开输入框，隐藏提示信息
Copy after login
//当焦点离开输入框，隐藏提示信息function upperCase(){
//event.target.id 获取id 名称
if(event.target.id=="contact_username") {
//responseText 获得字符串形式的响应数据。
document.getElementById("txtHint_name").innerHTML="";
} else if(event.target.id=="contact_password") {
document.getElementById("txtHint_pass").innerHTML=""; }
else if(event.target.id=="contact_password_") {
document.getElementById("txtHint_pass_").innerHTML=""; }
else if(event.target.id=="contact_phone") {
document.getElementById("txtHint_phone").innerHTML=""; }
else if(event.target.id=="contact_email") {
document.getElementById("txtHint_email").innerHTML=""; }
}Copy after login
The rendering is as follows:
(Verification prompt information)
(Verification Successfully hidden)
##2.js implementation
(here is a separate js file for easy management)
function loadXMLDoc(str,id)
{ if (str.length==0)
{
document.getElementById("txtHint_name").innerHTML="";
document.getElementById("txtHint_pass").innerHTML="";
document.getElementById("txtHint_pass_").innerHTML="";
document.getElementById("txtHint_phone").innerHTML="";
document.getElementById("txtHint_email").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)
{ if(id=="contact_username") {
//responseText 获得字符串形式的响应数据。
document.getElementById("txtHint_name").innerHTML=xmlhttp.responseText;
} else if(id=="contact_password") {
document.getElementById("txtHint_pass").innerHTML=xmlhttp.responseText;
} else if(id=="contact_password_") {
document.getElementById("txtHint_pass_").innerHTML=xmlhttp.responseText;
} else if(id=="contact_phone") {
document.getElementById("txtHint_phone").innerHTML=xmlhttp.responseText;
} else if(id=="contact_email") {
document.getElementById("txtHint_email").innerHTML=xmlhttp.responseText;
}
}
}
xmlhttp.open("GET","../common/verify.php?v="+str+"&id="+id,true);
xmlhttp.send();} //当焦点离开输入框，隐藏提示信息
function upperCase(){
//event.target.id 获取id 名称
if(event.target.id=="contact_username") {
//responseText 获得字符串形式的响应数据。
document.getElementById("txtHint_name").innerHTML="";
} else if(event.target.id=="contact_password") {
document.getElementById("txtHint_pass").innerHTML="";
} else if(event.target.id=="contact_password_") {
document.getElementById("txtHint_pass_").innerHTML="";
} else if(event.target.id=="contact_phone") {
document.getElementById("txtHint_phone").innerHTML="";
} else if(event.target.id=="contact_email") {
document.getElementById("txtHint_email").innerHTML="";
}
}Copy after login
Code explanation:
str is the content in the input box, id is the id name of the input box, and id is used to determine which input box is being verified, such as :
if(id=="contact_username") {Copy after login
is the user name input box;
Explanation of passing parameters:
xmlhttp.open("GET","../common/verify.php?v="+str+"&id="+id,true);Copy after login
Pass the user name and input box id to Server, use php code for verification;
3.php code:
(User account, and password verification)
<?php
//注册验证----------
$v = trim($_GET['v']); //获取用户输入的信息
$id = trim($_GET['id']); //获取id 用来判断是什么验证$hint = "";
//用作返回输出//判断是账号还是密码，或者其他匹配
if($id=="contact_username") { //账号验证
//判断输入的账账号长度是否大于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 = "必须以字母开头！";
}
}
} else if($id=="contact_password") { //密码验证
//判断输入的密码长度是否大于0
if (strlen($v) > 0) {
//1.必须以字母开头
if (preg_match("/^[a-z]/", $v)) {
//2.至少8个字符最长不超过16个字符
if (strlen($v) < 8 || strlen($v) > 11) {
$hint = "密码至少8个字符,最长不超过16个字符!";
} else {
//3.模式匹配
if (preg_match("/^[a-z][\w]{2,16}$/", $v)) {
$hint = "密码可用";
} else {
$hint = "密码只能是数值，字母，下划线";
}
}
} else {
$hint = "必须以字母开头！";
}
}Copy after login
Confirm password verification:
} else if($id=="contact_password_") { //确认密码 //因为是确认密码，只需要判断和上一次密码是否相同Copy after login
As you can see, we only need to determine whether it is the same as the last password, so I need to create a data to store temporary variables.
But this php file is constantly updated, so use the database to create a record to store temporary data,
is as follows:
Then continue to update this record:
$sql = "update `user` set `password`='$pass' where `id`=1 ";
Copy after login
So, the new password is verified:
if($id=="contact_password") { //密码验证
//判断输入的密码长度是否大于0
if (strlen($v) > 0) {
//1.必须以字母开头
if (preg_match("/^[a-z]/", $v)) {
//2.至少8个字符最长不超过16个字符
if (strlen($v) < 8 || strlen($v) > 16) {
$hint = "密码至少8个字符,最长不超过16个字符!";
} else {
//3.模式匹配
if (preg_match("/^[a-z][\w]{2,16}$/", $v)) {
//当密码可用时，我们对密码进行2次md5加密
$pass = md5(md5($v));
// 存到数据库
require "mysqli.php";
//因为数据库里面存在了，所以只需要更新就可以
//$sql = "insert into user(`password`,`id`,`username`) value ('$v',1,'mmjc')";
$sql = "update `user` set `password`='$pass' where `id`=1 ";
if(mysqli_query($conn, $sql)){
$hint = "密码可用";
}
mysqli_close($conn);
} else {
$hint = "密码只能是数值，字母，下划线";
}
}
} else {
$hint = "必须以字母开头！";
}
}
}Copy after login
Code explanation:
Mainly through the database update statement, the data is processed Real-time updates to achieve dynamic verification.
$sql = "update `user` set `password`='$pass' where `id`=1 ";
Copy after login
Then the password verification is confirmed!
php code:
if($id=="contact_password_") { //确认密码
//当密码可用时，我们对密码进行2次md5加密
$pass = md5(md5($v)); // 查询第一输入密码存入的密码
require "mysqli.php"; //数据库查询语句--查询密码和第一次密码是否相同
$sql = "select `password` from `user` where id=1";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) { // 输出数据
$row = mysqli_fetch_assoc($result);
//判断两次密码是否相同
if( $pass==$row["password"]){
$hint = "两次密码相同可用";
}else{
$hint = "请与前一次密码保持一致！";
}
}
mysqli_close($conn);}Copy after login
Code explanation:
Since the password is confirmed twice, I directly enter the database Obtain temporary records from the database and compare them with user input (database query statements are used).
After the user password verification is completed, verify the mobile phone number and email address:
Mobile phone number verification:
if($id=="contact_phone") {
//1.手机号码必须以1开头
if (preg_match("/^[1]/", $v)) {
if(strlen($v) != 11){
$hint = "手机号码为11位";
}else if(preg_match("/^[1][0-9]{10}$/",$v)){
require "mysqli.php";
//查询数据库里面是否存在已有的手机号码
$sql = "select `phone` from `user` where `phone`='$v' ";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
//判段用户输入的密码是否和数据库里面的相同
if ($v == $row["phone"]) {
$hint = "该手机已被注册！";
} else {
$hint = "手机号码可用";
} }
mysqli_close($conn);
}else{
$hint = "手机号码必须是数字！";
}
} else {
$hint = "手机号码必须以1开头！";
}
}Copy after login
Limited verification:
if($id=="contact_email") {
$email_pattern = "/^[\w]+(\.[\w]+)*@[a-z0-9]+(\.[a-z0-9]+)+$/";
if(preg_match($email_pattern,$v)){
$hint = "合法邮箱、可用";
}else {
$hint = "你输入的邮箱不合法";
}Copy after login
Related recommendations:
Web registration page dynamic matching verification user verification php implementation
#
The above is the detailed content of Web registration page dynamic matching verification user verification PHP implementation (full version) 2. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
