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

时间: 2017-07-27

JSP + Servlet实现生成登录验证码示例

随机生成四位数验证码,包括汉字,数字,英文大小写. 1.Servlet类 package servlet; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.geom.AffineTransform; import java.awt.geom.Line2D; i

node.js+captchapng+jsonwebtoken实现登录验证示例

提到登录验证,大家肯定能想到的就是12306的验证码了吧.12306为了防止刷票,可以说是煞费苦心,验证码也越来越难识别,最终即使是人也可能识别不了了. 今天,小编就给大家说一下node如何实现图片验证码,以及使用token验证登录.学习本文你将学到: 1.使用captchapng生成图片验证码 2.使用jsonwebtoken实现登录验证 一.图片验证码生成(最后有全部代码) 首先,我们理一下流程,第一步服务器要随机生成一组四位数. 第二步,将这四位数用canvas绘图生成图片. 第三步,我们

JavaScript登录验证码的实现

废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec

js实现登录验证码

Js代码: /** * 验证码 */ function yzm(){ var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',

javascript和jquery分别实现用户登录验证

在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"

JavaScript登录验证基础教程

本文实例为大家分享了js登录验证的具体代码,供大家参考,具体内容如下 1.<script></script>的三种用法: 1.放在<body>中 2.放在<head>中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> &l

Android开发之登录验证实例教程

本文所述实例源自一个项目开发中的登录验证功能,具体的要求就是,在Android端输入用户名和密码,在服务器端验证MySQL数据库中是否有此用户,实现之前当然首要的是,如何使Android端的数据发送到服务器端,具体的实现方法如下: 服务器端:ManageServlet.java代码如下: public class ManageServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServle

javascript cookie用法基础教程(概念,设置,读取及删除)

本文实例讲述了javascript cookie用法.分享给大家供大家参考,具体如下: 一.什么是 cookie? cookie 就是页面用来保存信息,比如自动登录.记住用户名等等. 二.cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量.大小限制 cookie 有过期时间 三.如何使用 cookie? 通过 document.cookie 来写入 cookie <!DOCTYPE HTML> <html lang="en-US"&

[推荐]javascript 面向对象技术基础教程

结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考. 如果不做说明,则文中出现的所有英文语句(程序体除外)都是引自<<javas

javascript 面向对象技术基础教程第1/2页

javascript中的对象还没解释清楚怎么回事,一上来就直奔主题,类/继承/原型/私有变量.... 结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句

JavaScript While 循环基础教程

while 循环 While 循环会在指定条件为真时循环执行代码块. 语法 while (条件) { 需要执行的代码 } 实例 本例中的循环将继续运行,只要变量 i 小于 5: while (i<5) { x=x + "The number is " + i + "<br>"; i++; } 提示:如果您忘记增加条件中所用变量的值,该循环永远不会结束.该可能导致浏览器崩溃. do/while 循环 do/while 循环是 while 循环的变体.

Javascript常用运算符(Operators)-javascript基础教程

javascript基础教程算术运算符 运算符 运算符说明 示例 示例说明 + 加法 x+y 如果x为整数2,y为整数5, x+y等于7 如果x为字符串"text1", y为字符串"fun", x+y则等于"text1fun" - 减法 x-y * 乘法 x*y / 除法 x/y % 两者相除求余数 x%y 如果x等于10, y等于3, x%y结果等于1 ++ 递增 x++ 如果x等于10, x++等于11 -- 递减 y-- 如果y等于10,

JavaScript基础教程——入门必看篇

JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

Javascript基础教程之比较null和undefined值

JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心.在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4UndefinedAndNull</title> </head

Python Flask基础教程示例代码

本文研究的主要是Python Flask基础教程,具体介绍如下. 安装:pip install flask即可 一个简单的Flask from flask import Flask #导入Flask app = Flask(__name__) #创建一个Flask实例 #设置路由,即url @app.route('/') #url对应的函数 def hello_world(): #返回的页面 return 'Hello World!' #这个不是作为模块导入的时候运行,比如这个文件为aa.py,