| 本文实例为大家分享了js实现登陆与注册功能的具体代码，供大家参考，具体内容如下 1、首先在phpstudy文件中寻找到一个文件名叫 “www” 的文件 在里面创建html，js，php文件； 2、在Navicat 软件中连接到phpstudy的MySQL； 3、在Navicat 软件中寻找一个数据库 并创建一个表格； 4、书写html代码（如下图1）编写简单的注册表单结构 并通过js 给表单验证；点击注册跳转到php文件中； 5、php代码（如下图2） 首先获取html代码中表单的值 然后查找表单的数据 进行判断 如果用户存在就跳转回到上个html页面 用户名设置成功后数据会自动保存到Navicat 软件中的先前创建的表格中，保存之后跳转到登陆页面； 6、跳转到登陆页面 （如图3）；进入登陆页面后可以输入之前注册的用户名和密码进行验证 验证过程是首先验证用户名是否存在然后验证密码是否正确 ； 用户名不存在跳转回去重新输入 密码不正确提用户 重新输入密码；都正确之后跳转到登陆的php文件中； 7、跳转到登陆的php文件中（如图4）；获取登陆名到数据库中进行验证 ；验证哪里出问题就进行弹窗提示；如果验证成功就把用户名保存一份到浏览器中； 8、登陆成功后就可以跳转到我们的首页进行访问 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="register.php" method="POST"> <table> <caption>注册</caption> <tr> <td>用户名：</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password"></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="repass"></td> </tr> <tr> <td>手机号码：</td> <td><input type="text" name="tel"></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" name="email"></td> </tr> <tr> <td><input type="submit" value="注册"></td> </tr> </table> </form></body><script> var form = document.querySelector('form'); var username = document.querySelector('[name="username"]'); var password = document.querySelector('[name="password"]'); var repass = document.querySelector('[name="repass"]'); var tel = document.querySelector('[name="tel"]'); var email = document.querySelector('[name="email"]'); var btn1 = document.querySelector('[type="submit"]'); form.onsubmit = function(){ var reg = /^/w{4,12}$/; if(!reg.test(username.value.trim())){ alert('请正确输入用户名'); return false; } var reg = /^/d{6,16}$/; if(!reg.test(password.value.trim())){ alert('请正确输入密码'); return false; } if(password.value.trim() !== repass.value.trim()){ alert('两次密码输入不正确'); return false; } var reg = /^1[3-9]/d{9}$/; if(!reg.test(tel.value.trim())){ alert('请正确输入手机号'); return false; } var reg = /^([1-9]/d{4,10}@qq|[a-zA-Z]/w{5,17}@(163|126))/.com$/; if(!reg.test(email.value.trim())){ alert('请正确输入邮箱'); return false; } }</script></html><?php// 修订编码格式header("content-type:text/html;charset=utf8");// 提取username的值$username = $_POST['username'];// 提取password的值$password = $_POST['password'];// 提取tel的值$tel = $_POST['tel'];// 提取email的值$email = $_POST['email'];// 连接数据库$con = mysqli_connect("localhost","root","root","test");// 查找数据库里面的用户名$res = mysqli_query($con,"select * from register where username='$username'");// 查找一个数据库的用户名$row = mysqli_fetch_assoc($res);// 判断用户名是否存在if($row){ echo ("<script> alert('用户名已被占用'); location.href='register.html';</script>");}else{ // 给数据库添加数据 $res = mysqli_query($con,"insert register(username,password,tel,email) values('$username','$password',$tel,'$email')"); // 判断 if($res){ echo ("<script> alert('注册成功'); location.href='land.html';</script>"); }else{ echo ("<script> alert('注册失败请重新注册'); location.href='register.html';</script>"); }}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="land.php" method="POST"> <table> <caption>登陆</caption> <tr> <td>用户名：</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" value="登陆"></td> </tr> </table> </form></body><script> var form = document.querySelector('form'); var username = document.querySelector('[name="username"]'); var password = document.querySelector('[name="password"]'); var btn1 = document.querySelector('[type="submit"]'); form.onsubmit = function(){ var reg = /^/w{4,12}$/; if(!reg.test(username.value.trim())){ alert('请正确输入用户名'); return false; } var reg = /^/d{6,16}$/; if(!reg.test(password.value.trim())){ alert('请正确输入密码'); return false; } }</script></html><?phpheader('content-type:text/html;charset=utf8');$username = $_POST['username'];$password = $_POST['password']; $con = mysqli_connect("localhost","root","root","test"); $res = mysqli_query($con,"select * from register where username = '$username'"); $row = mysqli_fetch_assoc($res); if($row){ if($row['password'] === $password){ setcookie('username',$username); echo ("<script> alert('登陆成功'); location.href='comment.html';</script>"); }else{ echo ("<script> alert('密码错误'); location.href='land.html';</script>"); }}else{ echo ("<script> alert('用户名不存在'); location.href='land.html';</script>");}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
用js实现用户注册功能
聊聊Javascript中try catch的2个作用 |
