一个漂亮的js表单验证页面+验证码
一个漂亮的js表单验证页面
见图知其意，
主要特性
- 带密码安全系数的判断
- 其他的就没有啥啦
- 嘿嘿嘿
当然，其代码也在Github上
我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代码
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,body {
background: linear-gradient(to left bottom, #DD6455, #a18cd1);
width: 100%;
height: 100%;
}
.form-container{
background-color:#fff;
width: 768px;
margin: 100px auto;
height: 500px;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
overflow: hidden;
}
.left{
width: 50%;
height: 100%;
float: left;
background: url(../imgs/AbstractSaltBeds_ZH-CN8351691359_1920x1080.jpg) center center/cover no-repeat;
}
.right {
float: right;
width: 50%;
height: 100%;
}
form{
padding: 20px;
height: 100%;
}
.passw-div, .verifi-div, .repassw-div{
position: relative;
}
h1 {
margin: 10px 6px;
}
input {
background-color: #eee;
outline:none; /*不出现蓝色边框*/
width: 60%;
padding: 12px 15px;
margin: 16px 2px;
border-radius: 20px;
border: 1px solid #CE6D39;
transition: 300ms;
font-size: 14px;
} .register-div span {
width: 35%;
height: 40px;
display: block;
border-radius: 20px;
line-height: 40px;
text-align: center;
font-size: 12px;
font-weight: bold;
letter-spacing: 5px;
border: 1px solid #CE6D39;
background-color: #CE6D39;
color: #FFFFFF;
margin: 15px 0 0 15%;
margin-left: 15%;
transition: 300ms;
}
.register-div span:hover{
background-color: #FF4B2B;
box-shadow: 0 2px 11px #B34747
}
.safety-factor-div {
position: absolute;
line-height: 10px;
top: -6px;
left: 0px;
}
.safety-factor-div div{
float: left;
width: 30px;
height: 10px;
border-radius: 5px;
margin: 0 8px;
visibility: hidden;
}
.safety-factor-div span{
float: left;
margin-left: 10px;
font-size: 12px;
visibility: hidden;
}
.passw-div p,.repassw-div p{
position: absolute;
font-size: 12px;
color: #FF4B2B;
top: 28px;
left: 220px;
}
.verifi-div canvas{
position: absolute;
top: 18px;
left: 117px;
width: 90px;
height: 39px;
border-radius: 20px;
border: 1px solid #CE6D39;
background-color: #CE6D39;
text-align: center;
line-height: 40px;
transition: 300ms;
}
input:focus, .verifi-div canvas:hover{
box-shadow: 0 2px 11px #B34747
} </style>
</head>
<body>
<div class="form-container">
<div class="left"></div>
<div class="right">
<form >
<div class="header-div">
<h1>注册</h1>
</div>
<div class="username-div">
<input id="username" type="text" placeholder="用户名">
</div>
<div class="passw-div">
<input id="passw" type="password" placeholder="密码">
<p id="passw-err"></p>
<div class="safety-factor-div">
<span id="safe-head">安全系数</span>
<div id="safe-d1" style="background-color:red;"></div>
<div id="safe-d2" style="background-color:#F0F028;"></div>
<div id="safe-d3" style="background-color:green;"></div>
</div> </div>
<div class="repassw-div">
<input id="repassw" type="password" placeholder="确认密码">
<p id="repassw-err"></p>
</div>
<div class="verifi-div">
<input id="input-code" type="text" placeholder="请输入验证码">
<canvas id="verifi-code"></canvas>
</div>
<div class="register-div">
<span id="register">注册</span>
</div>
</form>
</div>
</div>
</body>
<script>
'use strict'; var username = document.getElementById('username');
var myInput = document.getElementById('passw');
var myReinput = document.getElementById('repassw');
var inputCode = document.getElementById('input-code');
var register = document.getElementById('register');
var canvas = document.getElementById('verifi-code'); var code, password, repassword; myInput.addEventListener('input',function(e){ let safe_head = document.getElementById('safe-head');
let safe_d1 = document.getElementById('safe-d1');
let safe_d2 = document.getElementById('safe-d2');
let safe_d3 = document.getElementById('safe-d3');
let input_err = document.getElementById('passw-err'); console.log("输入密码： " + myInput.value); password = myInput.value;
safe_head.style.visibility = "visible";
switch (checkPwd(password)) {
case 0:{
input_err.innerHTML = "密码不能小于6位";
safe_d1.style.visibility = "visible";
safe_d2.style.visibility = "hidden";
safe_d3.style.visibility = "hidden";
break;
}
case 1:{
input_err.innerHTML = "";
safe_d1.style.visibility = "visible";
safe_d2.style.visibility = "visible";
safe_d3.style.visibility = "hidden";
break;
}
case 2:{
input_err.innerHTML = "";
safe_d1.style.visibility = "visible";
safe_d2.style.visibility = "visible";
safe_d3.style.visibility = "visible";
break;
}
default:{
input_err.innerHTML = "";
}
}
}); myReinput.addEventListener('input',function(e){
let reinput_err = document.getElementById('repassw-err'); console.log("重复密码输入：" + myReinput.value); repassword = myReinput.value;
if(repassword != password){
reinput_err.innerHTML = "确认密码不相同哦";
}
else{
reinput_err.innerHTML = "";
}
}); register.onclick = function () {
if(username.value){
if (password) {
if(password.length >= 6){
if(myReinput.value){
if(myReinput.value == password){
if(code == inputCode.value.toUpperCase()){
alert("登入成功")
} else alert("验证码错误");
} else alert("重复密码不相同哦")
} else alert("请输入重复密码")
}else alert("请输入符合规范的密码")
} else alert("请输入密码");
} else alert("请输入邮箱");
} function createCode() {
let code = "";
var codeLength = 4;
var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * 36);
code += selectChar[charIndex];
}
console.log("生成验证码 " + code);
return code;
} function draw_canvas(code) {
if (canvas) {
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font="80px Verdana";
ctx.strokeText(code,25,110);
console.log("canvas 绘制完成")
}
else
console.log("没有找到canvas")
} function checkPwd(str){
var pattern1 = /([0-9]+)/i;
var pattern2 = /([a-z]+)/i;
if(str.length<6 || str.length>20){
return 0;
}
if(pattern1.exec(str)){
if(pattern2.exec(str)){
return 2
}
return 1;
}
} canvas.onclick = function () {
code = createCode();
draw_canvas(code);
}
window.onload = function () {
code = createCode();
draw_canvas(code);
} </script>
</html>
但是这样图片加载不上去，可以去github取,当然也可以用你自己的图片
一个漂亮的js表单验证页面+验证码的更多相关文章
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- js表单验证工具包
常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
随机推荐
- Java入门系列之hashCode和equals（十二）
前言 前面两节内容我们详细讲解了Hashtable算法和源码分析,针对散列函数始终逃脱不掉hashCode的计算,本节我们将详细分析hashCode和equals,同时您将会看到本节内容是从<E ...
- SPSS学习笔记参数检验—单样本t检验
单样本t检验 目的:利用来自总体的样本数据,推断该总体的均值是否与指定的检验值存在差异. 适用条件:样本来自的总体应服从或者近似服从正态分布. 注:当样本量n比较大时:由中心极限定理得知,即使原数据不 ...
- 【SQL server基础】SQL存储过程和函数的区别
本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个.而函数是可以嵌入在sql中使用的,可以在select中调用,而存储过程不行.执行的本质都一样. 函数限制比较多,比 ...
- MangoDB的下载和安装
前面已经简单介绍了MongoDB,今天我们就要正式学习他了,话不多说,咱先来安装. 1.现在MongoDB已经到了4.0版本,咱先去官网下载,MongoDB官网传送门,下载的版本信息如下,点击Do ...
- 正睿国庆DAY2动态规划专题
正睿国庆DAY2动态规划专题 排列-例题 1~n 的排列个数,每个数要么比旁边两个大,要么比旁边两个小 \(f[i][j]\) 填了前i个数,未填的数有\(j\)个比第\(i\)个小,是波峰 \(g[ ...
- wordpress安装主题、插件需要FTP用户名密码
修改主目录wordpress下的wp-config.php文件,在最结尾加上 define("FS_METHOD", "direct"); define(&qu ...
- 同时支持EF+Dapper的混合仓储，助你快速搭建数据访问层
背景 17年开始,公司开始向DotNet Core转型,面对ORM工具的选型,当时围绕Dapper和EF发生了激烈的讨论.项目团队更加关注快速交付,他们主张使用EF这种能快速开发的ORM工具:而在线业 ...
- python win32com 读取带密码的excel
之前用到的win32com读取带密码excel的相关内容,今天刚好准备整理下,突然发现方法又不灵了. 以下为错误示范: # 已知excel密码去除 def del_password(filename, ...
- Kafka 学习笔记之 Consumer API
Kafka提供了两种Consumer API High Level Consumer API Low Level Consumer API(Kafka诡异的称之为Simple Consumer API ...
- python语言程序设计基础（嵩天）第二章课后习题
p56: *2.1 实例1的修改.改造实例代码1.1,采用eval(input(<提示内容>))替换现有输入部分,并使输出的温度值为整数. 源代码: TempStr=input(" ...