本地搭建服务器环境,对表单提交的用户名密码进行验证
工具:wampserver+Navicat Premium+Notepad++
(1)在wamp的www目录下新建文件夹,如下图:
(2)确保wampserver服务器开启,在桌面右下角图标为绿色,在Navicat Premium里写入了两条用户名+密码的数据
(3)在浏览器打开www目录下的文件,并且打开wampserver里的phpMyAdmin,可以查看mysql数据库表格的数据
(4)index.html文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < style > *{margin:0;padding:0} #login-container{position:relative} .content img{width:100%} .header-login{width:350px;height:420px;background:#fff;border-radius:4px;position:absolute;top:25%;right:15%} .login-header-title{height:60px;text-align:center} .login-header-title h4{padding-top:32px;font-size:18px;color:#333;font-weight:100} .tang-pass-login{padding:0 20px 0 20px} input[type='text'],input[type='password']{width:100%;height:40px;border:0;background:rgb(250, 255, 189);font-weight:100;padding-left:16px} #form-name span,#form-pass span{position:absolute;top:10px;right:10px;font-weight:100;display:none;cursor:pointer} #form-name{border:1px solid #eaeaea;border-radius:4px 4px 0 0;position:relative;overflow:hidden} #form-pass{border:1px solid #eaeaea;border-radius:0 0 4px 4px;border-top:0;position:relative;overflow:hidden} input{outline:none} input[type='submit']{width:100%;height:40px;background:#3582f8;border:0;border-radius:4px;color:#fff;font-size:18px;font-weight:400} input[type='checkbox']{vertical-align:middle} #form-checkbox{height:38px;line-height:58px} #form-checkbox span{font-size:14px;vertical-align:middle} #form-submit{padding:20px 0} </ style > </ head > < script src="https://code.jquery.com/jquery-3.1.1.min.js"></ script > < body > <!-- <form action="index.php" method="get"> 用户名<input type="text" name="name"/> 密码 <input type="text" name="password"/> <input type="submit" value="提交"/> </form> --> < div id="login-container"> < div class="content">< img src='login.jpg'/></ div > < div class="header-login"> < div class="login-header-title"> < h4 >账号密码登陆</ h4 > </ div > < div class="tang-pass-login"> < form action="index.php" method="post"> < p id="form-name"> < input type="text" name="name" id="name" placeholder="用户名" /> <!-- oninput="format()" --> < span >×</ span > </ p > < p id="form-pass"> < input type="password" name="password" placeholder="密码"/> < span >×</ span > </ p > < p id="form-checkbox"> < input type="checkbox" name="meberPass"> < span >下次自动登陆</ span > </ p > < p id="form-submit"> < input type="submit" onclick="find()" value="登陆"/> </ p > </ form > </ div > </ div > </ div > </ body > </ html > < script > $(function(){ $("#form-name input,#form-pass input").on('change',function(){ if($(this).val()!==''){ $(this).next().css('display','block'); } }) $("#form-name span,#form-pass span").on('click',function(){ $(this).prev().val(""); $(this).css('display','none') }) }) if(window.localStorage){ //检测浏览器是否支持html5本地存储 var storage=window.localStorage; //html5本地存储 } /* 提交时对数据存储处理 */ function find(){ var user_name=$("[type='text']").val(); var user_pass=$("[type='password']").val(); var data={}; //创建存储用户名密码对象 data.user_name=user_name; data.user_pass=user_pass; console.log(data) //console.log($("input[type='checkbox']").is(':checked')) if($("input[type='checkbox']").is(':checked')&&user_name!==''&&user_pass!==''){ console.log('用户名密码不为空,并且记住了密码') var json=JSON.stringify(data) storage.setItem('form',json); } //在未勾选记住密码时清除本地存储记录数据 if(!$("input[type='checkbox']").is(':checked')){ localStorage.clear() } } /* 页面加载完判断之前是否勾选记住密码 */ window.onload=function(){ var data=storage.getItem('form'); if(data==null){ $("#form-name input,#form-pass input").val(""); }else{ var data=JSON.parse(data); console.log(data) $("[type='text']").val(data.user_name); $("[type='password']").val(data.user_pass); $("[type='checkbox']").attr("checked",true) } } /* 正则验证用户名密码输入是否正确 */ </ script > |
(5)index.php文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <?php header( "Content-type:text/html;charset=gb2312" ); $username = $_POST [ 'name' ]; $password = $_POST [ 'password' ]; if ( empty ( $username )|| empty ( $password )){ echo "用户名与密码不能为空!" ; } else { //mysqli_connect("主机名或IP地址","用户名","密码","数据库名") $conn = mysqli_connect( "localhost:3306" , "root" , "" , "test" ) or die ( "连接数据库服务器失败!" ); if (mysqli_connect_errno( $conn )) { echo "连接 MySQL 失败: " . mysqli_connect_error(); } // 执行查询 //$result=mysqli_query($conn,"SELECT * FROM user"); $query = "select * from user where username ='" . $username . "' and password='" . $password . "'" ; $result =mysqli_query( $conn , $query ); $num = mysqli_num_rows( $result ); //取得结果集中行的数目 if ( $num ){ echo '登录成功' ; die (); } else { echo "登录失败" ; } } /* include("conn.php"); if(empty($username)||empty($password)){ echo "用户名与密码不能为空!"; } */ ?> |
只有以数据库里的数据作为登录账号时才可以登录成功,否则会提示登录失败
同样,暂时没有对用户名进行正则处理,只是为了尝试一下本地对表单的验证,新手刚刚上路,有很多的问题,多多指教。
分类:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· 盘点!HelloGitHub 年度热门开源项目
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· C#使用yield关键字提升迭代性能与效率
· 回顾我的软件开发经历(1)