Cet article présente principalement l'implémentation PHP de vérification utilisateur (version complète) de la vérification de correspondance dynamique de la page d'inscription Web. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. >
Introduction : Si vous ne comprenez rien dansPage d'inscription Web vérification de correspondance dynamique vérification de l'utilisateur implémentation php , veuillez m'ajouter QQ : 363491343 apprendre .
La lecture de cet article n'est pas étroitement liée à l'implémentation PHP de la vérification des utilisateurs de la vérification de correspondance dynamique des pages d'inscription Web. Vous pouvez également lire cet article directement. Texte :1.Nous créons d'abord un formulaire et créons chaque zone de saisie :
Code : (Le style.. et tout autre contenu non pertinent sont omis)<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>
<span id="txtHint_name"></span>
当焦点离开输入框，隐藏提示信息
//当焦点离开输入框，隐藏提示信息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=""; }
}
Implémentation 2.js
(voici un js séparé fichier , pratique pour la gestion)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="";
}
}Explication du code :
str est le contenu de la zone de saisie, id est le nom d'identification de la zone de saisie, et l'identifiant est utilisé pour le jugement et la vérification De quelle zone de saisie s'agit-il, par exemple : if(id=="contact_username") {Explication des paramètres de transmission :
xmlhttp.open("GET","../common/verify.php?v="+str+"&id="+id,true);Code 3.php :
(vérification du compte utilisateur et du mot de passe)<?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 = "必须以字母开头！";
}
}} else if($id=="contact_password_") { //确认密码 //因为是确认密码，只需要判断和上一次密码是否相同
$sql = "update `user` set `password`='$pass' where `id`=1 ";
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 = "必须以字母开头！";
}
}
}$sql = "update `user` set `password`='$pass' where `id`=1 ";
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);}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开头！";
}
}if($id=="contact_email") {
$email_pattern = "/^[\w]+(\.[\w]+)*@[a-z0-9]+(\.[a-z0-9]+)+$/";
if(preg_match($email_pattern,$v)){
$hint = "合法邮箱、可用";
}else {
$hint = "你输入的邮箱不合法";
}Vérification de l'utilisateur Implémentation PHP de la vérification de correspondance dynamique de la page d'inscription Web
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
