用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:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...
随机推荐
- 【BZOJ2876】【NOI2012】骑行川藏（数学，二分答案）
[BZOJ2876][NOI2012]骑行川藏(数学,二分答案) 题面 BZOJ 题解 我们有一个很有趣的思路. 首先我们给每条边随意的赋一个初值. 当然了,这个初值不会比这条边的风速小. 那么,我们 ...
- SID（安全标识符）
creating a SID for the Everyone group. DWORD SidSize; PSID TheSID; LPTSTR p; SidSize = SECURITY_MAX_ ...
- 洛谷10月月赛R2·浴谷八连测R3题解
早上打一半就回家了... T1傻逼题不说了...而且我的写法比题解要傻逼很多T T T2可以发现,我们强制最大值所在的块是以左上为边界的倒三角,然后旋转4次就可以遍历所有的情况.所以二分极差,把最大值 ...
- C++11新利器
C++11常用特性的使用经验总结 unordered_map可能用的会比较多 省的写哈希表了. 但是浪费空间
- 图像处理之直方图均衡化及C源码实现
1 直方图均衡化(Histogram Equalization)简介 图像对比度增强的方法可以分成两类:一类是直接对比度增强方法;另一类是间接对比度增强方法.直方图拉伸和直方图均衡化是两种最常见的间接 ...
- Codeforces Round #417 (Div. 2)A B C E 模拟 枚举 二分 阶梯博弈
A. Sagheer and Crossroads time limit per test 1 second memory limit per test 256 megabytes input sta ...
- 【转】虚拟机克隆之后，网卡名称从eth0变成eth1之后的解决办法
使用VMware安装了CentOS虚拟机,克隆之后使用service network restart指令来重新启动网络服务时,会看到有eth0网卡不存在的提示. 出现这种现象的原因是,很多Linu ...
- Nginx--try_files
Nginx的配置语法灵活,可控制度非常高.在0.7以后的版本中加入了一个try_files指令,配合命名location,可以部分替代原本常用的rewrite配置方式,提高解析效率. 作用域:se ...
- （转）javap 指令集
栈和局部变量操作将常量压入栈的指令aconst_null 将null对象引用压入栈iconst_m1 将int类型常量-1压入栈iconst_0 将int类型常量0压入栈iconst_1 将int类型 ...
- python---tornado补充（异步非阻塞）
一:正常访问(同一线程中多个请求是同步阻塞状态) import tornado.ioloop import tornado.web import tornado.websocket import da ...