用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脚本
Aug 04 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
Javascript闭包实例详解
Nov 29 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
vuex入门最详细整理
Mar 04 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
详解VUE前端按钮权限控制
2019/04/26 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
学院领导推荐信
2013/10/30 职场文书
财务简历的自我评价
2014/03/05 职场文书
初三学习决心书
2014/03/11 职场文书
事业单位考核材料
2014/05/21 职场文书
工地质量标语
2014/06/12 职场文书
建筑工地质量标语
2014/06/12 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
民政工作个人总结
2015/02/28 职场文书
小数乘法教学反思
2016/02/22 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL