详解射流研究…实现系统登录页的登录和验证

这篇文章用射流研究…显示表单的登录以及验证和对键盘的监听，这里有两种方法，一种是无需用户验证直接登录，一种是需要账户密码匹配才可登录。

1.超文本标记语言代码

div class=' content ' div class=' log in-wrap '表单id='user_login '操作h3登录/h3输入类=' name ' name=' id='帐户名' type=' text '占位符='请输入用户名input class=' code ' name=' password ' id=' password ' type=' password '占位符='请输入密码div class='btn '输入类型=' button ' id=' submit ' class=' submit ' value='登录onclick="返回支票(这个。表单)；”输入类型=' reset ' id=' reset ' class=' reset ' value='重置/div div id=' CheckMSg ' class=' MSg '/div/form/div/div 2 .半铸钢钢性铸铁(铸造半钢)样式。内容{ padding:0 automargin: 0 auto高度： 450像素；宽度： 100%;背景：网址(./Image/Login-Img/login_bg.jpg)无重复中心；背景尺寸：100% 450像素；边距-top : 25px；}.log in-wrap {位置：绝对；宽度宽度：320像素宽度： 300像素边界半径： 10px-web套件-边框-半径： 10px-moz-border-半径： 10px右：200px边距-top : 75px；背景： url('./Image/log in-Img/form _ BG。png ')不重复；背景尺寸： 100%;}.登录-包装H3 { color : # fff；font-size : 18px文本对齐：中心；}.姓名，代码{ border:1px固体# fff宽度宽度：230像素高度： 40px左边距左： 25px边距-底部： 20px左填充left: 40px}。名称{ background: url('./Image/Login-Img/user.png ')无重复左；背景-位置-x :12 px；}.代码{ background: url('./Image/Login-Img/passwd.png ')无重复左；背景-位置-x :12 px；}.按钮输入{高： 40像素宽度： 120像素；向左浮动：右边距： 25pxborder : none color : # ffffont-size : 16px；-web套件-边框-半径： 10px-moz-border-半径： 10px边框半径： 10px页边距-top : 10px；光标：指针；}输入：活动{边框颜色： # 147 a 62 } .提交{背景： # ea 8 c 37左边距left: 25px}。重置{ background: # bbb}/**错误信息提醒**/.味精{ color : # ea 8 c 37font-size : 14px左填充left : 40pxpadding-top : 10px；clear:两者；字体粗细：粗体；}3.射流研究…代码

//验证表单是否为空。如果为空，则关注输入表单，否则表单通过，登录成功。函数check(form){ var account name=$(' # account name ')，$ password=$(' # password ')；var accountName=accountName.val()，password=$ password . val()；if(！account name | | account name==' '){ show msg('请输入用户名')；form . account name . focus()；返回false} if(！password | | password==' '){ show msg('请输入密码')；form . password . focus()；返回false}//这里，我们使用ajax获取用户信息并进行验证。如果帐户密码不匹配，登录将失败。如果不需要验证用户信息，可以不写$。Ajax ({url3360systemurl，//获取自己的系统后台用户信息界面data 3360 { ' password ' 3360 password，Account name' : account name}，键入：' get '，datatype :' JSON '，success : function(data){ if(data){ if(data。代码==' 1111 '){//确定返回值。根据业务内容，可以调整setTimeout(函数(){//)显示登录状态值showMsg('登录.');console.log(数据)；window . location . href=URL；//指向登录页面地址}，100)} else { show msg(data . message)；//显示登录失败原因返回false} } }，错误：函数(数据){ showMsg(data . message)；} });}//错误消息提醒函数showmsg (msg) {$ ('# checkmsg ')。文本(msg)；}//听回车键提交$(function(){ document . onkeydown=keydowsearch；函数keyDownSearch(e) {//兼容FF和IE，opera var the event=e | | window . event；var code=theevent . key code | | theevent . what | | theevent . charcode；if(代码==13) { $('#submit '))。单击()；//具体处理函数返回false}返回true}});至此，一个完整的登录界面结束。让我们看看登录失败和成功的影响：

以上就是边肖介绍的JS系统登录页面登录和验证的详细集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！