Maison > Article > développement back-end > Page d'inscription Web Vérification de correspondance dynamique Vérification de l'utilisateur Implémentation PHP (version complète) 2
Page d'inscription Web Vérification de correspondance dynamique Vérification de l'utilisateur Implémentation PHP (version complète) 2
- 不言original
- 2018-06-06 10:38:191159parcourir
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>Explication du code :
<span id="txtHint_name"></span>Utilisé pour afficher les informations d'invite de vérification, loadXMLDoc(this.value ,this.id) Les deux paramètres sont le contenu de la zone de saisie et le nom d'identification de la zone de saisie. La méthode upperCass() est utilisée :
当焦点离开输入框，隐藏提示信息
//当焦点离开输入框，隐藏提示信息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=""; }
}Le rendu est le suivant : (informations d'invite de vérification)
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") { est la zone de saisie du nom d'utilisateur
Explication des paramètres de transmission :
xmlhttp.open("GET","../common/verify.php?v="+str+"&id="+id,true);Stre passé, id Transmettez le nom d'utilisateur et l'identifiant de la zone de saisie au serveur et utilisez le code php pour la vérification
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 = "必须以字母开头！";
}
}Confirmer la vérification du mot de passe :
} else if($id=="contact_password_") { //确认密码 //因为是确认密码，只需要判断和上一次密码是否相同Comme vous pouvez le voir, il nous suffit de déterminer s'il s'agit du même que le dernier mot de passe, je dois donc créer des données pour stocker des variables temporaires. Mais ce fichier php est constamment mis à jour, utilisez donc la base de données pour créer un enregistrement pour stocker les données temporaires, comme suit :
$sql = "update `user` set `password`='$pass' where `id`=1 ";Ainsi, le nouveau mot de passe est vérifié :
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 = "必须以字母开头！";
}
}
}Explication du code : Principalement via la mise à jour de la base de données déclaration, effectuez des mises à jour des données en temps réel et réalisez une vérification dynamique.
$sql = "update `user` set `password`='$pass' where `id`=1 ";Alors il est temps de confirmer le mot de passe !Code php :
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);}Explication du code : Puisque le mot de passe est confirmé deux fois , j'obtiens directement l'enregistrement temporaire dans la base de données et je le compare avec l'entrée utilisateur (à l'aide d'une instruction de requête de base de données). Une fois la vérification du mot de passe de l'utilisateur terminée, effectuez la vérification du numéro de téléphone mobile et de l'adresse e-mail : Vérification du numéro de téléphone portable :
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开头！";
}
}Vérification limitée :
if($id=="contact_email") {
$email_pattern = "/^[\w]+(\.[\w]+)*@[a-z0-9]+(\.[a-z0-9]+)+$/";
if(preg_match($email_pattern,$v)){
$hint = "合法邮箱、可用";
}else {
$hint = "你输入的邮箱不合法";
} Recommandations associées :
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment écrire un code de vérification calculable en phpArticle suivant：Comment écrire un code de vérification calculable en php