HTML 管理员登陆小功能连接数据库

<h3>后台管理员登录</h3>
       <form>
           管理员名称：<input type="text" value="" id="aname" /><br />
           管理员密码：<input type="password" value="" id="apwd" /><br />
           <span id="tip" style="color: red;"></span><br />
           <input type="button" id="btn" value="登录" />
       </form>       
       <script>
           //1.获取登录按钮，id=btn 并且绑定点击事件 onclick
           btn.οnclick=function(){
           //1.1创建正则表达式验证用户名密码，字母数字3~11
           var reg=/^[a-zA-Z0-9]{3,11}$/
           //1.2判断如果管理员与正则表达式不同

               if(!reg.test(aname.value)){
               //1.3在id=msg 管理员名称格式错误
                   tip.innerHTML="管理员名称错误";
                   //1.4停止函数执行
                   return;
               }
               //1.5判断如果管理员密码与正则表达式不同
               if(!reg.test(apwd.value)){
                   //1.6在id=msg 管理员密码格式错误
                   tip.innerHTML="密码格式错误";
                   //1.7停止函数执行
                   return;
               }
               console.log(aname.value+" "+apwd.value);
               // 创建xhr对象
               var xhr=new XMLHttpRequest();
               // 打开网络连接
               var url="http://127.0.0.1:3000/admin/login";
               xhr.open("POST",url,true);
               // 修改请求主体数据格式
               xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
               // 发送数据 aname=tom&apwd=123 类型
               var date=`aname=${aname.value}&apwd=${apwd.value}`;
               xhr.send(date);
               // 为xhr绑定事件 onreadystatechange
               xhr.onreadystatechange=function(){
                   // console.log(xhr.readyState);
                   // 判断 readyState === 4 status === 200
                   if(xhr.readyState===4 && xhr.status===200){
                       // 获取服务器返回数据
                       // 将服务器json数据转换js对象
                       var obj=JSON.parse(xhr.responseText);
                       console.log(obj);
                       // 如果code：0 tip.innerHTML = 用户名或密码错误
                       if(obj.code===0){
                           tip.innerHTML="没有用户信息";
                       }else{
                           // 如果code：1 跳转 main.html
                           location.href="main.html";
                       }
               }
               }
           }
       </script>

HTML 管理员登陆小功能连接数据库相关推荐

iOS 生成带 logo 的二维码，区域截屏保存至相册（小功能二连发 (一)）
原文链接:http://www.jianshu.com/p/36e9f012ef39 生成带 logo 的二维码区域截屏相关 -- 由3033分享开篇最近项目需要搞了几个相对独立的小功能,今天有 ...
高德地图小蓝点_一会晴天一会下雨？夏日想要顺利出行高德地图这些小功能最实用...
不同于其他三个季节,夏天总是有很多种烦恼,变化不定的天气就是其中最为影响出行的一项因素.而面对忽晴忽雨的天气,如何才能在夏日顺利出行呢?看看高德地图的这些实用小功能吧. ·实时天气预报高德地图可以实 ...
猫猫学iOS（四十五）之常用的小功能比如打电话、打开网址、发邮件、发短信打开其他应用。...
猫猫分享,必须精品原创文章,欢迎转载.转载请注明:翟乃玉的博客地址:http://blog.csdn.net/u013357243?viewmode=contents 简介 iOS中的很多小功能都 ...
手机息屏后停止_手机息屏还能这样玩？华为这几个隐藏小功能快学起来
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,如有侵 ...
android 常用小功能(第二版)
经历过一段岁月,转眼2013的半年都过去了,第二版整理好的小功能,答应大家发布的,直到今日,终于和大家相见了,第二版没有第一版多,大家也可以去参考第一版的内容,希望大家使用愉快! 目录: 1.获取当前 ...
Unity3D小功能小技巧小教程小原理(持续更新...)
Unity3D小功能小技巧小教程小原理(持续更新...) 1.Unity的.NET版本是2.0 按道理来说,C#能用的功能Unity也能用,但是Unity的.NET却不是最新版要是用一些别的D ...
一个时间日期转换格式的小功能(Oracle)
一个时间日期转换格式的小功能 SQL> SELECT TO_CHAR(SYSDATE,'SSSSS'),sysdate FROM DUAL; TO_CH SYSDATE ----- ------ ...
WPF制作的一个小功能,智能提示(IntelliSense)
WPF制作的一个小功能,智能提示(IntelliSense) 原文 http://www.cnblogs.com/scheshan/archive/2012/06/30/2570867.html 最近 ...
android小米计算器布局,小米这8个逆天小功能一定用起来！不会用，手机简直白买...
小米的性价比一直都挺高的,而且其自带的MIUI系统,不仅颜值高,还拥有很多人性化的功能.那么今天我们就来盘点一下小米那些逆天的小功能吧!下面就一起来了解一下,看看你是否都会用~ 点击添加图片描述(最多 ...
给 OpenPOP.Net 加一个小功能,可用于收取邮件时监测数据流量!
/* 最近写了一个自动收邮件的机器人,原来一开始偷懒"娶"了 COM 组件 JMail: <封装 JMail 4.4 的 POP3 为 .Net 组件 (.dll 程序集), ...

HTML 管理员登陆小功能连接数据库