zoukankan html css js c++ java

前端小白之每天学习记录----php（5）表单验证

1.引入文件

require 与 nclude 语句

跟文件的路径

eg:require( "./a.php" );

2.新建一个数据库配置文件（新建config.php）

<?php
    $config = array(
        'hostName' => 'localhost',//主机名
        'userPwd' => 'root',//用户密码
        'userName' => 'root', //用户名    
        'dbName' => 'company_info',//数据库名
        'code' => 'utf8'
    );
?>

3.封装数据库连接（新建connect.php）

<?php
    require( "./config.php" );//引入配置文件

    // $link = mysql_connect( "localhost", "root", "root" );
    // if( !$link ){
    //     die(mysql_error());
    // }
    // mysql_query( "set names utf8");
    // mysql_select_db( "company_info" );

    $link = mysql_connect( $config['hostName'], $config['userName'], $config['userPwd'] );

    if( !$link ){
        die(mysql_error());
    }
    mysql_query( "set names " .  $config['code'] );
    mysql_select_db( $config['dbName'] );

?>

4.简单的用户名格式验证（不涉及后台数据，新建onsubmit.html文件）

因为后台数据的交互需要时间，所以先验证出正确格式的用户名，在去后台验证用户名密码是否正确。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload =() => {
            let oForm = document.querySelector("#form");
            let oUser = document.querySelector("#user");
            //表单提交的时候， 会触发onsubmit事件
            oForm.onsubmit = () => {
                // alert( '表单触发了提交事件' );
                //阻止表单提交
                // return false;
                if( user.value.length == 0 ){//没输入是阻止提交
                    return false;
                };
                if( document.querySelector("#tip").innerHTML =='非法'){//用户名错误时阻止提交
                    return false;
                }
            } 

            // oUser.onchange = () =>{
            oUser.onkeyup = () =>{
                // alert(this + '
' + this.value);
                // alert( oUser.value );
                var re = /^w{6,20}$/;//匹配用户名的格式的正则：6-20位的非特殊字符---->更多匹配请自行百度
                if( re.test( oUser.value ) ){
                    document.querySelector("#tip").innerHTML = '合法';
                }else {
                    document.querySelector("#tip").innerHTML = '非法';
                }
            }
        }
    </script>
</head>
<body>
   <form action="http://www.baidu.com/s" target="_blank" id="form">
        <input type="text" name="wd" id="user">
        <span id="tip"></span>
        <br>
        <input type="submit" value="提交数据到百度去" id="btn">
    </form> 
</body>
</html>

5.用户名密码登录验证（后台验证）（新建login.php）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .reg-form {
      margin-top: 100px;
    }
  </style>
</head>

<body>

  <?php
require( './connect.php' );//链接数据库
?>  
    <div class="container">
      <div class="row">
        <div class="tip"></div>
        <form class="form-horizontal reg-form" role="form" method="post">
          <!-- post 方式提交数据 -->
          <div class="form-group">
            <label for="firstname" class="col-md-2 control-label">用户名:</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-md-2 control-label">密码</label>
            <div class="col-md-6">
              <input type="password" name="pwd" class="form-control" id="pwd" placeholder="请输入密码">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary">登录</button>
            </div>
          </div>
        </form>
      </div>
    </div>

<?php
if( !empty( $_POST['user'] ) && !empty( $_POST['pwd'] ) ){//用户名密码非空
    $userName = $_POST['user'];
    $userPwd = $_POST['pwd'];
    $sql = "SELECT * FROM user_info WHERE user_name = '$userName' AND user_pwd = '$userPwd'"; 
    $res = mysql_query( $sql ); //查询用户名与密码
    if( $res && mysql_num_rows( $res ) ){   //判断用户名密码正确
        // header("Location:success.html");
        header("Location:http://www.baidu.com"); //用户名密码正确跳转到百度
?>
    <!-- <script>
        window.location.href = './success.html';
    </script> -->
<?php
    }else {
        header("Location:error.html"); //用户名密码错误，跳转到失败页面
?>
    <!-- <script>
        window.location.href = './error.html';
    </script> -->
<?php
    }
}
?>
</body>
</html>

6.注册验证用户名是否存在（新建reg.php）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .reg-form {
      margin-top: 100px;
    }
  </style>
</head>

<body>

  <?php
require( './connect.php' );//链接数据库
?>


    <div class="container">
      <div class="row">
        <div class="tip"></div>
        <form class="form-horizontal reg-form" role="form" method="post">
          <div class="form-group">
            <label for="firstname" class="col-md-2 control-label">用户名:</label>
            <div class="col-md-6">
              <input type="text" class="form-control" id="user" name="user" placeholder="请输入用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-md-2 control-label">密码</label>
            <div class="col-md-6">
              <input type="password" name="pwd" class="form-control" id="pwd" placeholder="请输入密码">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-primary">注册</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <?php
if( !empty( $_POST['user'] ) && !empty( $_POST['pwd'] ) ){//用户名密码非空
    $userName = $_POST['user'];
    $userPwd = $_POST['pwd'];
    $sql = 'SELECT * FROM user_info WHERE user_name = "' . $userName . '"';
    $res = mysql_query( $sql );//查询用户名
    if( $res && mysql_num_rows( $res ) ){ //用户名存在
       ?>
        <script>
            document.querySelector(".tip").innerHTML = '你输入的用户名已经存在';
        </script> 
       <?php 
    }else { //用户名不存在，开始注册了
        $sql = "INSERT INTO user_info ( user_name, user_pwd ) VALUES( '$userName', '$userPwd' )";
        $res = mysql_query( $sql );
        if( $res !== false ){//判断语句执行情况
            ?>
        <script>
            document.querySelector(".tip").innerHTML = '用户名注册成功';
        </script> 
            <?php
        }else {
            ?>
        <script>
            document.querySelector(".tip").innerHTML = '用户名注册失败';
        </script> 
            <?php
        }
    }
}
?>
</body>
</html>

　7.留言板（message.php）

需要新建表massage （表有三列msg_id，title，content）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .my-form {
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <form action="" class="form-horizontal my-form" method="post">
                    <div class="form-group">
                        <label for="" class="control-label col-md-2">标题:</label>
                        <div class="col-md-8">
                            <input type="text" name="title" class="form-control">
                        </div> 
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-8">
                            <textarea name="content"  class="form-control" id="" cols="10" rows="5"></textarea>
                        </div> 
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-8">
                            <button type="submit" class="btn btn-primary">发布</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <?php
        require("connect.php");
    ?>
    <?php
        if( !empty( $_POST['title'] ) && !empty( $_POST['content'] ) ){
            $title = $_POST['title'];
            $content=  $_POST['content'];
            $sql = "INSERT INTO message( title, content ) VALUES( '$title', '$content' )";
            $res = mysql_query( $sql );
            if( $res !== false ){
                echo "<script>alert('留言发布成功');</script>";
            }else {
                echo "<script>alert('留言发布失败');</script>";
            }
        }
    ?>

 <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
<ul>
    <?php
        $sql = "SELECT * FROM message";//查询
        $res = mysql_query( $sql );
        while( $row = mysql_fetch_assoc( $res ) ){
            //php，html混编
?>
        <li>
            <?php echo $row['title']; ?>
            <p><?php echo $row['content']; ?></p>
        </li>
<?php
        }
?>
</ul>
        </div>
    </div>
</div>



</body>
</html>

查看全文

相关阅读:
分库分表(1) --- 理论
 Elasticsearch(10) --- 内置分词器、中文分词器
 Elasticsearch(9) --- 聚合查询(Bucket聚合)
Elasticsearch(8) --- 聚合查询(Metric聚合)
Elasticsearch(7) --- 复合查询
 Elasticsearch(6) --- Query查询和Filter查询
 Elasticsearch(5) --- 基本命令(集群相关命令、索引CRUD命令、文档CRUD命令)
第二周 Word版面设计
 第六周 Word目录和索引
 第五周 Word注释与交叉引用

原文地址：https://www.cnblogs.com/szlxb/p/7340130.html