用JS实现简单的登录验证功能


Posted in Javascript onJuly 28, 2017

实现过程示意图

用JS实现简单的登录验证功能

代码

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>登录</title>
  <style>
    .ok {
      color: green;
      border: 1px solid green;
    }
    .error {
      color: red;
      border: 1px solid red;
    }
  </style>
  <script>
    //校验账号的格式
    function check_code() {
      console.log(1);
      //获取账号
      var code =
        document.getElementById("code").value;
      //校验其格式(\w字母或数字或下划线)
      var span =
        document.getElementById("code_msg");
      var reg = /^\w{6,10}$/;
      if(reg.test(code)) {
        //通过,增加ok样式
        span.className = "ok";
      } else {
        //不通过,增加error样式
        span.className = "error";
      }
    }
    function check_pwd(){
      console.log(2);
      var code2 =document.getElementById("pwd").value;
      var span2 =
        document.getElementById("pwd_msg");
      var reg2 = /^\w{6,10}$/;
      if(reg2.test(code2)) {
        span2.className = "ok";
      } else {
        span2.className = "error";
      }

    }
  </script>
  </head>
  <body>
    <form action="http://www.tmooc.cn">
      <p>
        账号:
        <input type="text" id="code" onblur="check_code()"/>
        <span id="code_msg">6-10位字母、数字、下划线</span>
      </p>
      <p>
        密码:
        <input type="text" id="pwd" onblur="check_pwd()" />
        <span id="pwd_msg">8-20位字母、数字、下划线</span>
      </p>
      <p><input type="submit" value="登录"/></p>
    </form>
  </body>
  </html>

下面在看一段简单的代码关于javascript实现简单的用户登录验证

代码如下所示:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
 </head>
 <body>
   <script type="text/javascript">
     function check() {
    if(document.getElementById("username").value=="") {
        alert("没有输入用户名!");
         return false;
      } else if(document.getElementById("password").value=="") {
        alert("没有输入密码!");
        return false;
      } else {
        alert("提交成功!")
        return true;
       }
    }
   </script>
  <form name="form1">
   <input type="text" id="username">
  <input type="password" id="password" >
  <input type="submit" onclick="check()">
  </form>  
 </body>
 </html>

总结

以上所述是小编给大家介绍的用JS实现简单的登录验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
理解javascript async的用法
Aug 22 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 #Javascript
vue中七牛插件使用的实例代码
Jul 28 #Javascript
Vue.js中的图片引用路径的方式
Jul 28 #Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 #Javascript
详解React 16 中的异常处理
Jul 28 #Javascript
JavaScript截屏功能的实现代码
Jul 28 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php经典算法集锦
2015/11/14 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
js禁止表单重复提交
2017/08/29 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python解析xml文件实例分享
2013/12/04 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python实现单词翻译功能
2017/06/06 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
社区党建工作方案
2014/06/10 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
出国留学自荐信模板
2015/03/06 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
追讨欠款律师函
2015/05/27 职场文书
党支部季度考核意见
2015/06/02 职场文书
爱的教育观后感
2015/06/17 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle