用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:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...
随机推荐
- SCWS中文分词，功能函数实例应用
结合前文的demo演示,现写一个实用的功能函数,使用方法:header('Content-Type:text/html;charset=UTF-8');$text = '我是一个中国人, ...
- c语言中，指针加1的情况.指针变量详细介绍
指针是一个特殊的变量,它里面存储的数值被解释成为内存里的一个地址. 要搞清一个指针需要搞清指针的四方面的内容: 指针的类型, 指针所指向的 类型, 指针的值或者叫指针所指向的内存区, 还有指针本身所占 ...
- django 自定义认证
在Django中自定义身份验证 Django 自带的认证系统足够应付大多数情况,但你或许不打算使用现成的认证系统.定制自己的项目的权限系统需要了解哪些一些关键点,即Django中哪些部分是能够扩展或替 ...
- spring mybatis 多数据源配置
1.创建好数据库的配置文件 mysql.url=jdbc:mysql://***/***?useUnicode=true&characterEncoding=UTF-8 mysql.usern ...
- web项目中解决post乱码和get乱码的方法
前提复习编码问题产生的原因: 1. 什么是URL编码. URL编码是一种浏览器用来打包表单输入的格式,浏览器从表单中获取所有的name和其对应的value,将他们以name/value编码方式作为U ...
- poj 3261 后缀数组 可重叠的 k 次最长重复子串
Milk Patterns Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 16430 Accepted: 7252 Ca ...
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- [吴恩达机器学习笔记]12支持向量机4核函数和标记点kernels and landmark
12.支持向量机 觉得有用的话,欢迎一起讨论相互学习~Follow Me 12.4 核函数与标记点- Kernels and landmarks 问题引入 如果你有以下的训练集,然后想去拟合其能够分开 ...
- 数据分析与展示---anaconda的使用
一:安装 官方源:https://repo.continuum.io/archive/(太慢) 清华源:https://mirrors.tuna.tsinghua.edu.cn/anaconda/ar ...
- 2017北京国庆刷题Day6 afternoon
期望得分:100+100+40=240 实际得分:100+0+40=140 二进制拆分.二进制前缀和 #include<cstdio> #include<iostream> u ...