这篇文章主要介绍了射流研究…实现系统登录页的登录和验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
这篇文章用射流研究…显示表单的登录以及验证和对键盘的监听，这里有两种方法，一种是无需用户验证直接登录，一种是需要账户密码匹配才可登录。
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实现系统登录页面的登录和验证。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。