用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>
这个也可以用ｊＱｕｅｒｙ的关于验证的插件去做，也比较简单。
用js实现登录的简单验证的更多相关文章
- python练习笔记——编写一个装饰器，模拟登录的简单验证
编写一个装饰器,模拟登录的简单验证(至验证用户名和密码是否正确) 如果用户名为 root 密码为 123则正确,否则不正确.如果验证不通过则不执行被修饰函数 #编写一个装饰器,模拟登录的简单验证 #只 ...
- js 捕捉回车键触发登录，并验证输入内容
js 捕捉回车键触发登录,并验证输入内容 有时候我们会遇到 web 页面中捕捉按键,触发一些效果, 比如常见的回车键触发登录,并验证输入内容,下面会介绍,截图: 一.最简单的捕捉回车键:判断按下的是不 ...
- JS简单验证密码强度
<input type="password" id="password" value=""/><button id=&qu ...
- JS简单验证password强度
<input type="password" id="password" value=""/><button id=&qu ...
- .net 后台中对html标签按钮跳转后台以及后台简单验证
---------------------------------学霸,学神,大牛,hacker请绕道de分割线-------------------------------------------- ...
- Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- koa2+mysql+vue实现用户注册、登录、token验证
说明: node.js提供接口,vue展现页面,前后端分离,出于编辑器功能和编辑习惯,vue用HbuilderX,node.js用VScode.(PS:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...
随机推荐
- SMBv3空指针引用dos漏洞复现
0x01 前言 去年年底,当设置一个模拟器来定位SMB协议时,发现了一个如此简单而又非常有效的攻击大型企业的漏洞.TL; DR:一个拒绝服务错误允许BSOD协议向Windows 8.1和Windows ...
- bzoj4569: [Scoi2016]萌萌哒（ST表+并查集）
好喵喵的题 将一个要求用ST表分割成logn个要求,如果把f[i][j]和f[u][v]在同一个集合,那么f[i][j-1]和f[u][v-1],f[i+2^(j-1)][j-1]和f[u][u+2^ ...
- 专题训练之区间DP
例题:以下例题部分的内容来自https://blog.csdn.net/my_sunshine26/article/details/77141398 一.石子合并问题 1.(NYOJ737)http: ...
- 批量修改历史commit的用户名user.name邮箱user.email
配置当前的用户名邮箱可以当前项目配置或者全局配置. 仅当前项目配置: git config user.name 'your-user-name' git config user.email 'your ...
- 根据数据库连接的java.sql.Connection获取数据库名称
// 获取数据库的元数据信息 DatabaseMetaData metaData = conn.getMetaData(); // 获取数据库名称的方法 System.out.println(meta ...
- ps裁剪一寸照片及换背景色
1.打开ps,把图片拖进去编辑 2.选魔棒工具,在途中选中背景色,鼠标右键,选选择反向 效果如下: 3.按 快捷键 ctrl + j 可以在右侧看到新建出了一个图层 4.选文件,新建,填写长宽,如果 ...
- 居中div，居中浮动的元素
定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也 ...
- 基于JavaSE阶段的IO流详解
1.IO流基本概述 在Java语言中定义了许多针对不同的传输方式,最基本的就是输入输出流(俗称IO流),IO流是属于java.io包下的内容,在JavaSE阶段主要学下图所示的: 其中从图中可知,所有 ...
- java io-1基本概念
java io-1基本概念 2015-07-03 15:17 648人阅读 评论(0) 收藏 举报 分类: [JavaSE](37) 目录(?)[+] ------------------ ...
- centos7下配置mysql5.7.24主从复制
前置条件 准备两台服务器(可以是虚拟机),系统为centos7 此处演示的两台服务器:192.168.8.134.192.168.8.135 第一步:安装mysql5.7.24 先在两台服务器上安装m ...