实现过程示意图

代码



<!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. Cows and Cars UVA - 10491 （古典概率）

    按照题目的去推就好了 两种情况 1.第一次选择奶牛的门  概率是 a/(a+b) 打开c扇门后  除去选择的门 还剩 a-1-c+b扇门  则选到车的概率为b/(a-1-c+b) 2.第一次选择车的门 ...

  2. Redis安装与配置Redis安装与配置

    今天在使用Redis的时候遇到了一些问题,这个问题的解决,发现很多人使用Redis的时候没有一点安全意识.所以又重温了一下Redis,觉得应该写一下Redis的安全和配置. Redis安装与配置Red ...

  3. NOI2014魔法森林题解报告

    题目描述 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 1,2,3,-,n,边标号为 1,2,3,-, ...

  4. 洛谷 P3312 [SDOI2014]数表 解题报告

    P3312 [SDOI2014]数表 题目描述 有一张\(N*M\)的数表,其第\(i\)行第\(j\)列(\(1\le i \le n\),\(1 \le j \le m\))的数值为能同时整除\( ...

  5. ftp server安装与配置

    http://note.youdao.com/noteshare?id=905513cfcdba7d6a8d2fbdd0874a6259

  6. Linux iptables：规则原理和基础

    什么是iptables? iptables是Linux下功能强大的应用层防火墙工具,但了解其规则原理和基础后,配置起来也非常简单. 什么是Netfilter? 说到iptables必然提到Netfil ...

  7. 「Linux」centos7更新python3.6后yum报错问题

    1. #vi /usr/bin/yum 因为我的旧版本是2.7,所以将#!/usr/bin/python改为#!/usr/bin/python2.7就可以了! 退出保存 2.可能还会报错 就修改/us ...

  8. 「Python」19个python编写技巧

    1. 交换赋值 2. Unpacking 3. 使用操作符in 4. 字符串操作 5. 字典键值列表 6. 字典键值判断 7. 字典 get 和 setdefault 方法 8. 判断真伪 9. 遍历 ...

  9. linux shell学习五

    参考:https://www.linuxdaxue.com/ Shell函数 因为函数是脚本类语言,在执行时是逐行执行的,因此,Shell 函数必须先定义后使用. Shell 函数的定义格式如下: [ ...

  10. [USACO07MAR]黄金阵容均衡Gold Balanced L…

    https://www.luogu.org/problem/show?pid=1360 题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many s ...