zoukankan      html  css  js  c++  java
  • 表单验证(前端后台操作)

      今天在做表单提交的项目中,和公司中的后台人员简单的学习了一下表单的前端和后台是怎样进行数据操作的.(下面仅仅是一个小例子,毕竟我是前端工程师,不太懂后台的东西...(嘿嘿));

    首先要有一个服务器进行保存数据,本文中使用的是MYSQL服务器,此服务器比较强大,能够完美与php兼容,使用简单,最重要的是他是免费的...其他服务器有Oracle、Microsoft SQL Server 和IBM DB2 、sqllite都是关系型数据库系统

    (database system),可以选择使用.

      首先要有自己html代码  如下(比较简单,不进行注释)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>注册页面</title>
    </head>
    <body>
    <form action="http://127.0.0.1/160811/php/phpDay4/前端/2.register.php" method="post" accept-charset="utf-8">
    <!-- format属性 -->
    <label>姓名:<input type="text" name="name" autocomplete="off" placeholder="请输入用户" maxlength="5" ></label><br>
    <label>密码:<input type="password" name="pwd"></label><br>
    <label>邮箱:<input type="email" name="email"></label><br>
    <label>性别:<input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女</label><br>
    <label>爱好:<input type="checkbox" name="hobby[]" value="篮球">篮球
    <input type="checkbox" name="hobby[]" value="美女">美女
    <input type="checkbox" name="hobby[]" value="金钱">金钱
    </label><br>

    <input type="submit" value="注册">
    </form>
    </body>
    </html>

    php代码:

    前端页面method 用post方式
    后台php用 $name = $_POST["name"] 的形式接收 表单中的数据
    在将数据保存到数据库中
    if($name){
    //链接到服务器
    $con = mysql_connect('127.0.0.1',"root","");//括号内分别是 服务器地址+端口号(端口号可省略),服务器名字,服务器密码.

    //如果链接到服务器
    if($con){
    mysql_select_db("160811"); // 进行操作的数据库
    mysql_query("set names utf8"); // 解析汉字,使数据能以汉字形式出现
    $findSql = "SELECT * FROM user_info WHERE user_name = '$name'"; //搜索整个数据库, user_info是数据库的表格名字, WHERE后面 索引到具体要对哪一行进行操作.

    $res = mysql_query($insertSql); //执行语句 数据库的增删改查等操作 都会用这条语句执行

    if ($res && mysql_num_rows($res) > 0) { //如果数据库中存在输入进来的name
    echo "<script>window.history.back();alert('该用户名已被注册')</script>"; //alert 并返回上一步
    }else{
    $res = mysql_query("INSERT INTO user_info (user_name) VALUES ('$name')"); //数据添加到数据库中
    }

    }
    }

    以上是注册信息代码

    登录界面的html代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>登录</title>
    <style type="text/css">
    *{margin: 0;padding: 0}
    div{border:1px solid black; 200px;margin: 50px auto;background-color: lightcyan;box-shadow: -2px -2px 5px blue;}
    a{font-size: 15px;text-decoration: none;}
    </style>
    </head>
    <body>
    <div>
    <form action="http://127.0.0.1/160811/php/phpDay4/%E5%90%8E%E7%AB%AF/denglu.php" method="post" accept-charset="utf-8" style="line-height: 40px">
    <label>用户名:<input type="text" name="name" placeholder="请输入用户名" maxlength="5"></label><br>
    <label>密码&nbsp;&nbsp;&nbsp; :<input type="password" name="pwd" placeholder="密码"></label><br>
    <input type="submit" value="登录" style="margin-left: 85px"><br>
    <a href="http://127.0.0.1/160811/php/phpDay4/%E5%89%8D%E7%AB%AF/%E9%87%8D%E7%BD%AE%E5%AF%86%E7%A0%81.html">忘记密码?</a>
    <a href="http://127.0.0.1/160811/php/phpDay4/%E5%89%8D%E7%AB%AF/1.%E6%B3%A8%E5%86%8C.html" style="margin-left: 90px;">注册</a>
    </form>
    </div>
    </body>
    </html>

    登录界面的php代码

    <?php
    $name = $_POST["name"];
    $pwd = $_POST["pwd"];
    if ($name && $pwd) {
    $con = mysql_connect("127.0.0.1","root","");
    if ($con) {
    mysql_select_db("160811");
    mysql_query("set names utf8");
    $findSql = "SELECT *FROM user_info WHERE user_name = '$name' And user_pwd = '$pwd'";
    $res = mysql_query($findSql);
    if ($res && mysql_num_rows($res) > 0) {
    echo "<script>alert('登录成功')</script>";
    }else{
    echo "<script>alert('登录失败')</script>";
    }
    }
    }

    ?>

    重置密码的html代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <form action="http://127.0.0.1/160811/php/phpDay4/%E5%89%8D%E7%AB%AF/%E9%87%8D%E7%BD%AE%E5%AF%86%E7%A0%81.php" method="post" >
    <label>姓名:<input type="text" name="name" autocomplete="off" placeholder="请输入用户名" maxlength="5"></label><br>
    <label>邮箱:<input type="email" name="email" placeholder="注意格式"></label><br>
    <label>性别:<input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女</label><br>
    <label>爱好:<input type="checkbox" name="hobby[]" value="篮球">篮球
    <input type="checkbox" name="hobby[]" value="美女">美女
    <input type="checkbox" name="hobby[]" value="金钱">金钱
    </label><br>
    <label>输入新密码:<input type="password" name="pwd"></label><br>
    <input type="submit" value="输入正确提交后可重置密码">
    </form>
    </body>
    </html>

    重置密码的php代码如下

    <?php
    $name = $_POST["name"];
    $email = $_POST["email"];
    $sex = $_POST["sex"];
    $hobby = $_POST["hobby"];
    $pwd = $_POST["pwd"];
    if ($name && $email && $sex && $hobby) {
    $con = mysql_connect("127.0.0.1","root","");
    if ($con) {
    mysql_select_db("160811");
    mysql_query("set names utf8");
    $hobbyStr = implode("-", $hobby);
    $findSql = "SELECT * FROM user_info WHERE user_name = '$name' AND user_sex = '$sex' AND user_hobby = '$hobbyStr'";
    $res = mysql_query($findSql);
    if ($res && mysql_num_rows($res) > 0) {
    $update = "UPDATE user_info SET user_pwd = '$pwd' WHERE user_name = '$name'";
    mysql_query($update);
    echo "<script>alert('修改完成');window.location.href = 'http://127.0.0.1/160811/php/phpDay4/%E5%89%8D%E7%AB%AF/%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2.html'</script>";
    }else{
    echo "<script>alert('输入错误,请重试');window.history.back();</script>";
    }
    }
    }
    ?>

      注:  php代码的注释在注册信息代码中显示,后面的php代码与注释与注册信息代码大同小异.

  • 相关阅读:
    为什么Go没有三元运算符
    [Win10]鼠标没用,插入USB口电脑提示USB Optical Mouse找不到驱动程序的解决方案
    Office2016软件安装教程
    office2019软件安装教程
    Go语言 科学计算库 Gonum 学习1
    AI Studio 学习 Go 豆瓣电影爬取
    Git下载、安装与环境配置
    VueJS 数组哪些方法是响应式的
    VueJS v-for
    VueJS v-show
  • 原文地址:https://www.cnblogs.com/sunweinan/p/6139377.html
Copyright © 2011-2022 走看看