用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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
jQuery侧边栏实现代码
May 06 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 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开发中常用的字符串操作函数
2011/02/08 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
Javascript事件实例详解
2013/11/06 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
JS实现瀑布流效果
2020/03/07 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python中import机制详解
2017/11/14 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Django 路由控制的实现
2019/07/17 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python实现直播推流效果
2019/11/26 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
YUV转为jpg图像的实现
2019/12/09 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
一年级班主任寄语
2014/01/19 职场文书
2014年医务科工作总结
2014/12/18 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书