这篇文章主要介绍了射流研究…实现系统登录页的登录和验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
这篇文章用射流研究…显示表单的登录以及验证和对键盘的监听，这里有两种方法，一种是无需用户验证直接登录，一种是需要账户密码匹配才可登录。
1. html代码
div class=内容
div class=登录-换行
表单id=用户登录操作=
h3登录/h3
input class= name name= id= account name type= text placeholder=请输入用户名
输入 class= code name= password id= password type= password placeholder=请输入密码
div class=btn
输入类型=按钮id=提交 class=提交值=登录onclick= return check(this。形式)；”
输入类型=重置 id=重置 class=重置 value=重置
/div
div id= CheckMsg class= msg /div
/表单
/div
/div
2.CSS样式
。内容{填充：0自动；
边距：0自动；
高度：450像素
宽度：100%;
背景：网址（./Image/Login-Img/login_bg.jpg)无重复中心；
背景尺寸：100% 450像素；
边距-顶部：25px
}。登录-结束{
位置：绝对；
宽度：320像素
高度：300像素
边框半径：10px
-WebKit-border-radius:10px；
-moz-border-radius:10px；
右：200像素
边距-顶部：75像素
背景：url(./Image/Login-Img/form_bg.png )无重复；
背景尺寸：100%;
}。登录-包装h3{
颜色：# fff
字体大小：18px
文本对齐：居中；
}。姓名，代码{
边框：1px固体# fff
宽度：230像素
高度：40px
左边距：25px
边距-底部：20px
左填充：40px
}。名称{
背景：url(./Image/log in-Img/user。png’)无重复左；
背景-位置-x:12px；
}。代码{
背景：url(./Image/log in-Img/passwd。png’)无重复左；
背景-位置-x:12px；
}。btn输入{
高度：40px
宽度：120像素
浮动：左；
右边距：25px
边框：无；
颜色：# fff
字体大小：16px
-WebKit-border-radius:10px；
-moz-border-radius:10px；
边框半径：10px
页边距-顶部：10px
光标：指针；
}
输入：活动{border-color:#147a62}。提交{背景：# ea8c37左边距：25px}。重置{背景：# bbb}
/**错误信息提醒**/。消息{
颜色：# ea8c37
字体大小：14px
左填充：40px
填充顶部：10px
明确：两者都有；
字体粗细：粗体；
}
3.JS代码
//验证表单是否为空，若为空则将焦点聚焦在投入表单上，否则表单通过，登录成功
功能检查（表格){
var accountName=$(#accountName )，$ password=$( # password )；
var accountName=accountName.val()，password=$ password。val()；
如果(!accountName || accountName==){
showMsg(请输入用户名);
形式。帐户名。焦点()；
返回错误的
}
如果(!密码||密码==){
showMsg(请输入密码);
形式。密码。焦点()；
返回错误的
}
//这里为用创建交互式、快速动态网页应用的网页开发技术获取用户信息并进行验证，如果账户密码不匹配则登录失败，如不需要验证用户信息，这段可不写
$.ajax({
网址：系统URL，//获取自己系统后台用户信息接口
数据：{ 密码：密码，帐户名：帐户名},
键入：获取，
数据类型： json ，
成功：函数（数据){
如果(数据){
if (data.code==1111) { //判断返回值，这里根据的业务内容可做调整
setTimeout(function () {//做延时以便显示登录状态值
showMsg(正在登录中.);
console.log(数据);
窗户。位置。href=URL//指向登录的页面地址
},100)
}否则{
showMsg(数据。消息)；//显示登录失败的原因
返回错误的
}
}
},
错误：函数（数据){
showMsg(数据。消息)；
}
});
}
//错误信息提醒
函数showMsg(msg){
$(#CheckMsg )。文本(msg)；
}
//侦听Enter键提交
$(function(){
document . onkeydown=keydown search；
功能键向下搜索(e) {
//兼容FF和IE以及Opera
var theEvent=e | | window.event
var code=the event . key code | | the event . which | | the event . charcode；
if (code==13) {
$(#submit )。单击()；//具体处理功能
返回false
}
返回true
}
});
到这里，一个完整的登录界面就结束了。让我们看看登录失败和成功的影响：
以上是边肖介绍的JS实现系统登录页面的登录和验证。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
