PHP动态网站设计—— 用户登录界面的前端验证设计

1、注册页面的登录窗口界面的制作，我们在这里简单做一个登录界面的HTML如下：<form action=" postLogin. php" method=" post">
<tabLe align="center" border="1" styLe="..." cellpadding="10" cellspacing="0">
<tr>
<td align="right">用户名</td>
<td align="Left"><input name="username "><span cLass="red">*</span></td>
</tr>
<tr>
<td
align="right">密码</td>
<td align="left"><input type= ”password" name=" pw"><span class=" red">*</span></td>
</tr>
<tr>
<td
align="right"><input type=" submit" value=" 提交"></td>
<td
align="Left">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>

2、登录页面的前端验证代码
<script>
function check(){
let username = document . getELementsByName(' username')[0].value. trim();
let pw = document. getELementsByName( 'pw')[0].value. trim();
//用户名验证
let usernameReg = /^[a-zA-Z0-9]{3,10}$/;
if( !usernameReg. test (username)){
alert('用户名必填，且只能大小写字符和数字构成，长度为3到10个字符! ' );
return false;
let pwreg = /^[a-ZA-Z0-9_ *]{6,10}$/;
if(!pwreg.test(pw)){
alert('密码必填，且只能大小写字符和数字，以及*、_构成， 长度为6到10个字符! ' );
return false;
}
return true;
}
</script>
3、postLogin. php后端验证规则设计
<?php
$username = trim($_ POST[ 'username ']);
$pw = trim($_ POST['pw']);
/ /进行必须的验证
if(!strLen($username) 1 !strlen($pw)){
echo "<script>alert(' 用户名和密码都必须要填写);history .back();</script>";
exit;
}
else{
if(!preg_ match( pattern: ' /^[a-ZA-Z0-9]{3, 10}$/', $username)){
echo "<script>alert(用户 名必填，且只能大小写字符和数字构成，长度为3到10个字符! ' );history . back();</script>";
I exit;
}
if(!preg_ match( pattern: ' /^[a-ZA-Z0-9_*]{6,10}$/', $pw)){
echo "<script>alert( 密码必填，且只能大小写字符和数字，以及*、_ 构成， 长度为6到10个字符! ' );history. back();
</script>";
exit;
}

//验证数据库中的用户账号密码是否一致
include_ once "conn. php";//链接数据库
$sqL = "select ★ from info where username = ' $username‘ and pw =’ " . md5($pw) . " ' ";
$result = mysqli_ query($conn, $sql);
$num = mysqli_num_ rows ($result);
if($num){
echo "<script>alert(' 登录成功! ' );</script>";
}
else{
echo "<script>alert( 登录失败! ' );</script>";
}