实现过程示意图

代码



<!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>

　　这个也可以用ｊＱｕｅｒｙ的关于验证的插件去做，也比较简单。

用js实现登录的简单验证的更多相关文章

  1. python练习笔记——编写一个装饰器，模拟登录的简单验证

    编写一个装饰器,模拟登录的简单验证(至验证用户名和密码是否正确) 如果用户名为 root 密码为 123则正确,否则不正确.如果验证不通过则不执行被修饰函数 #编写一个装饰器,模拟登录的简单验证 #只 ...

  2. js 捕捉回车键触发登录，并验证输入内容

    js 捕捉回车键触发登录,并验证输入内容 有时候我们会遇到 web 页面中捕捉按键,触发一些效果, 比如常见的回车键触发登录,并验证输入内容,下面会介绍,截图: 一.最简单的捕捉回车键:判断按下的是不 ...

  3. JS简单验证密码强度

    <input type="password" id="password" value=""/><button id=&qu ...

  4. JS简单验证password强度

    <input type="password" id="password" value=""/><button id=&qu ...

  5. .net 后台中对html标签按钮跳转后台以及后台简单验证

    ---------------------------------学霸,学神,大牛,hacker请绕道de分割线-------------------------------------------- ...

  6. Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...

  7. [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例

    本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...

  8. Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例

    前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...

  9. koa2+mysql+vue实现用户注册、登录、token验证

    说明: node.js提供接口,vue展现页面,前后端分离,出于编辑器功能和编辑习惯,vue用HbuilderX,node.js用VScode.(PS:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...

随机推荐

  1. elasticsearch 第二篇(配置篇)

    配置 在es启动之前可以通过设置启动命令行启动参数.环境变量.文件等方式优化和配置es进行参数 环境变量 名称 示例 说明 ES_MIN_MEM 256M 用于配置java进程分配的最小内存 ES_M ...

  2. 【单调栈】【CF5E】 Bindian Signalizing

    传送门 Description 给你一个环,环上有一些点,点有点权.定义环上两点能相互看见当且仅当两点间存在一个弧使得弧上不存在一个点的点权大于着两个点.求一共有多少个点能互相看到 Input 第一行 ...

  3. 题解【bzoj3529 [SDOI2014]数表】

    Description \(T\) 组询问,定义 \(F(n)=\sum\limits_{d|n}d\).每次给出 \(n,m,a\) 求 \[\sum\limits_{i=1,j=1,F(\gcd( ...

  4. K8S Link

    https://www.cnblogs.com/linuxk/p/9783510.html https://www.cnblogs.com/fengzhihai/p/9851470.html

  5. [吴恩达机器学习笔记]12支持向量机3SVM大间距分类的数学解释

    12.支持向量机 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考资料 斯坦福大学 2014 机器学习教程中文笔记 by 黄海广 12.3 大间距分类背后的数学原理- Mathematic ...

  6. Spring Boot 使用IntelliJ IDEA创建一个web开发实例(一)

    .新建项目File-->New-->Project-->Spring Initializr 点击Finish,一个Spring Boot web应用就创建好了.

  7. 重构改善既有代码设计--重构手法11：Move Field （搬移字段）

    你的程序中,某个字段被其所驻类之外的另一个类更多的用到.在目标类建立一个新字段,修改源字段的所有用户,令它们改用新字段.        动机:在类之间移动状态和行为,是重构过程中必不可少的措施.随着系 ...

  8. SpringCloud（四）服务发现与消费：以ribbon为例

    说明: ribbon是spring-cloud中作为服务消费者的一种角色,客户端可以通过它来对服务提供者的服务进行消费, 比如本例中是服务提供者注册到注册中心,服务提供者提供了一个服务接口,返回一个h ...

  9. MySQL主键和索引的联系及区别

    转载自:http://www.nowamagic.net/librarys/veda/detail/1954 关系数据库依赖于主键,它是数据库物理模式的基石.主键在物理层面上只有两个用途: 惟一地标识 ...

  10. MongoDB常用方法

    一.查询 find方法 db.collection_name.find(); 查询所有的结果: select * from users; db.users.find(); 指定返回那些列(键): se ...