实现过程示意图

代码



<!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. Visual Format Language(VFL)视图约束

    约束(Constraint)在IOS编程中非常重要,这关乎到用户的直接体验问题. IOS中视图约束有几种方式,常见的是在IB中通过Pin的方式手动添加约束,菜单Editor->Pin->. ...

  2. 【BZOJ5415】【NOI2018】归程（克鲁斯卡尔重构树）

    [NOI2018]归程(克鲁斯卡尔重构树) 题面 洛谷 题解 我在现场竟然没有把这道傻逼题给切掉,身败名裂. 因为这题就是克鲁斯卡尔重构树的模板题啊 我就直接简单的说一下把 首先发现答案就是在只经过海 ...

  3. 菜鸟在线教你用Unity3D开发VR版的Hello World

    大家好,我是菜鸟在线的小编.这篇短文将告诉大家如何用Unity3D开发VR版的Hello World. 1开启SteamVR并连接Vive设备 (a)登录Steam客户端,并点击右上角的VR按钮,这时 ...

  4. linux服务之NTP时间服务器

    1. NTP简介 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.它的用途是把计算机的时钟同步到世界协调时UTC,其精度在局域网内可达0 ...

  5. 51nod 1623 完美消除（数位DP）

    首先考虑一下给一个数如何求它需要多少次操作. 显然用一个单调栈就可以完成:塞入栈中,将比它大的所有数都弹出,如果栈中没有当前数,答案+1. 因为数的范围只有0~9,所以我们可以用一个二进制数来模拟这个 ...

  6. Linux之时间相关操作20170607

    一.Linux常用时间相关函数 -asctime,ctime,getttimeofday,gmtime,localtime,mktime,settimeofday,time asctime       ...

  7. win7右键新建文件夹不见了

    http://zhidao.baidu.com/question/175786636169796084.html 看下注册表文件:reg add "HKEY_CLASSES_ROOT\Dir ...

  8. django2.0 uwsgi nginx

    [TOC]# 1.安装pip```sudo apt-get updatesudo apt-get install python-pip```# 2.使用pip 安装virtualenv 和 virtu ...

  9. web系统中上下移动功能的实现

    其实上移下移的思想分几步: 核心思想:交换两个记录的位置字段的值. 问题:如何根据当前记录,找到前一个或者后一个的记录的位置. 第一:在java类属性定义一个position位置字段,不同的位置pos ...

  10. 解决tomcat占用8080端口问题图文详解

    相信很多朋友都遇到过这样的问题吧,tomcat死机了,重启eclipse之后,发现 Several ports (8080, 8009) required by Tomcat v6.0 Server ...