用PHP&JS实现的ID&密码校验程序

Posted 2020-11-17 l_____py

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用PHP&JS实现的ID&密码校验程序相关的知识，希望对你有一定的参考价值。

声明:本程序纯粹是本人在学习过程中突发奇想做的，并未考虑任何可行性，实用性，只是留下来供以后参考。

前端页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset=‘utf-8‘>
        <title>QQ注册&登录</title>
        <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./sign.css‘>
        <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
        <script src=‘./sign.js‘ type=‘text/javascript‘> </script> 
    </head>
    <body>
        <div class=‘header‘>QQ注册&登录</div>
        <div class=‘container‘>
        <h3>注册</h3>
        <form name=‘signup‘ action=‘./signup.php‘ onsubmit=‘return validateForm1()‘ method=‘post‘>
            QQ:<input type=‘text‘ name=‘uid‘ id=‘userid1‘>
            密码:<input type=‘password‘ name=‘upd‘ id=‘userpassword1‘>
            <input type=‘submit‘ onsubmit="" value=‘注册‘>
        </form>
        <h3>登录</h3>
        <form name=‘signin‘ action=‘./signin.php‘ onsubmit=‘return validateForm2();‘ method=‘post‘>
            QQ:<input type=‘text‘ name=‘uid‘ id=‘userid2‘>
            密码:<input type=‘password‘ name=‘upd‘ id=‘userpassword2‘>
            <input type=‘submit‘ onsubmit="" value=‘登录‘>
        </form>
        </div>
    </body>
</html>

CSS

sign.css

* {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

body {
    background:whitesmoke;
    font-size: 1em;
}
.header {
    height:3em;
    font-size: 2.5em;
    line-height: 3em;
    color:gray;
    border-bottom:solid black 1px;
    text-align: center;
}
.container {
    text-align: center;
}

sign.js

function validateForm1(){
    var id = this[‘userid1‘].value;
    var password = this[‘userpassword1‘].value;
    if ( !id.match(/^d{5,10}$/) ) {
            alert (‘ID必须为5至10位数字‘);
            return false;
        }
    if ( !password.match(/^[dw]{6,18}$/) ) {
            alert (‘密码必须为6至32位数字和（或）字母‘);
            return false;
        }
    this[‘userpassword1‘].value =  md5(password);
}

function validateForm2(){
    var id = this[‘userid2‘].value;
    var password = this[‘userpassword2‘].value;
    if ( !id.match(/^d{5,10}$/) ) {
            alert (‘ID必须为5至10位数字‘);
            return false;
        }
    if ( !password.match(/^[dw]{6,18}$/) ) {
            alert (‘密码必须为6至18位数字和（或）字母‘);
            return false;
        }
    this[‘userpassword2‘].value =  md5(password);
}

服务器端脚本

signin.php

<?php
$uid = $_POST[‘uid‘];
$upd = $_POST[‘upd‘];

$upd = md5($upd);

$conn = mysqli_connect(‘localhost‘, ‘myqq‘, ‘myqq‘, ‘qq‘);
if (!$conn)
{
    die ("数据库连接失败" . mysqli_connect_error());
}

$sql_select = <<<EOF
select id,password from user where id = ‘$uid‘
EOF;
$result = $conn->query($sql_select);
if ( $result->num_rows == 1){
    //echo ‘用户存在‘;
    $dbupd = ($result->fetch_assoc())[‘password‘];
    if ( $dbupd == $upd ){
        echo "登录成功";
    }
    else {
        echo "密码错误";
        //echo "<br>" . $upd . "<br>" . $dbupd;
    }
    
}
else {
    echo "用户不存在";
}
?>

signup.php

<?php
$uid = $_POST[‘uid‘];
$upd = $_POST[‘upd‘];

$upd = md5($upd);
//echo $upd . ‘<br>‘;
//echo $uid . $upd;
$conn = mysqli_connect( ‘localhost‘, ‘myqq‘, ‘myqq‘, ‘qq‘ );
if (!$conn){
    die ("数据库连接失败" . mysqli_connect_error() );
}
 
$sql_select = <<<EOF
select id,password from user where id = ‘$uid‘
EOF;
//echo $sql_select;
$result = $conn->query( $sql_select ) ;
if ( $result->num_rows <= 0){
    $sql_insert = <<<EOF
insert into user values($uid, ‘$upd‘)
EOF;
    if ( $conn->query($sql_insert) === TRUE )
    {
        echo ‘注册成功‘;
    }
    else {
        echo "注册失败，请重试" . $sql . ‘<br>‘ . $conn->error;
    }
}
else {
    echo "用户已存在";
}
$conn-close();
?>

以上是关于用PHP&JS实现的ID&密码校验程序的主要内容，如果未能解决你的问题，请参考以下文章

计算机组成原理 & 计算机网络几种校验码的java编程实现

请问怎样用js获取账号密码问题

用原生JS&PHP简单的AJAX实例

使用Fetch&promises实现数据交互

vue element-ui 手机号校验 & 验证码校验 & 获取验证码倒数60秒无样式实现

简单的负载均衡算法及其Java代码实现