Javascript 如何检查用户并通过然后重定向

这是我在项目中使用的模板：

我想在phpMyAdmin中使用该登录模板来检查用户名和密码

用户输入他们的帐户，然后单击提交按钮

单击submit按钮后，图标将从箭头变为动画圆圈（此时我希望它使用数据库phpMyAdmin检查用户和密码）

如果他们的帐户和密码与数据库匹配，它将显示“登录成功”消息，如果他们不匹配，将显示“错误的用户名或密码”消息

如果用户名和密码匹配，请等待3秒钟，然后重定向到其他页面

我不知道如何将我的phpMyAdmin与此登录表单结合起来。所以，如果你知道如何做到这一点，请告诉或建议我如何才能完成这个项目

这是我的密码：

html，
身体{
背景：#efef；
填充：10px；
字体系列：“瓦雷拉圆形”；
}
/*=== 2. 锚链===*/
a{
颜色：#AAAAA；
过渡：所有输入输出均为200ms；
}
a:悬停{
颜色：#333333；
文字装饰：无；
}
/*=== 3. 框外文本===*/
.etc登录表{
颜色：#919191；
填充：10px 20px；
}
.etc登录表p{
边缘底部：5px；
}
/*=== 4. 主要形式===*/
.login-form-1{
最大宽度：300px；
边界半径：5px；
显示：内联块；
}
.主要登入表格{
位置：相对位置；
}
.login-form-1.form控件{
边界：0；
盒影：0；
边界半径：0；
背景：透明；
颜色：#555555；
填充：7px0；
字体大小：粗体；
高度：自动；
}
.login-form-1.form控件：--webkit输入占位符{
颜色：#999999；
}
.login-form-1.form控件：-moz占位符，
.login-form-1.form控件：--moz占位符，
.login-form-1.表单控件：-ms输入占位符{
颜色：#999999；
}
.login-form-1.form组{
页边距底部：0；
边框底部：2倍实心#EFEF；
右边填充：20px；
位置：相对位置；
}
.login-form-1.表单组：最后一个子{
边界底部：0；
}
.登录组{
背景：#ffffff；
颜色：#999999；
边界半径：8px；
填充：10px 20px；
}
.登录组复选框{
填充：5px0；
}
/*=== 5. 登录按钮===*/
.login-form-1.登录按钮{
位置：绝对位置；
右：-25px；
最高：50%；
背景：#ffffff；
颜色：#999999；
填充：11px0；
宽度：50px；
高度：50px；
利润上限：-25px；
边框：5px实心#efef；
边界半径：50%；
过渡：所有输入输出均为500ms；
}
.login-form-1.登录按钮：悬停{
颜色：#555555；
变换：旋转（450度）；
}
.login-form-1.login-button.clicked{
颜色：#555555；
}
.login-form-1.登录按钮。单击：悬停{
转化：无；
}
.login-form-1.login-button.clicked.success{
颜色：#2ecc71；
}
.login-form-1.login-button.clicked.error{
颜色：#e74c3c；
}
/*=== 6. 表格无效===*/
label.form-invalid{
位置：绝对位置；
排名：0；
右：0；
z指数：5；
显示：块；
利润上限：-25px；
填充：7px 9px；
背景#777777；
颜色：#ffffff；
边界半径：5px；
字体大小：粗体；
字体大小：11px；
}
标签。表单无效：之后{
最高：100%；
右：10px；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：透明；
边框顶部颜色：#777777；
边框宽度：6px；
}
/*=== 7. 表格-主要讯息===*/
.登录表单主消息{
背景：#ffffff；
颜色：#999999；
左边框：3倍实心透明；
边界半径：3px；
边缘底部：8px；
字体大小：粗体；
身高：0；
填充：0 20px 0 17px；
不透明度：0；
过渡：所有输入输出均为200ms；
}
.login-form-main-message.show{
高度：自动；
不透明度：1；
填充：10px 20px 10px 17px；
}
.login-form-main-message.success{
左边框颜色：#2ecc71；
}
.login-form-main-message.error{
左边框颜色：#e74c3c；
}
/*=== 8. 自定义复选框和收音机===*/
/*标签样式的基础*/
[type=“checkbox”]：未（：选中），
[type=“checkbox”]：选中，
[type=“radio”]：未（：选中），
[type=“radio”]：选中{
位置：绝对位置；
左：-9999px；
}
[type=“checkbox”]：未（：选中）+标签，
[type=“checkbox”]：选中+标签，
[type=“radio”]：未（：选中）+标签，
[type=“radio”]：选中+标签{
位置：相对位置；
左侧填充：25px；
垫面：1px；
光标：指针；
}
/*复选框方面*/
[type=“checkbox”]：未（：选中）+标签：在，
[type=“checkbox”]：选中+标签：在，
[type=“radio”]：未（：选中）+标签：在，
[type=“radio”]：选中+标签：之前{
内容：''；
位置：绝对位置；
左：0；
顶部：2个；
宽度：17px；
高度：17px；
边框：0px实心#aaa；
背景：#f0；
边界半径：3px；
长方体阴影：插入0 1px 3px rgba（0,0,0,0.3）；
}
/*复选标记方面*/
[type=“checkbox”]：未（：选中）+标签：之后，
[type=“checkbox”]：选中+标签：之后，
[type=“radio”]：未（：选中）+标签：之后，
[type=“radio”]：选中+标签：之后{
位置：绝对位置；
颜色：#555555；
过渡：all.2s；
}
/*选中标记方面的更改*/
[type=“checkbox”]：未（：选中）+标签：之后，
[type=“radio”]：未（：选中）+标签：之后{
不透明度：0；
变换：比例（0）；
}
[type=“checkbox”]：选中+标签：之后，
[type=“radio”]：选中+标签：之后{
不透明度：1；
变换：比例（1）；
}
/*禁用复选框*/
[type=“checkbox”]：禁用：未（：选中）+标签：在，
[type=“checkbox”]：禁用：选中+标签：之前，
[type=“radio”]：禁用：未（：选中）+标签：在，
[type=“radio”]：禁用：选中+标签：之前{
盒影：无；
边框颜色：#8c8c8c；
背景色：#878787；
}
[type=“checkbox”]：禁用：选中+标签：之后，
[type=“radio”]：禁用：选中+标签：之后{
颜色：#555555；
}
[type=“checkbox”]：禁用+标签，
[type=“radio”]：禁用+标签{
颜色：#8c8c8c；
}
/*可达性*/
[type=“checkbox”]：选中：焦点+标签：在，
[type=“checkbox”]：未（：选中）：焦点+标签：在，
[type=“checkbox”]：选中：foc