一个漂亮的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. 长度 ...
随机推荐
- Python学习笔记整理总结【Django】：Form组件
Form组件 Django的Form主要具有一下几大功能: --生成HTML标签 --验证用户数据(显示错误信息) --HTML Form提交保留上次提交数据 --初始化页面显示内容 1.内置字段 ...
- SpringBootSecurity学习（10）网页版登录之记住我功能
场景 很多登录都有记住我这个功能,在用户登陆一次以后,系统会记住用户一段时间,在这段时间,用户不用反复登陆就可以使用我们的系统.记住用户功能的基本原理如下图: 用户登录的时候,请求发送给过滤器User ...
- Maven 梳理 - 常用三种archetype说明
archetype:原型的意思,可理解为Maven项目模板工具包 常用archetype 1.cocoon-22-archetype-webapp 2.maven-archetype-quicksta ...
- maven war包打包去除jar包瘦身
1.pom文件配置 <!-- war包 --> <plugin> <groupId>org.apache.maven.plugins</groupId> ...
- eclipse快捷键——纪念我突然失忆的脑子
常用快捷键 1.快速new出来一个对象 Alt+/ 2.快速格式化代码 Ctrl+I 3.快速导入包 Ctrl+Shift+O
- 记一次arch滚挂后，更换lts内核
背景 因为arch的滚动升级模式,每天pacman -Syu已经是一种习惯了(虽然我是使用yay的),升级过程中会连内核一起升级,但不会立刻生效,通常要等到下次重启时才会生效. 因为此前使用的是有一点 ...
- Vue躬行记（1）——数据绑定
Vue.js的核心是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中,即通过模板将数据显示在页面上,如下所示. <div id="container">{{c ...
- php7和php5区别是什么
PHP7距正式发布以及有挺长时间了,刚出道就号称比旧版本快了几倍,各种开源框架或系统运行在PHP7上速度效率提高了几倍.那么php7和php5之间的区别是什么?下面本篇文章就来给大家简单介绍一下,希望 ...
- Python3 学习笔记之 类型/运算符
类型/运算符: 类型: 整数 字符串 浮点数 布尔类型 类型转换: 检查类型: 算术操作符: 逻辑操作符: 优先级:
- mysql 分页offset过大性能问题解决思路
在公司干活一般使用sqlserver数据库.rownumber分页贼好用. 但是晚上下班搞自己的事情就不用sqlserver了.原因就是自己的渣渣1核2g的小服务器完全扛不住sqlserver那么大的 ...