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

2019-11-19 15:57:44

字体：大中小

来源：转载

供稿：网友

实现过程示意图

这里写图片描述

代码

<!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实现简单的登录验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：vue使用vue-cli快速创建工程

下一篇：基于JavaScript实现图片连播和联级菜单实例代码